Recently, I developed a new app using Vue and I decided to integrate Vuetify as the framework. After executing the npm install vuetify --save command, Vuetify was added to the app successfully. However, when I tried to use it, the CSS button colors were not displaying properly when running the app.
Below are the contents of the App.vue and main.js files:
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)
})
Could someone please guide me on resolving this issue and ensuring that the CSS button coloring functions correctly in my app?