Установка через CDN

Vuetify — это популярная библиотека компонентов для Vue.js, которая обеспечивает создание красивых и адаптивных интерфейсов с минимальными усилиями. Одним из самых быстрых способов начать использовать Vuetify является подключение через CDN. Этот метод не требует установки через npm и позволяет интегрировать библиотеку прямо в HTML-файл.

Подключение Vue.js

Vuetify строится на основе Vue.js, поэтому первым шагом необходимо подключить сам фреймворк Vue. Для этого используется тег <script> с указанием ссылки на CDN. На момент написания статьи актуальной является версия Vue 3:

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

Важно: Vuetify 3 работает только с Vue 3. Попытка использовать её с Vue 2 приведет к ошибкам совместимости.

Подключение Vuetify через CDN

Для работы с Vuetify через CDN необходимо подключить два основных файла:

  1. CSS библиотека — стили компонентов и темы.
  2. JS библиотека — функциональность компонентов.

Пример подключения:

<!-- Vuetify CSS -->
<link href="https://cdn.jsdelivr.net/npm/vuetify@3.3.8/dist/vuetify.min.css" rel="stylesheet">

<!-- Vuetify JS -->
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.3.8/dist/vuetify.min.js"></script>

Версии библиотек следует выбирать с учётом совместимости с Vue. На данный момент актуальна версия Vuetify 3.3.x.

Инициализация Vuetify

После подключения скриптов необходимо создать экземпляр приложения Vue и интегрировать Vuetify:

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-btn color="primary">Пример кнопки</v-btn>
      </v-container>
    </v-main>
  </v-app>
</div>

<script>
  const { createApp } = Vue;
  const { createVuetify } = Vuetify;

  const vuetify = createVuetify({
    theme: {
      defaultTheme: 'light'
    }
  });

  createApp({}).use(vuetify).mount('#app');
</script>

Ключевые моменты:

  • <v-app> — корневой компонент Vuetify, обязательный для корректного рендеринга всех компонентов.
  • createVuetify() — функция создания экземпляра Vuetify с настройками темы и опций.
  • use(vuetify) — подключение Vuetify к экземпляру Vue.

Использование тем и кастомизация стилей

Vuetify поддерживает светлые и тёмные темы, а также возможность создания кастомных цветовых схем. Через CDN можно определить тему при создании экземпляра:

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'dark',
    themes: {
      dark: {
        colors: {
          primary: '#1E88E5',
          secondary: '#FFCDD2',
          accent: '#FFC107'
        }
      }
    }
  }
});

Эти цвета будут автоматически применяться ко всем компонентам, использующим соответствующие свойства (color="primary" и т. д.).

Подключение дополнительных компонентов и плагинов

Vuetify предоставляет модульную структуру компонентов и плагинов. Через CDN можно подключать полный пакет или отдельные плагины. Например, для использования иконок Material Design достаточно подключить:

<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">

После этого компоненты v-icon будут отображать нужные иконки.

Важные особенности работы через CDN

  1. Быстрый старт — не требует сборки и npm.
  2. Ограниченная кастомизация — изменение исходного кода Vuetify без сборки невозможно.
  3. Подходит для прототипов и небольших проектов — для крупных проектов предпочтительнее использовать npm-установку с Tree Shaking.
  4. Совместимость с Vue — нужно следить за тем, чтобы версии Vue и Vuetify совпадали.

Пример минимального HTML-файла с Vuetify через CDN

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Vuetify через CDN</title>
  <link href="https://cdn.jsdelivr.net/npm/vuetify@3.3.8/dist/vuetify.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-btn color="primary">Нажми меня</v-btn>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@3.3.8/dist/vuetify.min.js"></script>
  <script>
    const { createApp } = Vue;
    const { createVuetify } = Vuetify;

    const vuetify = createVuetify();

    createApp({}).use(vuetify).mount('#app');
  </script>
</body>
</html>

Этот пример демонстрирует базовую интеграцию Vuetify через CDN с использованием кнопки и иконок. Все компоненты сразу работают, без дополнительной сборки и настройки сборщиков модулей.

Оглавление