vuetify-module
vuetify-module copied to clipboard
Dynamic color scheme on SSR mode error
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.
#352 similar to what I tried to do.