Banquette
On this page

Remote

bt-remote is a basic but very useful component that allow you do an ajax request and makes the result available through a slot.

Basic usage

Using bt-remote is as simple as that:

<bt-remote url="/url-to-call" v-slot="{response}">
    <!-- Do whatever with the response -->
</bt-remote>

    Props

    Option Description
    url
    		A raw url to call. It can contain variables surrounded by { }. Example: /user/{id}. {id} will be replaced by the value of a id parameter given via url-params.
    endpoint
    		Name of the endpoint to use. Should not be used if url is defined, it's one or the other. Please check out this part of the documentation if you don't know what an endpoint is in Banquette.
    model
    		An optional model identifier. If defined the endpoint is expected to be defined in the model and the response will be transformed into an entity of the model. Default is null.
    method
    		The HTTP method to use when performing the request.
    Default is get.
    urlParams
    		Parameters to add to the url. If a variable with the same name is found in the url (surrounded by { }), it will replace it. Otherwise, it will be added to the query string (after ?).
    headers
    		Additional headers to add to the request.

    Slots

    There are four slots you can use to customize the rendering of the component:

    Name Description
    waiting

    This slot is shown when there is no valid remote configuration.

    Props:

    fetching This slot is shown when the component is fetching remote data.

    Props:

    error This slot is shown when the component failed to fetch remote data.

    Props:

    ready The default slot is shown when remote data have been fetched successfully and are ready to consume.

    Props:

    • response: the HttpResponse object created by the request.
    • result: a shortcut to response.result.
    • bag: a reference on the bag (see here).

    In practice:

      The bag

      This component is meant to work in a HTML only environment, like if the app is created via dom-vue. In which case there is no accessible js code surrounding the template, at all.

      But what if you want to show a part of the view conditionally for example? This would require the creation of a variable, which is not possible without creating a component.

      That's precisely why a bag object is exposed by bt-remote, and made accessible to all slots.

      It's a simple empty object ({}), nothing fancy. But it allows you to easily add variables to keep track of the state of your view for example.

      For example, we can make the author of the quote only visible after clicking a link: