Write less, cleaner code and focus on building amazing apps!
Banquette comes with a large palette of framework-agnostic components, from forms, models, validation, http requests and more.
Let's you write Vue 3 components as Typescript classes. It supports component inheritance, and comes with a powerful theming system.
A set of ready to use Vue 3 components. It includes things like buttons, dialogs, popover, forms, all highly customizable.
Core components
The core components regroup all the framework-agnostic packages. The most notable of which are the model transformers, the form framework, the validators and the http/api utilities. Below is an overview of each of them.
If you're dealing with complex relational data, or you simply like well structured code, you can create models.
A model is just a class, that we'll decorate to control its behavior through the various tools of Banquette. A model can be created from / transformed to a form, an http request, a literal object, or any other format you might add.
An object oriented form framework that offers a variety of tools to manage a tree of components and their states. This is a low level, framework-agnostic implementation on which an UI can be built.
That's the base on which the form components of Vue UI are built.
The validation component is a set utility functions that can be used to ensure any value respects a set of constraints.
They are easily extendable and fully integrated with the form framework and models.
The Http package offers an easy way to do Ajax requests. Requests can be deferred, and retry transparently in case of a network error.
The Api package is built on top of the Http package, and adds the notion of endpoint. It's also fully integrated with models.
Below is an quick overview of what you can do with a model.
This is only a quick overview, please read the documentation to learn more.
Vue Typescript
This package contains a set of decorators that allows you to write your Vue components and directives as real TypeScript classes. It supports inheritance and comes with a powerful theming system.
Define your Vue components as real Typescript classes that you decorate to define Vue related behavior. Each component gets a separate instance of the class, that can inherit from another class (component or not) and behave just like a normal class.
Only the parts you expose are visible by Vue, improving performance.
You can also create your directives as a Typescript class.
Each usage of the directive will create a new instance of the class and will be restored each time the directive updates. Giving you a persistent context for your logic.
VueTypescript comes with a powerful theming system, that make it easy to override the styles and props(!) of the component.
All of it being dynamic, you can add or modify your themes at runtime, dynamically.
This is only a quick overview, please read the documentation to learn more.
Vue UI
The Vue UI package is a set of ready to use Vue 3 components built on top of the core components and Vue Typescript. It includes things like buttons, dialogs, popover, forms, etc., all highly customizable and coming with a default light and dark theme.
<input/> and <textarea> are covered by this component.
checkboxes and radios.