Используйте вместе последние версии 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 plugin (opens new window).

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

Затем в файле 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, как правильно находить и создавать дерзость 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!

Наслаждаться!

Первоначально опубликовано на https://codybontecou.com.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.