Как внедрить 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
-
Начать с изоляции и монтирования Vue в отдельные участки DOM.
-
Перенести часто используемые UI-элементы в Vue (модалки, формы, таблицы).
-
Выносить бизнес-логику из jQuery в Vue-стор или composables.
-
Удалять jQuery по мере миграции и заменить обработчики событий.
-
Использовать 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).