I believe the issue may stem from my inability to correctly import the JS file for Vuetify, but I haven't been able to pinpoint any errors. It seems that certain CSS functionalities of Vuetify, like list highlight events, are not working in my application where I am trying to integrate Vue.js and Webpack with Vuetify.
The specific example I am attempting to incorporate is the default navigation drawer.
When I hover over a list item in my setup, there is no background color change or cursor type modification happening.
Here's an excerpt of my code:
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import vuetify_css from 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify)
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
App.vue
<template>
<div id="app">
<v-app>
<navigation></navigation>
<v-toolbar app></v-toolbar>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer app></v-footer>
</v-app>
</div>
</template>
<script>
import Navigation from '@/views/Navigation'
export default {
name: 'app',
components: {Navigation},
}
</script>
<style>
</style>
Navigation.js
<template>
<v-navigation-drawer app permanent light>
<v-toolbar flat>
<v-list>
<v-list-tile>
<v-list-tile-title class="title">
Application
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-toolbar>
<v-divider></v-divider>
<v-list dense class="pt-0">
<v-list-tile v-for="item in items" :key="item.title" >
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
data () {
return {
items: [
{ title: 'Home', },
{ title: 'About', }
]
}
}
}
</script>
<style scoped>
</style>
Interestingly, I can confirm that the entire Vuetify CSS file is being injected correctly as a style tag by Webpack, and I don't believe any custom styles (I have none!) are overriding it.
https://i.stack.imgur.com/iFg0j.png
What could be causing the Vuetify styles to not display properly?
(some unnecessary code has been removed, please let me know if you need more details on my project files / code)