Vuetify components cannot be found.

[Sjoerd82]

I'm getting errors indicating that the custom Vuetify components cannot be found: Error unknown custom tag v-row

I have been using Vuetify2 in my project for a while, so Vuetify is present. Looking in my package.json, I also see a line referring to vuetify-loader. In case it's relevant:

  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-plugin-pwa": "^4.2.3",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "http-server": "^0.12.1",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.4.3"
  },

Perhaps it has something to do with this note in the "installation guide":

// you should have something like the following somewhere in webpack.config.js or nuxt.config.js, etc.
build: {
  transpile: ['vuetify', /@koumoul/], // necessary for "à la carte" import of vuetify components
}

I don't seem to have neither of the mentioned .js-files. I tried to do the following, but no luck:

module.exports = {
    // added for the VJsF form generator:
    configureWebpack: {
        // It will be merged into the final Webpack config
        build: {
            transpile: ['vuetify',/@koumoul/],
        }
      }
}

But perhaps it's unrelated. I can't figure out how to install this component.

[Sjoerd82]

I found the solution... In vuetify.js, change import Vuetify to:

import Vuetify, {
    VRow,
    VCol,
    VTextField,
    VTooltip,
    VCheckbox,
    VSelect,
    VInput, //
    VMenu, //
} from 'vuetify/lib'

And:

import { Ripple, Intersect, Touch, Resize } from 'vuetify/lib/directives'
Vue.use(Vuetify, { components: { VRow, VTooltip, VCol, VTextField, VCheckbox, VSelect, VInput,VMenu }, directives: {Ripple, Intersect, Touch, Resize}});

Although this works, I don't fully understand the mechanics behind it...