CODEWITHSUNDEEP
vue-componentwebstormvuetify.js
JaneDoe
JaneDoe

Reputation: 462

How to include Vuetify in WebStorm project

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.

Upvotes: 1

Views: 2685

Answers (1)

lena
lena

Reputation: 93728

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

Upvotes: 2

Related Questions