NuxtJS Server Side rendering issues

[Hiswe]

Bugs

Follow the template below to ensure the quickest and most accurate response to your issue.

What vue-material-adapter Version are you using?

"@mcwv/button": ^0.15.0

What browser(s) is this bug affecting?

NodeJS! (not a browser and that's the problem)

What OS are you using?

Mac OS Catalina V10.15.6

What are the steps to reproduce the bug?

Hi,

thanks for maintaining this library!

Unfortunately I've been struggling with SSR on Nuxt.js :( I'm not sure if you're familiar with Nuxt or not, so I've written some details inside the Any other information you believe would be useful?

SSR attempt

If I try something like this on the server:

import Vue from 'vue';
import button from '@mcwv/button/index';

Vue.use(button);

On my page.

<mcw-button>a vue-material-adapter button</mcw-button>

I have this error on the rendering:

SyntaxError
Cannot use import statement outside a module 

And I don't know how to deal with this…

CSR attempt

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

module.exports = {
  plugins: [{ src: `~/plugins/material-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>
  <mcw-button>a vue-material-adapter button</mcw-button>
</client-only>

And it's working but “flashing” on first hydration, so it's not a good solution…

The question

I've tried to figured how I could setup this Server Side without succeeding… Do you have any ideas where I can search for that kind of things?

Thanks in advance.

What is the expected behavior?

SSR should be working

What is the actual behavior?

Error while rendering Server Side

Any other information you believe would be useful?

How Nuxt plugins works:

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

[pgbross]

Thank you for the report. I am not familiar with Nuxt though I will take a look, but it may take me a while to get up to speed.