Fresh project fail to compile after installing vuetify in vue.js

Question

i have a problem in vue.js, i have created a new project using webstorm and it runs with no problem at all and i can see vue logo. in next step i want to install vuetify but i get errors as below list:

Failed to compile.

./src/plugins/vuetify.js Module not found: Error: Can't resolve
'vuetify/lib' in 'PATH TO MY PROJECT'

TypeError: Cannot read property 'match' of undefined ERROR TypeError: Cannot read property 'match' of undefined TypeError: Cannot read property 'match' of undefined at VuetifyLoaderPlugin.apply (/home/tina/WebstormProjects/tinalasttry/node_modules/vuetify-loader/lib/plugin.js:28:29) at webpack (/home/tina/WebstormProjects/tinalasttry/node_modules/webpack/lib/webpack.js:51:13) at serve (/home/tina/WebstormProjects/tinalasttry/node_modules/@vue/cli-service/lib/commands/serve.js:161:22) at processTicksAndRejections (internal/process/task_queues.js:93:5)

i have installed vuetify using command add vuetify and also i tried installing it from vue ui. i have installed vuetify before with no problem and i checked for any version changes or updates but they are all same but now cant install in a fresh and new project.

 vuetify.js

    import Vue from 'vue';
    import Vuetify from 'vuetify/lib';

    Vue.use(Vuetify);

    export default new Vuetify({
    });

what `command` yo, vue, npm, yarn, bower, bash ? you are running vue 4.*? how did you setup vue? vue cli, vue ui, webstorm template, webpack? did you follow https://vuetifyjs.com/en/getting-started/quick-start#quick-start? — Estradiaz, Nov 23 '19 at 08:59
What version of Vuetify Loader are you running? Version 1.4.0 was released 6 hours ago, which may just be coincidence or you might have got unlucky... — skirtle, Nov 23 '19 at 09:06
i use npm and i setup vue from webstorm templates for adding vuetify i used add vue add vuetify and i also tried adding vuetify from vue ui but same errors — t.khatibi, Nov 23 '19 at 09:06

score 7 · Accepted Answer · answered Nov 23 '19 at 09:15

7

Edit plugins.js to fix the issue (temporary)

  constructor (options) {
    this.options = (options) ? options : {}
  }

Source: https://github.com/vuetifyjs/vuetify-loader/pull/97#issuecomment-557767269

answered Nov 23 '19 at 09:15

alvaro.canepa

562
3
13

where is plugins.js i got vuetify.js in plugins directory – t.khatibi Nov 23 '19 at 09:23
Its in `node_modules/vuetify-loader/lib/plugin.js`. You need to update this right now, but it was fixed in `vuetify-loader` already. Only need to wait for an update of the package. – Michael Gecht Nov 23 '19 at 09:24
See on error log, in your case, must be in `/home/tina/WebstormProjects/tinalasttry/node_modules/vuetify-loader/lib/plugin.js` – alvaro.canepa Nov 23 '19 at 09:24
Kudos (wish I had more votes) now I'm smarter "npm-wise" I just append an OR Object -- this.options = options ++ this.options = options || {} – Lazaros Kosmidis Nov 23 '19 at 12:45

score 0 · Answer 2 · answered Jan 18 '21 at 17:17

0

the issue because dependency was not found. do following and reload the project will fix the issue

npm install --save vuetify/lib/framework

answered Jan 18 '21 at 17:17

Mohamed Raza

818
7
24

Fresh project fail to compile after installing vuetify in vue.js

2 Answers2

Edit plugins.js to fix the issue (temporary)

Linked