Search code examples
node.jsvue.jsnpmvuetify.jsvue-cli

Adding Vuetify via Vue CLI leads to "Module not found" error


I'm trying to install Vuetify on top of a fresh Vue project just created via Vue CLI > vue create vuetify. However I end up with this every time when I serve the project to the browser:

enter image description here

Additionally, in the terminal that launched the server, I get:

enter image description here

...suggesting the Vuetify plugin isn't installed, which is precisely what I thought vue add vuetify was supposed to do.

Here's the exact repro steps:

  1. vue create vuetify
  2. "Please pick a preset". Choice: "Default ([Vue 2] babel, eslint)"
  3. (Vue CLI does its thing, creating project)
  4. cd vuetify
  5. npm run serve
  6. (Default Vue project page shows up in browser @ localhost:8080)
  7. vue add vuetify
  8. "WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first. Still proceed? (y/N)"
  9. y (I have no idea what this is about)
  10. "Choose a preset". Choice: "Default (recommended)"
  11. (Vue CLI does its things, installing Vuetify)
  12. Browser/terminal errors...

What am I doing wrong?

(Node.js version: v14.15.5; Vue CLI version: v4.5.13)


Solution

  • Restarting the server should solve the issue: stop the app and then run npm run serve (if you're using npm).

    The problem is that the app was running when executing vue add vuetify so it wasn't restarted automatically after installation.