Как подключить Vue к HTML-странице?

Подключение Vue к HTML-странице можно осуществить несколькими способами, в зависимости от того, нужен ли тебе минимальный пример на «голом» HTML или полноценный проект с модульной системой, сборщиком и компонентами. Здесь будет подробно разобран первый подход — подключение Vue через CDN, а также базовое объяснение, как он работает в реальной HTML-странице без сборщиков, npm и CLI.

1. Подключение Vue через CDN

Это самый простой способ, не требующий установки каких-либо зависимостей или использования сборщиков типа Webpack или Vite. Подключается всего одна строка <script> из CDN.

Пример: минимальный HTML-файл с Vue 3

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt;Vue Hello&lt;/title&gt;
&lt;script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="app"&gt;
&lt;p&gt;{{ message }}&lt;/p&gt;
&lt;button @click="reverseMessage"&gt;Перевернуть&lt;/button&gt;
&lt;/div&gt;
&lt;script&gt;
const { createApp } = Vue
createApp({
data() {
return {
message: 'Привет, Vue!'
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('')
}
}
}).mount('#app')
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Объяснение:

  • https://unpkg.com/vue@3.4.21/dist/vue.global.js — это ссылка на UMD-бандл Vue 3 с поддержкой глобальных переменных.

  • createApp(...) — создаёт экземпляр приложения.

  • .mount('#app') — указывает, куда именно во вставленном DOM подключить Vue-приложение.

  • Внутри data() — реактивные переменные.

  • {{ message }} — привязка к данным.

  • @click="reverseMessage" — обработчик события.

2. Использование атрибутов и директив Vue

Vue предоставляет удобные атрибуты, которые можно использовать прямо в HTML:

  • v-bind:href="url" или :href="url" — привязка атрибута.

  • v-on:click="action" или @click="action" — привязка событий.

  • v-if, v-else, v-show, v-for — условные конструкции и циклы.

  • v-model="inputValue" — двусторонняя привязка значений форм.

Пример:

&lt;div id="app"&gt;
&lt;input v-model="name" placeholder="Введите имя" /&gt;
&lt;p&gt;Привет, {{ name }}!&lt;/p&gt;
&lt;/div&gt;
&lt;script&gt;
const { createApp } = Vue
createApp({
data() {
return {
name: ''
}
}
}).mount('#app')
&lt;/script&gt;

3. Разделение логики: вынесение скрипта в отдельный файл

Ты можешь вынести createApp в отдельный .js-файл и подключить его в <script src="app.js">. Главное — убедиться, что CDN Vue подключён раньше.

index.html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt;Vue App&lt;/title&gt;
&lt;script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"&gt;&lt;/script&gt;
&lt;script src="app.js" defer&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="app"&gt;
&lt;h1&gt;{{ title }}&lt;/h1&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
#### **app.js**
const { createApp } = Vue
createApp({
data() {
return {
title: 'Приложение Vue подключено!'
}
}
}).mount('#app')

4. Повторное использование компонентов через component

Даже без сборки и CLI ты можешь создать компоненты прямо в JS-коде:

&lt;div id="app"&gt;
&lt;my-message&gt;&lt;/my-message&gt;
&lt;/div&gt;
&lt;script&gt;
const { createApp } = Vue
const MyMessage = {
template: \`&lt;p&gt;Это переиспользуемый компонент!&lt;/p&gt;\`
}
const app = createApp({})
app.component('my-message', MyMessage)
app.mount('#app')
&lt;/script&gt;

5. Версия Vue: ESM, UMD и runtime-only

Когда ты используешь Vue через CDN, обрати внимание на тип файла:

Тип Путь Поддержка шаблонов
UMD (полный) vue.global.js
--- --- ---
Runtime-only vue.runtime.global.js ❌ (только render-функции)
--- --- ---
ESM-модуль vue.esm-browser.js ✅ (для импортов в браузере с <script type="module">)
--- --- ---

Если ты планируешь использовать шаблоны (template), всегда используй полный UMD-бандл — vue.global.js.

6. Возможна и модульная загрузка через <script type="module">

Если ты хочешь использовать ESM без сборщика:

&lt;script type="module"&gt;
import { createApp } from 'https://unpkg.com/vue@3.4.21/dist/vue.esm-browser.js'
createApp({
data() {
return { count: 0 }
}
}).mount('#app')
&lt;/script&gt;

Для этого нужно использовать <script type="module">, а весь HTML должен быть загружен с веб-сервера (иначе возникнет CORS-ошибка).

Ограничения подхода через CDN

  • Нельзя использовать .vue-файлы (Single File Components).

  • Нет TypeScript, автокомпиляции, линтинга, Hot Module Replacement.

  • Нет автоматической сборки и оптимизации (минификация, tree-shaking).

  • Нельзя легко подключать сторонние NPM-библиотеки.

Такой способ хорош для прототипов, экспериментов или встраивания Vue в существующие страницы. Для серьёзных проектов предпочтительнее использовать Vue CLI или Vite.

Подключив Vue таким образом, ты можешь быстро начать работать с реактивными интерфейсами без установки дополнительных инструментов.