nuxt-community / vuetify-module

Vuetify Module for Nuxt 2
Other
630 stars 106 forks source link

Dynamic color scheme on SSR mode error #362

Open jariesdev opened 3 years ago

jariesdev commented 3 years ago

Module version ├─┬ @nuxtjs/vuetify@1.11.2 │ ├── vuetify@2.2.29 │ └─┬ vuetify-loader@1.4.3

Describe the bug I have customizable theme colors such as primary and secondary color, such color can be change by users and save to database as application color scheme. When nuxt is started I fetch the theme color using the [nuxtServerInit](https://nuxtjs.org/guide/vuex-store/#the-nuxtserverinit-action) store action but I got document is not defined I understand that document is not available yet from server but how can i set the color scheme dynamically from server side and not on client side. Why? The site is render in default color then upon browser JS kicks-in the color will eventually change to custom color (the #F00 above) the problem here is user of your website sees color changing effect. Its annoying especially if the user's custom color are pretty far contrast from the vuetify default.

To Reproduce

Steps to reproduce the behavior:

//nuxt.config.js
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
//...
    { src: '~/plugins/vuetify.js', mode: 'server' },
 //...
  ],
//plugins/vutify.js
export default ({ $vuetify }) => {
  $vuetify.theme.dark = false
  $vuetify.theme.themes.light.primary = '#F00'
}

Expected behavior Dynamic color scheme should be rendered on the server side. Why? The site is render in default color then upon browser JS kicks-in the color will eventually change to custom color (the #F00 above) the problem here is user of your website sees color changing effect.

tincho425 commented 3 years ago

352 similar to what I tried to do.