Not all CSS functioning in Vuetify with Vue.js and Webpack

Question

I suspect this has something to do with me failing to pull the JS file for vuetify in properly, but I've not managed to drill down to any error anything. It appears that some CSS features of Vuetify such as list highlight events are not functioning in my app, in which I'm attempting to use Vuetify with Vue.js and Webpack.

The example I'm trying to implement is the default navigation drawer.

In my implementation, hovering over a list item does not trigger a background color change or a cursor type change.

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>

What's weird is I can see that the entire Vuetify css file is being injected properly as a style tag by webpack, and I don't think I'm overwriting with any custom styles (in that I have none!)

What am I missing to properly get Vuetify styles working?

(some extraneous code stripped, let me know if you need to see more of my project files / code)

stdob-- stdob-- · Accepted Answer · 2017-12-09T04:31:01

The problem is that you did not add a handler for any mouse event. Try to just add an empty:

<v-list dense class="pt-0">
  <v-list-tile v-for="item in items" :key="item.title" @click="">
    <v-list-tile-content>
      <v-list-tile-title>{{ item.title }}</v-list-tile-title>
    </v-list-tile-content>
  </v-list-tile>
</v-list>

Not all CSS functioning in Vuetify with Vue.js and Webpack

1 Answers