Balm UI and Nuxt Server Side Rendering

[Hiswe]

Hi,

thanks for the amazing work you have been pulling out! It seems so complete!

Unfortunately I've been struggling with SSR on Nuxt.js :(

I'm not sure if you're familiar with Nuxt or not. If not here is a quick explaination:

Nuxt plugins

To include an external library we use what they call plugins A plugin can be invoked:

• on both server & client (default)
• or server only
• or client only

SSR attempt

If I try something like this on the server:

import Vue from 'vue';
import UiButton from 'balm-ui/components/button';

Vue.use(UiButton);

On my page.

<ui-button>a balm ui button</ui-button>

I have this error on the rendering:

ReferenceError
window is not defined

Which is logical beacause NodeJS has no window object…

CSR attempt

The same plugin code will be used. But in my config I toggle the client only mode

module.exports = {
  plugins: [{ src: `~/plugins/balm-ui-components.js`, mode: `client` }],
};

But by doing this I have some errors on the browser:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Which is expected.

The Nuxt way to prevent this is to wrap the component inside a client only

<client-only>
  <ui-button>a balm ui button</ui-button>
</client-only>

And it's working but “flashing” on first hydration.

The question

I've tried to figured how I could setup this Server Side without the window is not defined… …but I din't succeeded.

Do you have any ideas where I can search for that kind of things?

Thanks in advance.

[elf-mouse]

@Hiswe , Thanks for your question!

It's my fault. I will check and fix this bug as soon as possible.

[elf-mouse]

Hi, @Hiswe , Thank you again.

Now, i have fixed this bug and tested it thoroughly. You can reinstall balm-ui@next(8.0.0-canary.14) and start enjoying :)

// `plugins/balm-ui.js`
import Vue from 'vue';
import BalmUI from 'balm-ui';
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus';
import 'balm-ui/dist/balm-ui.css';

Vue.use(BalmUI);
Vue.use(BalmUIPlus);

// `nuxt.config.js`
export default {
  //...
  plugins: ['@/plugins/balm-ui'],
  build: {
    extend(config) {
      config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js'; // NOTE: `$alert`, `$confirm` and `$toast` required
    }
  }
}

[Hiswe]

Hi @elf-mouse,

Thanks a lot! And thanks for the quick answer. I'll test this as soon as possible :)

And if I can, I might come-up with a PR to document the Nuxt usage (hopefully)

Thanks again.

[elf-mouse]

Sure @Hiswe, welcome to PR! Thanks~