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-- · Accepted Answer · 2017-12-09 04:31:01Z

4

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>

answered Dec 9, 2017 at 4:31

stdob--

29.2k6 gold badges62 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Caleb Jay Over a year ago

Yup, that fixed it. Out of curiosity, how come?

stdob-- Over a year ago

@komali_2 What you mean "how come"? ))

Caleb Jay Over a year ago

Haha well looking at the source, I can't figure out why the CSS responses were dependent upon the existence of @click. I'm fairly new to Vue, been working in backbone for ages.

gotson Over a year ago

now you can also use link prop instead of an empty @click

Rakibul Haq Over a year ago

it is weird and not properly documented, wasted 1 hour on this.. :(

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related