Как подключить Vuetify к Nuxt?

Question

[Дмитрий]

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

Comments

[furashcka]

Для Nuxt2 https://v2.vuetifyjs.com/en/getting-started/instal...
Для Nuxt3 https://codybontecou.com/how-to-use-vuetify-with-n...

Answer 1

[Vladimir Medvedev]

В первую очередь проверьте все ли пакеты загружены и vuetify есть в

package.json

Если у вас nuxt 3, то вам нужно его подключить через плагины.
В папке

plugins

создать

vuetify.js

(название можно менять).

import { createVuetify, ThemeDefinition } from "vuetify";
import {
VApp,
} from "vuetify/components";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    locale: {
      fallback: "ru", // локаль если нужны переключения языков
    },
    theme: {
 // тут кастомные темы
    },
    components: {
      VApp, // тут компоненты вьютифая
    },
    ssr: true, // nuxt 3 - ssr
  });

  nuxtApp.vueApp.use(vuetify);
});

так же в

nuxt.cinfig.ts

вам понадобиться добавить стили вьютифая и при билде сам пакет

css: [
    "vuetify/lib/styles/main.sass",
    "@mdi/font/css/materialdesignicons.min.css", // если нужны mdi
  ],

  build: {
    transpile: ["vuetify"],
  },

Если nuxt 2 то пять плагин

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi'
  }
})

Добавляем в конфиг

export default {
  plugins: [
    { src: '~/plugins/vuetify.js' }
  ]
}

также нужно импортировать CSS-файл Vuetify в свой проект, как указано в vuetify.js. Если вы используете Sass или Less, вы можете импортировать их в свой файл стилей вместо CSS-файла.

Answer 2

[Rekryt]

npm i -D vuetify

plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

export default defineNuxtPlugin((nuxtApp) => {
    const cookieTheme = useCookieTheme();

    const vuetify = createVuetify({
        components,
        directives,
        theme: {
            defaultTheme: cookieTheme.value && cookieTheme.value !== 'system' ? cookieTheme.value : 'light',
            themes: {
                light: {
                    dark: false,
                    colors: {
                        primary: '#4caf50',
                        secondary: '#4caf50',
                        background: '#FFFFFF',
                        surface: '#FFFFFF',
                        'primary-darken-1': '#3700B3',
                        'secondary-darken-1': '#018786',
                        error: '#f55a4e',
                        info: '#00d3ee',
                        success: '#5cb860',
                        warning: '#ffa21a',
                    },
                },
            },
        },
    });

    nuxtApp.vueApp.use(vuetify);
});

Готовый пресет: https://github.com/rekryt/nuxt-vuetify-dashboard