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