Vuetify с NuxtJS — как можно подключить только нужные компоненты?

Question

[bormor]

Нужно подключить только используемые компоненты vuetify.
И не подключать дефолтные css стили vuetify.
Как можно это сделать?

Пробовал решение a-la-carte по официальной документации. Выдает ошибку

Детали:

// plugins/vuetify.js
import Vue from 'vue'
import Vuetify, { VCard, VRating, VToolbar } from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VCard,
    VRating,
    VToolbar,
  },
  directives: {
    Ripple,
  },
})

const opts = {}

export default new Vuetify(opts)

// nuxt.config.js
plugins: ['@/plugins/vuetify.js'],

Сообщение об ошибке

Answer 1

[golentor]

У вас уже неправильный код. См. новую документацию

// src/plugins/vuetify.js

// НАДО ТАК
import Vuetify from 'vuetify/lib/framework'

// НЕВЕРНО
import Vuetify, { VRow } from 'vuetify/lib/framework'

export default new Vuetify()

Ну и компоненты Вы используете динамически. Но если нужен миниммализм, есть такая фишка vuetify minify.css

Ещё я случайно наткнулся на vuesax аналог vuetify. Там так можно

Or use individual components:

import Vue from 'vue'
import { vsButton, vsSelect, vsPopup } from 'vuesax'
import 'vuesax/dist/vuesax.css'

Vue.use(vsButton)
Vue.use(vsSelect)
Vue.use(vsPopup)