Как использовать Vuetify с Nuxt 3

Используйте последние версии Vuetify и Nuxt вместе.

Установка

Начните с создания проекта Nuxt 3, если у вас его еще нет.

npx nuxi init nuxt-app

Затем запустите cd nuxt-app и запустите yarn, чтобы убедиться, что ваши зависимости установлены.

Теперь, когда наш проект Nuxt 3 настроен, мы готовы к интеграции Vuetify. Находясь в корневом каталоге приложения nuxt, выполните следующую команду для установки Vuetify 3 и его зависимости, sass.

yarn add vuetify@next sass

Теперь ваш package.json должен выглядеть следующим образом:

// package.json
"devDependencies": {
  "nuxt": "3.0.0-rc.1"
},
"dependencies": {
  "sass": "^1.51.0",
  "vuetify": "^3.0.0-beta.1"
}

Создание нашего плагина Vuetify

У нас установлен Vuetify, теперь нам нужно, чтобы он общался с Nuxt. Мы сделаем это с помощью функции плагинов Nuxt.

Создайте папку plugins, затем создайте файл с именем vuetify.js и поместите его в только что созданную папку plugins.

Затем в файл vuetify.js вставьте следующий код:

// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

Это в основном задокументировано здесь в объяснении Vuetify. Ключевое отличие в том, что мы используем nuxtApp.vueApp.use(vuetify), а не app.use(vuetify).

Настройте Nuxt 3 на использование нашего нового плагина

Наша последняя часть конфигурации происходит в файле nuxt.config.ts. Здесь мы указываем Nuxt, как правильно найти и собрать sass Vuetify.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

Наслаждайтесь Vuetify вместе с Nuxt 3

Теперь все должно работать, как ожидалось, и вы сможете использовать широкий спектр компонентов Vuetify на ваших страницах Nuxt!

Наслаждайтесь!