vuetify-module icon indicating copy to clipboard operation
vuetify-module copied to clipboard

Dynamic color scheme on SSR mode error

Open jariesdev opened this issue 4 years ago • 1 comments

Module version ├─┬ @nuxtjs/[email protected] │ ├── [email protected] │ └─┬ [email protected]

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.

jariesdev avatar Jul 21 '20 13:07 jariesdev

#352 similar to what I tried to do.

tincho425 avatar Sep 10 '20 03:09 tincho425