diff --git a/content/en/docs/4.guides/2.renderers/2.vue.md b/content/en/docs/4.guides/2.renderers/2.vue.md index 65fd577a..75bb7bb4 100644 --- a/content/en/docs/4.guides/2.renderers/2.vue.md +++ b/content/en/docs/4.guides/2.renderers/2.vue.md @@ -202,6 +202,50 @@ In order to customize the context menu for this rendering plugin, one can overri } ``` +## Use Vue.js plugins {#use-vue-plugins} + +Since `rete-vue-plugin` creates independent Vue.js instance for nodes, sockets, controls, etc., it doesn't inherit plugins from your project's main Vue instance. To bridge this gap, the plugin offers a solution: injecting a custom Vue application instance. This capability ensures that any Vue plugins or global components you wish to employ within your Rete-specific Vue components are accessible, enabling seamless sharing between your Vue.js application and Rete.js editor. + +### Vue.js 3 + +The following example demonstrates how to configure custom Vue.js 3 instance: + +```ts +import { Presets, VuePlugin } from "rete-vue-plugin"; +import { createApp } from "vue"; + +const render = new VuePlugin({ + setup(context) { + const app = createApp(context); + + app.use(yourPlugin); + + return app; + }, +}); +``` + +where `yourPlugin` is an instance of any plugin (like [Vuetify](https://vuetifyjs.com/en/getting-started) or [Vue I18N](https://vue-i18n.intlify.dev/)) + +### Vue.js 2 + +Since the initialization for Vue.js 2 is slightly different, let's take a look at the following example: + +```ts +import { Presets, VuePlugin } from "rete-vue-plugin"; +import Vue from "vue"; + +const render = new VuePlugin({ + setup(context) { + const app = new Vue({ ...context, yourPlugin }); + + return app; + }, +}); +``` + +where `yourPlugin` is an instance of any plugin (like [Vuetify](https://vuetifyjs.com/en/getting-started) or [Vue I18N](https://kazupon.github.io/vue-i18n/)) + ## Other presets {#other presets} - [context menu](/docs/guides/context-menu) diff --git a/content/uk/docs/4.guides/2.renderers/2.vue.md b/content/uk/docs/4.guides/2.renderers/2.vue.md index 1e84c523..d2b1c2ae 100644 --- a/content/uk/docs/4.guides/2.renderers/2.vue.md +++ b/content/uk/docs/4.guides/2.renderers/2.vue.md @@ -201,6 +201,50 @@ render.addPreset(Presets.classic.setup({ } ``` +## Використання Vue.js плагінів {#use-vue-plugins} + +Оскільки `rete-vue-plugin` створює незалежний екземпляр Vue.js для вузлів, сокетів, контролів тощо, він не успадковує плагіни з основного екземпляра Vue вашого проекту. Щоб заповнити цей пробіл, плагін пропонує рішення: впровадження власного екземпляра додатку Vue. Ця можливість забезпечує доступність будь-яких плагінів Vue або глобальних компонентів, які ви бажаєте використовувати в компонентах Vue, специфічних для Rete, тим самим забезпечуючи безперешкодне спільне використання між вашим додатком Vue.js та редактором Rete.js. + +### Vue.js 3 + +Наступний приклад демонструє, як налаштувати власний екземпляр Vue.js 3: + +```ts +import { Presets, VuePlugin } from "rete-vue-plugin"; +import { createApp } from "vue"; + +const render = new VuePlugin({ + setup(context) { + const app = createApp(context); + + app.use(yourPlugin); + + return app; + }, +}); +``` + +де `yourPlugin` це екземпляр будь-якого плагіна (наприклад, [Vuetify](https://vuetifyjs.com/en/getting-started) або [Vue I18N](https://vue-i18n.intlify.dev/)) + +### Vue.js 2 + +Оскільки ініціалізація для Vue.js 2 трохи відрізняється, давайте розглянемо наступний приклад: + +```ts +import { Presets, VuePlugin } from "rete-vue-plugin"; +import Vue from "vue"; + +const render = new VuePlugin({ + setup(context) { + const app = new Vue({ ...context, yourPlugin }); + + return app; + }, +}); +``` + +де `yourPlugin` це екземпляр будь-якого плагіна (наприклад, [Vuetify](https://vuetifyjs.com/en/getting-started) або [Vue I18N](https://kazupon.github.io/vue-i18n/)) + ## Інші пресети {#other presets} - [контекстне меню](/uk/docs/guides/context-menu)