Vuetify with NuxtJS - how can I include only the necessary components?

Question

JavaScript

You only need to include the vuetify components you use.
And do not include the default css styles of vuetify.
How can this be done?

Tried the a-la-carte solution from the official documentation . Gives an error

Details:

// 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'],

Error message

Answer 1

You already have the wrong code. See new documentation

// src/plugins/vuetify.js

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

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

export default new Vuetify()

Well, you use the components dynamically. But if minimalism is needed, there is such a feature vuetify minify.css
I also accidentally stumbled upon vuesax, an analogue of vuetify. It's possible there

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)