SSR does not add component variables

[asbermudez]

Vuestic-ui version: 1.6.1

Steps to reproduce
Use VaAvatar component with SSR with Nuxt, although it happens with several components.

What is the expected behavior?
Should render the necessary visual variables by default:

What is the current behavior?
It does not render the variables and makes it look broken while it hydrates

Other information
This was not happening in version 1.5.x, for what I can see then we were not using CSS variables for some values (like size) which seems to be the source of the issue as they don't get added until hydration.

[asbermudez]

Want to point out, that this was happening with few components that used the same technique for handling things like colors in version 1.5.x, like the VaButtonDropdown using color "danger".

[m0ksem]

Scope: This is related to Vue's v-bind in CSS. For some reason, some CSS variables are not rendered in Nuxt SSR. In VaButton for example, backgroundColor renders, but not backgroundColorOpacity. We have this issue on docs landing page.

The issue is caused because of Vue CJS build. In cjs build useCSSVars simply do not apply css variables.

Possible solutions:

• Use :style="{}" instead of v-bind.

[m0ksem]

@asbermudez, what nuxt modules do you use?

[asbermudez]

@m0ksem this is the output of nuxi info

Nuxt project info:                                                          09:49:59

------------------------------
- Operating System: `Windows_NT`
- Node Version:     `v18.14.0`
- Nuxt Version:     `3.2.2`
- Nitro Version:    `2.2.2`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `app`, `modules`, `postcss`, `vite`, `typescript`, `runtimeConfig`, `imports`, `umami`, `auth`, `nitro`
- Runtime Modules:  `@sidebase/[email protected]`, `[email protected]`, `@pinia/[email protected]`, `@vuestic/[email protected]`
- Build Modules:    `-`
------------------------------

[m0ksem]

@asbermudez, and the last question. Do you have vite.optimizeDeps.exclude.push('vuestic-ui') somewhere in you project? Maybe in nuxt.config.ts? If so, try to remove it and see if it helps. Because it was the issue for me in our docs.

[asbermudez]

@m0ksem not as far as I can see, even in the autogenerated code is not showing

[m0ksem]

Hey, @asbermudez. Can you try [email protected] version? I made a pretty heavy change here, so maybe something can break. Tested in our docs, but want you to double-check if it solves your issue.

[m0ksem]

And also check this [email protected] version and LMK which feels better. (I assume the last one mustn't work in pure SSR, but somehow it works with Nuxt 🦄)

[asbermudez]

@m0ksem after checking, both seems to still have the issue. Both cases I get this:

VS how it was in 1.5.3:

VS fully loaded (with JS hydration)

[m0ksem]

I can confirm that [email protected] doesn't fix this issue for input.

But I checked [email protected] and it works for me in SSR and SSG builds. Can you double-check if it wasn't used old 1.6.1 version or something is cached.

You can use this command curl localhost:3000 | grep -e "--va-0-background-computed:#\w*;" -o to insure that CSS variable is now present in rendered DOM during SSR.

And .va-input-wrapper must use this CSS variable:

[asbermudez]

Yes, it does return that variable, but the input is not using it, also goes for the sizing variables for the avatar and so:

(this shows when I run the page with javascript disabled, so it just renders what the server returns)

For me the background colors are probably the least of the issues, but the sizing it's pretty bad as the whole UI flickers and it's bad 😅

[m0ksem]

@asbermudez, looks like you still using 1.6.1, not experimental verison I made. --va-input-wrapper-background must be var(--va-0-background-computed), not var(--a310421c). The difference here is that I tweaked the compiler a bit, so it is generating css variables that work in CJS builds and its name is changed to --va-0-vbind-name, instead of vue's --hash. Try to change version, clean .nuxt, .output and node_modules/.vite (if exists).

[asbermudez]

@m0ksem Removed my .nuxt, .output and node_modules folder, I've forced my package.json and package-lock to not have any reference to 1.6.1 and yet it still happens the same.

So not sure what's going on...

Edit: Not sure if it's meaningful, but I am working under Windows. AFAIK it should make no difference, but at this point I don't trust anymore.

[m0ksem]

@asbermudez, npm creates node_modules/@vuestic/nuxt/node_modules/vuestic-ui as sub package which will contain 1.6.1 even if you have node_modules/vuestic-ui experimental. I think it is because npm treats 0.0.0-experimental as not valid version for @vuestic/nuxt. You can manually copy content from node_modules/vuestic-ui to node_modules/@vuestic/nuxt/node_modules/vuestic-ui and I'll stop torturing you :D

[asbermudez]

@m0ksem seems I keep having the same issue.... sorry 😅
I would suggest to move this change forward as it might be something related on how the experimental is being loaded or something, maybe once it's released all works good. Worse-case scenario we can dig around again.
Edit: Just for own sanity, what version of @vuestic/nuxt should I have installed? This might be the issue as I am right now on 1.0.9

[asbermudez]

@m0ksem as update, if I do the same with @vuestic/[email protected] it gets even worse, it just shows everything broken xD

[m0ksem]

My test setup is clean nuxt project with few components inside:

  "devDependencies": {
    "nuxt": "^3.2.2"
  },
  "dependencies": {
    "@vuestic/nuxt": "^1.0.11",
    "vuestic-ui": "0.0.0-experimental-14454314a-20230223"
  }

We will do 1.6.2 this week.

[asbermudez]

@m0ksem Ok, if I build and run nuxi preview colors do work, if I run it in dev mode it doesn't... somehow the nav bar layout it breaks though with @vuestic/[email protected], everything looks good with build with @vuestic/[email protected] and the experimental branch of yours.

Edit: Doesn't seem to load the custom colors in some components with the provided services, but this probably is a minor to be checked

[asbermudez]

@m0ksem for reference, you can see the colors are not the custom ones, but it does load the base ones in the server side response:

Edit I apologize for having to redact so much content... doesn't help with the full picture

[m0ksem]

I have the same issue with Navbar, but if I change colors via nuxt-config

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@vuestic/nuxt'],

  vuestic: {
    config: {
      colors: {
        variables: {
          primary: '#ff0000'
        }
      }
    }
  }
})

colors are applied correctly...

[asbermudez]

@m0ksem unfortunately I cannot depend on fixed build custom colors (as everything in the nuxt-config gets embedded in build time), my application will have to load a different palette based on user settings. This means ideally it needs to be handled by the SSR in runtime, otherwise I will have a first load with wrong colors and the flick to the right ones, which is far from a good UX experience. But as long as for now they load later in runtime (so when the app is hydrated) I can roll with it for now. So probably we can separate that issue in a new issue.

Edit: For context, this is how I load the colors in runtime when the tenant information is loaded in a store. This was working in the SSR in the previous version (1.5.x)

[m0ksem]

As far as I can see Navbar issue is OK, because page need to load css in dev as module (likely need for hot reload). If this works OK in prod, then we will not fix it.

For colors depended on request... Will handle it in a separate issue. Thanks for great conversation over here!