Vuetify theme not applied, when not using npm or webpack

2
votes

I try to build a Vue and Vuetify solution (also using httpVueLoader) to get a solution with Vue but without using npm or anything alike (just old school inclusion of javascript files). I used the simple login form layout to test setting them colors, but this failed.

Login.html file:

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="login">
    <login></login>     
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="lib/httpVueLoader.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>  
  <script src="src/login.js"></script>  
</body>
</html>

Login.js file

Vue.use(Vuetify, {
  theme: {
    primary: "#4CAF50",
    secondary: "#2E7D32",
    accent: "#FF4081",
    error: "#f44336",
    warning: "#FFA726",
    info: "#2196f3",
    success: "#4caf50"
  }
})

new Vue({    
  el: '#login',
  components: {
      'login': httpVueLoader('src/Login.vue')
  }
})

Login.vue file

<template>
  <v-app>
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4>
            <v-card class="elevation-5">
              <v-toolbar color="primary">
                <v-toolbar-title>Member login</v-toolbar-title>
                <v-spacer></v-spacer>                
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field prepend-icon="person" name="email" label="email" type="text"></v-text-field>
                  <v-text-field id="password" prepend-icon="lock" name="password" label="Password" type="password"></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary">Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
module.exports = {
  name: 'login',
  data: function() {
    return {      
    }
  }
}
</script>

<style lang="css">
</style>

This displays correct page, but, colors are not adjusted (primary color is green in my theme). Does anybody have any idea what I'm doing wrong here?

enter image description here

4
vue.jsvuejs2vuetify.js

4 Answers

2
votes

You're using the minified distribution version of Vuetify's css, passing in custom theme values will have no effect. You need to use the stylus versions and build the css file yourself.

The guide for modifying stylus variables use webpack, so you'll need to follow that or find another way to compile your theme into a css file.

See Modifying Stylus Variables

2
votes

Like you, I ran into this while not using npm or webpack. I was able to get the theme overrides to work by setting them in a function in the mounted property of my main Vue component, like so:

    var app = new Vue({
        el: '#app',
        watch: {},
        mounted: function() {
            this.$vuetify.theme.primary = '#1b5632';
            this.$vuetify.theme.secondary = '#6AAB84';
        },
        data: {
            domain: 'Sample',
            title: 'Login',
            username: ''
        },
        methods: {},
        router
    })
0
votes

I had the same issue. Noticed I should edit the place which I use Vue.use(Vuetify)

If I add anything after this one it is not affected. But replacing the plain Vue.use(Vuetify) by the one with parameters will fix it.

Same story with RTL

works

Vue.use(Vuetify, {
  rtl: true
})

Does NOT work

Vue.use(Vuetify)

Vue.use(Vuetify, {
  rtl: true
})
0
votes

Themeing Vuetify, this works for me with light & dark mode on: \plugins\vuetify.js add this


    export default new Vuetify({
      icons: {
        iconfont: 'mdi',
      },
      theme: {
        themes: {
          light: {
            primary: "#ffcc50",
            error: "#ff8888",
            success: "#45a5ae",

            secondary: '#b0bec5',
            accent: '#8c9eff',
          },
          dark: {
            primary: "#ffcc50",
            error: "#ff8888",
            success: "#45a5ae",

            secondary: '#b0bec5',
            accent: '#8c9eff',

          },
        },
      },

    });