vuetifyjs / vue-cli-plugins

🔌 A collection of Vuetify plugins for Vue CLI
https://vuetifyjs.com/en/getting-started/quick-start#vue-cli-3
Other
427 stars 113 forks source link

Preset not changing page #197

Closed pacific202 closed 3 years ago

pacific202 commented 4 years ago

I installed the reply preset using vue add vuetify-preset-preset and restarted the server.

My vuetify.js looks like this:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { preset } from 'vue-cli-plugin-vuetify-preset-reply/preset'

main.js:

import Vue from 'vue' import App from './App.vue' import store from './store' import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({ store, vuetify, render: h => h(App) }).$mount('#app')

Vue.use(Vuetify)

export default new Vuetify({
  preset,
  theme: { dark: true }
})

App.vue (copied from standard vuetify Dark layout):

<template lang='pug'>
  v-app#inspire
    v-navigation-drawer(v-model='drawer' app='' clipped='')
      v-list(dense='')
        v-list-item(link='')
          v-list-item-action
            v-icon mdi-view-dashboard
          v-list-item-content
            v-list-item-title Dashboard
        v-list-item(link='')
          v-list-item-action
            v-icon mdi-cog
          v-list-item-content
            v-list-item-title Settings
    v-app-bar(app='' clipped-left='')
      v-app-bar-nav-icon(@click.stop='drawer = !drawer')
      v-toolbar-title {{application.name}}
    v-main
      v-container.fill-height(fluid='')
        v-row(align='center' justify='center')
          v-col.shrink
            v-tooltip(right='')
              template(v-slot:activator='{ on }')
                v-btn(:href='source' icon='' large='' target='_blank' v-on='on')
                  v-icon(large='') mdi-code-tags
              span Source
    v-footer(app='')
      span &copy; {{ new Date().getFullYear() }}
</template>

<script>
  export default {
    props: {
      source: String,
    },

    data: () => ({
      drawer: null,
      application: { name: 'Test Preset' }
    }),

    created () {
      // this.$vuetify.theme.dark = true
    }
  }
</script>

This is what the page looks like:

image