How to include Vuetify in WebStorm project

Question

I'm struggling a lot with how to include Vuetify a default Vue.js project created using WebStorm. It's really to do with how the default Vue.js projects are set up in WebStorm rather than the editor itself as it seems to use an approach different to others I can find. I get errors of "Unknown custom element <v-alert>" (for example). I'm failing to find answers on how to do this because WebStorm's default set-up is different from all the how-tos I can find.

My App.vue file is as follows:

<template>
  <div id="app">
    <img alt="Vue logo" src="../../assets/logo.png">
    <HelloWorld msg="Welcome to your Vue.js app"/>
    <v-alert dismissible>Why does this show as an unknown custom element?</v-alert>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

My main.js file is as follows:

import Vue from 'vue'
import App from './App.vue'
// eslint-disable-next-line no-unused-vars
import Vuetify from "vuetify";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

My package.json file is like so:

{
  "name": "my-vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "deepmerge": "^4.2.2",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "vue": "^2.6.11",
    "vuetify": "^2.2.18"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

I ran npm install vuetify which seemed to proceed correctly and I get no errors when building or serving it. But I don't know how to get my Vue app to import the Vuetify components.

All the documentation I can find talks about either instantiating the Vue app directly, which I'm not doing, or else if it talks about single component .vue files the examples all have module.exports which again, I don't have in the project built by WebStorm.

I've tried adding Vuetify as one of the imports in the script section of the App.vue and I've also tried setting Vuetify and v-alert as components in the components section of the App.vue file but can't get either to work. Thanks for any help.

Why this issue related specific to WebStorm? (code editor). If your code is wrong you get errors also on atom -or- visual code (Or browser console errors - The errors related to Vue implantation & environment & packages not to webstorm). Maybe start from "simple" hello-world example: blog.jetbrains.com/webstorm/2019/03/…. Next try to work with Vuetify CLI - vuetifyjs.com/en/getting-started/quick-start/#vue-cli-install. Its hard to answer your Q (Project scope Q). Always start from "hello-world" examples. — Ezra Siton
It's specific to Webstorm because I can do it in other approaches but not with the default configuration created by Webstorm. I appreciate the links but already found both of them trying to solve this before posting. The second tells me how to import with Nuxt and Webpack but I don't know how to convert it to the build process in Webstorm's default VueJS projects which I'm starting from. The first talks through creating a VueJS app but I've done all that. I can't work out specifically how to add Vuetify to it. I tried adding it as a component in the export default and adding an import above. — JaneDoe
Thanks. But as you yourself said, it's not about the editor. If I built a distributable version and ran that on any old web server I would still have the issue. I think you've misunderstood - Webstorm uses a standard project format when you use its templates. I don't know how to include Vuetify in that format. All of the How Tos I can find use module.exports but the layout I have uses export default. I tag this webstorm because it's webstorm's approach that I am confused by, not the editor itself. I posted code samples - I am hoping someone can tell me how to import Vuetify based on them. — JaneDoe
"Webstorm uses a standard project format when you use its templates. I don't know how to include Vuetify in that format" - it's simply not true. there are no standard project formats in Webstorm. It uses vue cli to generate Vue projects, and resultant project doesn't differ from the one you'd get when running vue create in terminal — lena
vue add doesn't only add a dependency, it adds about a dozen of files, including src\plugins\vuetify.js that imports Vuetify and registers it; your main.js should import this plugin instead of importing Vuetify directly. see my answer — lena

lena lena · Accepted Answer · 2020-03-21T16:35:09

I'm struggling a lot with how to include Vuetify a default Vue.js project created using Webstorm

Just follow the instructions from https://vuetifyjs.com/en/getting-started/quick-start/:

create a new project by either running vue create in terminal or using New > Project > Vue.js in IDE (use the default project setup)
in terminal, run vue add vuetify

My main.js file is as follows:

you didn't register Vuetify (Vue.use(Vuetify); if you don't like to follow the standard way (i.e. use vue add), try the instructions from https://vuetifyjs.com/en/getting-started/quick-start/#webpack-install

How to include Vuetify in WebStorm project

1 Answers