Vuesax: Setting theme doesn't work with SSR

[Blaconix]

Hello, I just installed a clean nuxt.js project using yarn create nuxt-app, then added vuesax through yarn add vuesax.

Then, to integrate vuesax with nuxt.js I created a plugin, plugins/vuesax.js, with the following code:

import Vue from 'vue'
import Vuesax from 'vuesax'

import 'vuesax/dist/vuesax.css' //vuesax styles
Vue.use(Vuesax, {
    theme: {
        colors: {
            primary:'#5b3cc4'
          }
    }
})

Looks like setting a theme color doesn't work in SSR because it throws the famous document is not defined error in vuesax.common.js at the following function:

setCssVariable: function setCssVariable(propertyName, value) {
  document.documentElement.style.setProperty(propertyName, value);
}

So, setting the theme requires document, but document is not defined in SSR.
Otherwise, when not providing the theme in Vue.use, vuesax loads normally.

Using node v10 and npm v6 with vuesax 3.0.29 and nuxt-edge

[luisDanielRoviraContreras]

Thank you very much for using vuesax you could pass me a repository of the problem to fix it

[Blaconix]

Alright, here it is:
https://github.com/Blaconix/nuxt-vuesax

[luisDanielRoviraContreras]

The problem is already fixed, thank you very much for the contribution in the latest version in cases of SSR, you can use it in this way with the server:true

  Vue.use(Vuesax, {
    server:true,
    theme:{
      colors:{
        primary:'#5b3cc4',
        success:'rgb(23, 201, 100)',
        danger:'rgb(242, 19, 93)',
        warning:'rgb(255, 130, 0)',
        dark:'rgb(36, 33, 69)'
      }
    }
  })

[Blaconix]

Oh, didn't know. Thanks!

[luisDanielRoviraContreras]

@Blaconix I solved it by your issues thank you very much

[Blaconix]

Still throws the same error.

  setCssVariable: function setCssVariable(propertyName, value, isServer) {
    if (!isServer) {
      document.documentElement.style.setProperty(propertyName, value); 
    } else if (!process.server) {
      document.documentElement.style.setProperty(propertyName, value); // throws error here
    }
  },

I upgraded to vuesax 3.0.39 then ran yarn dev, but when I access the page it throws the same document is not defined error. Also, one thing that I've noticed is that it doesn't auto reload correctly after making a change, so I suggest restarting the server manually.

[luisDanielRoviraContreras]

you added the property server:true?

[luisDanielRoviraContreras]

The solution that I found is this I hope I will help you thanks for the contribution

if (process.browser) {
Vue.use(Vuesax, {
    theme: {
        colors: {
            primary:'#5b3cc4',
            success:'rgb(23, 201, 100)',
            danger:'rgb(242, 19, 93)',
            warning:'rgb(255, 130, 0)',
            dark:'rgb(36, 33, 69)'
          }
    }
})
}

[Blaconix]

It does work, but it defeats the SSR's purpose, making every component different on client than on server.
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.

Looks like the fix should be to use different type of variables witch not depend on document. Or load the variables in other way.

[luisDanielRoviraContreras]

Well, I'm going to start working on this because it seems to me to be very important when it works as the notice should so I can review it thank you very much

[andresilva-cc]

I'm having the same problem and this project needs to be finished soon 😢
How's the progress @luisDanielRoviraContreras ?

[andresilva-cc]

I could temporarily solve this by changing the theme not in the plugin, but in my layout mounted() trigger.
I've used this code: https://lusaxweb.github.io/vuesax/theme/#change-colors

[luisDanielRoviraContreras]

it is very good idea to put the functionality after load all i'll see if I can add it to change main topic thank you for input

[QuentinPotgieter]

Hi, Thank you @luisDanielRoviraContreras for developing such a beautiful package - vuesax. Thank you @Blaconix for the thread, I am having the same issue, using the same stack.

@luisDanielRoviraContreras, kindly make this a top priority to resolve. There seems to be a lot of small issues using vuesax with nuxt, something like vuetify already sorted this out and I hope you will too. You have a great product and I don't want to lose faith in vuesax in long run. Nuxt/SSR compatibility is most important to me when using vuejs.

[luisDanielRoviraContreras]

Thank you very much I will take this as the next problem to solve, you have the whole reason really it is necessary to support SSR if you can help me it would be great thanks

[cocodrino]

guys finally how must I setup the code with nuxt in a SSR app??? would be possible add that info in the readme??? many vue guys are using nuxt right now and I think would be useful...thank you

[luisDanielRoviraContreras]

If we are already going to add that information in the official documents, we are working on it for the best functionality and explanation, thank you very much

[luisDanielRoviraContreras]

Methodology changed by changing colors in SSR https://lusaxweb.github.io/vuesax/theme/#change-colors-ssr

[Rsalyme]

guys finally how must I setup the code with nuxt in a SSR app??? would be possible add that info in the readme??? many vue guys are using nuxt right now and I think would be useful...thank you
@cocodrino did you ever get an answer to this?

[kacperTheCat]

Hello guys!

Still have problems with colors in vuesax with nuxt. Could you help me? I prepare plugin with theme, but it still doesnt works, app is blind to my customizations of colors. I don't want to use stylus, I would like keep it in nuxt config.

I'm using
"nuxt": "^2.14.6", "vuesax": "^4.0.1-alpha.25"