I made brand new app in vue and I want to add vuetify in the app as a framework. By running npm install vuetify --save this mand it will add in the app but When I want to use it then there is no showing css button color while running the app.

The App.vue and the main.js files are :-

App.vue:-

<template>
  <div id="app">
    <v-btn color="success">Success</v-btn>
    <v-btn color="error">Error</v-btn>
    <v-btn color="warning">Warning</v-btn>
    <v-btn color="info">Info</v-btn>
 </div>
</template>

<script>

  export default {

  }
</script>

Main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);

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

How can I run my app with CSS button coloring?

I made brand new app in vue and I want to add vuetify in the app as a framework. By running npm install vuetify --save this mand it will add in the app but When I want to use it then there is no showing css button color while running the app.

The App.vue and the main.js files are :-

App.vue:-

<template>
  <div id="app">
    <v-btn color="success">Success</v-btn>
    <v-btn color="error">Error</v-btn>
    <v-btn color="warning">Warning</v-btn>
    <v-btn color="info">Info</v-btn>
 </div>
</template>

<script>

  export default {

  }
</script>

Main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);

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

How can I run my app with CSS button coloring?

• javascript
• vue.js
• ponents
• vuetify.js

2 Answers 2

If you are using vue-cli 3 you can just run this mand; vue add vuetify

If you want to add it manually look at the documentation here:

Here you have an example, remember to add css-loader in webpack.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

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

EDIT: You should not change the question like that, think about that next time it will just confuse other people looking for help or trying to help you :)

About your new question, your template is wrong. You are missing <v-app>

<v-app>
 <v-btn color="success">Success</v-btn>
 <v-btn color="error">Error</v-btn>
 <v-btn color="warning">Warning</v-btn>
 <v-btn color="info">Info</v-btn>
<v-app>

Check out the red banner in the documentation here:

With Vue CLI 3, you can simply add it as you add any other package: vue add vuetify.

Now if you run git diff, you will see that everything is done for you behind the scenes:

You can see the modified files by the end of the installation process:

In the past, we were used to do that manually, and it was not always evident. This is a major improvement in Vue CLI 3.