Using Bryntum Core with Vue

[]`. Sample code for tree store creation with `ModelConfig` and `StoreConfig` classes: ```typescript import { Store, StoreConfig, ModelConfig } from '@bryntum/core'; const storeConfig: Partial = { tree : true, data : [ { id : 1, children : [ { id : 2 } ] as Partial[] } ] as Partial[] }; new Store(storeConfig); ``` ## Wrappers The Vue wrappers encapsulate Bryntum Core and other Bryntum widgets in Vue components that expose configuration options, properties, features and events. The wrapped all Bryntum UI components so they can be used the usual Vue way. To use native API package classes with wrappers import them from `@bryntum/core`. ```javascript import { Core } from '@bryntum/core'; ``` ### Installing the wrappers package The wrappers are distributed as a separate package `@bryntum/core-vue` that is installed according to the used package manager. Please refer to this [guide for Bryntum NPM repository access](#Core/guides/npm-repository.md). ### Wrappers Overview Wrappers are Vue components which provide full access to Bryntum API widget class configs, properties, events and features. Each Wrapper has it's own HTML tag which can be used in vue templates. This is the list of available wrappers for Bryntum Core Vue package: | Wrapper tag name | API widget reference | |------------------|----------------------| | <bryntum-button/> | [Button](#Core/widget/Button) | | <bryntum-button-group/> | [ButtonGroup](#Core/widget/ButtonGroup) | | <bryntum-checkbox/> | [Checkbox](#Core/widget/Checkbox) | | <bryntum-chip-view/> | [ChipView](#Core/widget/ChipView) | | <bryntum-color-field/> | [ColorField](#Core/widget/ColorField) | | <bryntum-color-picker/> | [ColorPicker](#Core/widget/ColorPicker) | | <bryntum-combo/> | [Combo](#Core/widget/Combo) | | <bryntum-container/> | [Container](#Core/widget/Container) | | <bryntum-date-field/> | [DateField](#Core/widget/DateField) | | <bryntum-date-picker/> | [DatePicker](#Core/widget/DatePicker) | | <bryntum-date-time-field/> | [DateTimeField](#Core/widget/DateTimeField) | | <bryntum-display-field/> | [DisplayField](#Core/widget/DisplayField) | | <bryntum-duration-field/> | [DurationField](#Core/widget/DurationField) | | <bryntum-field-filter-picker/> | [FieldFilterPicker](#Core/widget/FieldFilterPicker) | | <bryntum-field-filter-picker-group/> | [FieldFilterPickerGroup](#Core/widget/FieldFilterPickerGroup) | | <bryntum-file-field/> | [FileField](#Core/widget/FileField) | | <bryntum-file-picker/> | [FilePicker](#Core/widget/FilePicker) | | <bryntum-filter-field/> | [FilterField](#Core/widget/FilterField) | | <bryntum-label/> | [Label](#Core/widget/Label) | | <bryntum-list/> | [List](#Core/widget/List) | | <bryntum-menu/> | [Menu](#Core/widget/Menu) | | <bryntum-number-field/> | [NumberField](#Core/widget/NumberField) | | <bryntum-paging-toolbar/> | [PagingToolbar](#Core/widget/PagingToolbar) | | <bryntum-panel/> | [Panel](#Core/widget/Panel) | | <bryntum-password-field/> | [PasswordField](#Core/widget/PasswordField) | | <bryntum-radio/> | [Radio](#Core/widget/Radio) | | <bryntum-radio-group/> | [RadioGroup](#Core/widget/RadioGroup) | | <bryntum-slider/> | [Slider](#Core/widget/Slider) | | <bryntum-slide-toggle/> | [SlideToggle](#Core/widget/SlideToggle) | | <bryntum-splitter/> | [Splitter](#Core/widget/Splitter) | | <bryntum-tab-panel/> | [TabPanel](#Core/widget/TabPanel) | | <bryntum-text-area-field/> | [TextAreaField](#Core/widget/TextAreaField) | | <bryntum-text-area-picker-field/> | [TextAreaPickerField](#Core/widget/TextAreaPickerField) | | <bryntum-text-field/> | [TextField](#Core/widget/TextField) | | <bryntum-time-field/> | [TimeField](#Core/widget/TimeField) | | <bryntum-time-picker/> | [TimePicker](#Core/widget/TimePicker) | | <bryntum-toolbar/> | [Toolbar](#Core/widget/Toolbar) | | <bryntum-widget/> | [Widget](#Core/widget/Widget) | | <bryntum-year-picker/> | [YearPicker](#Core/widget/YearPicker) | ### Using the wrapper in your application Now you can use the component defined in the wrapper in your application: Sample code for `App.vue`: ```html ``` As shown above you can assign values and bind to Vue data with `tooltip="coreConfig.tooltip"` or `v-bind` option. Listen to events with `@click="onClick"`, or use `v-on`. `AppConfig.js` should contain a simple Bryntum Core configuration. We recommend to keep it in a separate file because it can become lengthy especially for more advanced configurations. Sample code for `AppConfig.js`: ```javascript export const coreConfig = { tooltip : "My cool Bryntum Core component" // Bryntum Core config options }; ``` Add `sass-loader` to your `package.json` if you used SCSS. You will also need to import CSS file for Bryntum Core. The ideal place for doing it is the beginning of `App.scss/App.css` that would be imported in `App.vue`: ```javascript @import "~@bryntum/core/core.stockholm.css"; ``` ### Embedding widgets inside wrapper Wrappers are designed to allow using Bryntum widgets as Vue components, but they themselves cannot contain other Bryntum wrappers inside their tag. To embed Bryntum widgets inside a wrapper you should instead use the available configuration options for the wrapper's widget. Please note that not all widgets may contain inner widgets, please refer to the API docs to check for valid configuration options. This example shows how to use a `Toolbar` widget inside the wrapper for Bryntum Core: Sample code for `AppConfig.js`: ```javascript export const coreConfig = { // Toolbar (tbar) config tbar: { items : [ { type : 'button', text : 'My button' } ] } // Bryntum Core config options }; ``` ### Syncing bound data changes The stores used by the wrapper enable [syncDataOnLoad](#Core/data/Store#config-syncDataOnLoad) by default (Stores not used by the wrapper have it disabled by default). It is done to make Vue column renderer update the value. Without `syncDataOnLoad`, each time a new array of data is set to the store would apply the data as a completely new dataset. With `syncDataOnLoad`, the new state is instead compared to the old, and the differences are applied. ## Configs, properties and events All Bryntum Vue Wrappers support the full set of the public configs, properties and events of a component. ### Using dataChange event to synchronize data Bryntum Core keeps all data in its stores which are automatically synchronized with the UI and the user actions. Nevertheless, it is sometimes necessary for the rest of the application to be informed about data changes. For that it is easiest to use `dataChange` event. ```javascript ``` ### Wrapper configs * `relayStoreEvents` - set it to `true` to relay events from stores to `Core` instance. `dataChange` event fires twice if set to true. Defaults to `false`. ## Features Features are suffixed with `Feature` and act as both configs and properties for `BryntumCoreComponent`. They are mapped to the corresponding API features of the Bryntum Core `instance`. This is a list of all `BryntumCoreComponent` features: |Wrapper feature name|API feature reference | |--------------------|----------------------| ## Bryntum Core API instance It is important to know that the Vue `BryntumCoreComponent` is **not** the native Bryntum Core instance, it is a wrapper or an interface between the Vue application and the Bryntum Core itself. All available configs, properties and features are propagated from the wrapper down to the underlying Bryntum Core instance, but there might be the situations when you want to access the Bryntum Core directly. That is fully valid approach and you are free to do it.

Vue 2 Vue 3

If you need to access Bryntum Core functionality not exposed by the wrapper, you can access the Bryntum Core instance directly. Within the Vue 2 wrapper it is available under the instance property. This simple example shows how you could use it: App.vue:

```html ```

When accessing instance directly, use wrapper's API widget reference docs from the list above to get available configs and properties.

If you need to access Bryntum Core functionality not exposed by the wrapper, you can access the Bryntum Core instance directly. Within the Vue 3 wrapper it is available under the instance.value property. This simple example shows how you could use it: App.vue:

```html ```

When accessing instance directly, use wrapper's API widget reference docs from the list above to get available configs and properties.

## Troubleshooting Please refer to this [Troubleshooting guide](#Core/guides/integration/vue/troubleshooting.md). ## References * Config options, features, events and methods [Bryntum Core API docs](#api) * Visit [Vue Framework Homepage](https://vuejs.org) * Post your questions to [Bryntum Support Forum](https://forum.bryntum.com/) * [Contact us](https://bryntum.com/contact/)

Last modified on 2023-10-26 8:26:30