Как внедрить Vue в существующий проект на другом фреймворке (например, jQuery или React)?

Внедрение Vue в существующий проект на другом фреймворке (например, jQuery, React, Angular, Backbone и др.) — это распространённый сценарий для постепенной миграции или добавления современных компонентов без полной переработки архитектуры. Vue легко встраивается в сторонние системы благодаря своему компактному ядру и возможности монтироваться в отдельные DOM-узлы.

Ниже приведены техники интеграции Vue в чужой стек, примеры кода, особенности взаимодействия с DOM и советы по совместной работе с jQuery и React.

1. Подключение Vue в jQuery-проект

Условия:

  • У вас проект на jQuery, код расположен в HTML-шаблонах.

  • Нужно внедрить интерактивный компонент (например, форму или таблицу).

Шаги:

1.1 Подключите Vue

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

1.2 Разметка

<div id="vue-widget">
<my-widget></my-widget>
</div>

1.3 Vue-компонент

<script type="module">
const { createApp, defineComponent } = Vue;
const MyWidget = defineComponent({
template: \`<button @click="count++">Нажато: {{ count }}</button>\`,
data() {
return { count: 0 };
}
});
createApp({
components: { MyWidget }
}).mount('#vue-widget');
</script>

Особенности:

  • Vue изолируется в #vue-widget и не влияет на остальной DOM.

  • jQuery может работать с другими элементами страницы.

2. Интеграция Vue в проект на React

Vue и React имеют разные модели реактивности, но можно запускать их параллельно через мост-компоненты и контейнеры в DOM.

Подход: Vue встраивается как отдельный DOM-элемент в React-компоненте.

2.1 React-обёртка для Vue

// VueWrapper.jsx
import { useRef, useEffect } from 'react';
import { createApp } from 'vue';
import MyVueComponent from './MyVueComponent.vue';
export default function VueWrapper(props) {
const containerRef = useRef();
useEffect(() => {
const app = createApp(MyVueComponent, props);
app.mount(containerRef.current);
return () => {
app.unmount();
};
}, \[\]);
return <div ref={containerRef}></div>;
}

2.2 Использование в React

function App() {
return (
<div>
<h1>React App</h1>
<VueWrapper message="Привет из React!" />
</div>
);
}

3. Внедрение Vue через Web Components (если основной проект поддерживает их)

Vue 3 может экспортировать компоненты как Web Components, которые совместимы с любым фреймворком.

3.1 Установка:

npm install @vue/web-component-wrapper vue@3

3.2 Регистрация:

import { defineCustomElement } from 'vue';
import MyComponent from './MyComponent.ce.vue';
const MyElement = defineCustomElement(MyComponent);
customElements.define('my-widget', MyElement);

3.3 Использование:

<my-widget message="Hello from outside"></my-widget>

Работает как в jQuery, так и в React, без необходимости Vue runtime.

4. Передача данных между Vue и другим фреймворком

4.1 Через HTML-атрибуты

<div id="vue-app" data-message="Привет"></div>
const el = document.getElementById('vue-app');
createApp(App, { message: el.dataset.message }).mount(el);

4.2 Через глобальные переменные

window.\__USER__ = { id: 123, name: 'Anna' };
createApp(App, { user: window.\__USER__ }).mount('#vue-root');

5. Вызов Vue-функций из jQuery

Пример:

const app = createApp(App).mount('#vue-root');
// где-то в jQuery
$('#some-button').on('click', function () {
app.increment(); // метод компонента Vue
});

При этом increment должен быть объявлен в methods:

methods: {
increment() {
this.count++;
}
}

6. Вызов jQuery-функций из Vue

Пример:

<template>
<button @click="triggerJQuery">Открыть диалог</button>
</template>
<script>
export default {
methods: {
triggerJQuery() {
$('#legacy-modal').modal('show');
}
}
}
</script>

7. Динамическое монтирование Vue-компонентов по событию

Полезно, когда нужно рендерить Vue по требованию:

function mountComponent(targetId, props) {
const el = document.createElement('div');
document.getElementById(targetId).appendChild(el);
createApp(MyComponent, props).mount(el);
}
$('.dynamic-trigger').on('click', function () {
mountComponent('container-id', { id: $(this).data('id') });
});

8. Пошаговая миграция с jQuery на Vue

  1. Начать с изоляции и монтирования Vue в отдельные участки DOM.

  2. Перенести часто используемые UI-элементы в Vue (модалки, формы, таблицы).

  3. Выносить бизнес-логику из jQuery в Vue-стор или composables.

  4. Удалять jQuery по мере миграции и заменить обработчики событий.

  5. Использовать Vue Router и Pinia по мере роста проекта.

9. Интеграция в серверные шаблоны

Если проект построен на Django, Laravel, Rails и других серверных рендерерах:

<div id="comment-form" data-post-id="{{ post.id }}"></div>
<script>
const el = document.getElementById('comment-form');
const postId = el.dataset.postId;
createApp(CommentForm, { postId }).mount(el);
</script>

Позволяет внедрить Vue даже в рендеренные с сервера шаблоны без нарушения их работы.

10. Общие советы по совместимости

  • Изолируйте стили Vue-компонентов (scoped).

  • Используйте customEvents или mitt для событий между фреймворками.

  • Используйте defineExpose() и ref() для доступа к методам компонента снаружи.

  • Следите за конфликтами между виртуальным DOM (Vue/React) и прямым управлением DOM (jQuery).