Merge pull request #156 from retejs/docs-vue-configure

Docs vue configure

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<Schemes, AreaExtra>({
+  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<Schemes, AreaExtra>({
+  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)

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<Schemes, AreaExtra>({
+  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<Schemes, AreaExtra>({
+  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)