Basic concepts

This part of the documentation assumes that you are familiar with several other concepts of Banquette for which you should first read the documentation. It includes:

• Vue Typescript: if you should only read one, it's this one. Vue Typescript is used extensively throughout the docs, and in every demo.
• Form: if you plan to use any of the form components.

Framework-agnostic

The UI components of Banquette has been designed to be as independent as possible from any library or framework, the logic of its UI components has been divided in two parts:

1. The headless part: it holds the main logic of the component and maintains a very strict separation with the view,
2. The view (discussed here): that's the concrete component the user will interact with. It could use VueJS, React, Angular, or any other technology (or even no framework at all).

Components have only been implemented with Vue for now. If you would like to help making them available for another framework, feel free to join the Discord.

Remote

Many components can make Ajax requests, to fetch or persist data. All the components discussed in this documentation adopt a similar approach and use the same underlying tools for that.

Let's take the Remote component for an example:

<bt-remote url="/article/{id}" :urlParams="{id: 12}" v-slot="{response}">
    {{ response.result }}
</bt-remote>

It can take the following parameters:

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.
url-params	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.

TIP

These props are available to all components described in this documentation that do Ajax requests.

Their name can vary a bit though, depending on the component, but they work exactly the same nonetheless. In fact, they all use the same module behind the scene.

For example, in a Select component, they are prefixed with remote-:

• url => remote-url
• endpoint => remote-endpoint
• etc.

For a Form component, there are two sets of props, one to load, and one to persist:

• url => load-url OR persist-url
• endpoint => load-endpoint OR persist-endpoint
• etc.

These are just aliases, they work exactly the same.