Is Vue Design System Nuxt.js compatible?

[jackbarham]

Hello.

I'd like to use VDS with a Nuxt.js SSR build, but I can't get it to work. Is this package able work in SSR as there's no documentation regarding it. I'd prefer not spend more time trying to figure it out if it's not compatible in the first place.

Thanks.

[daspete]

i've implemented this system into a nuxt app... what isn't working for you?

[jackbarham]

It's my colleague taking this on now. I'll send him this link :)

[michaelpumo]

Hello @daspete - we also have it working in Nuxt (to some extent) by importing components directly into our Nuxt pages. However, we're a bit in the dark about how to import the system JS as a whole.

In a typical Vue project, we can import the design system via main.js, but Nuxt does not have a main.js. Instead, importing for Vue.use() in Nuxt is typically done via 'plugin' files. Doing this though gives the error that system.js does not export a default.

So whilst we can ignore the plugin route, we're a bit worried about potential issues because of it.

Do you have an example repository for us to see how you integrated design system into Nuxt?

My own repo for Nuxt (minimal test case) is here FYI: https://github.com/michaelpumo/Nuxt-SSR

You can see that in nuxt.config.js, I commented out the plugin for Vue Design System.

[arielsalminen]

Hey folks! Just returned from a 5 week “offline” trip, hence the little delay here. Let me get back to this early next week when I’ve survived the jet lag :)

[michaelpumo]

Thanks @viljamis; much appreciated and hope you had a great holiday!

[daspete]

@michaelpumo hi there, i am on vacation right now, i have to look, if i have a sample repo on my pc @ home.... otherwise, i can init it in 6-7 days... sorry for the delay

[michaelpumo]

Hi @daspete that'd be much appreciated. I just want to sanity check that we're doing things correctly, as there's no guide on using Vue Design System with Nuxt that I can find. Cheers!

[daspete]

@michaelpumo i just created a new repo here: nuxt-design-system

I hope, this helps you out. The only caveat at the moment is, that there can't be SSR when you import the whole system, since some modules reference the window object. I hope, this will be fixed in any update soon

Cheers
PeTe

[daspete]

Now i got the key... in the file /build/webpack.system.conf.js you'll need to change the libraryTarget to 'commonjs2'

After that, the designsystem is also usable with an ssr context

[arielsalminen]

@daspete I’m a little bit confused, how did you get it working? I actually can’t get it working myself either now and tracked the issue down to the fact that we’re currently using webpack to build the library and it doesn’t really support ES module builds (and vue-loader dropped the support for other build a while ago which is now causing this I imagine).

[daspete]

@viljamis i just changed the libaryTarget value into commonjs2 at /build/webpack.system.conf

with commonjs2 you can build a package with module.exports functionality.

and the built package can be imported in nuxt.js as a plugin, which can also be used server side, because, there is no more umd pattern, which includes the window object

of course, you should only change the libraryTarget, when you don't need to include the built package into another system, which depends on the umd pattern... maybe it could be added to a global config object...

[arielsalminen]

@daspete Hmm, yes, I tried with commonjs2 as well earlier, but couldn’t get that working either since it doesn’t do export default. So… how exactly are you importing the system? I tested your example here: https://github.com/daspete/nuxt-design-system, but no luck with that either as even when changing the libraryTarget to commonjs2 you still just get the "export 'default' (imported as 'system') was not found in 'vue-design-system' error (which makes sense as Webpack does not support exporting to ES module currently).

[arielsalminen]

@daspete Anyway, to makes things simpler and to fix all these issues I’m planning on switching away from Webpack for the build process.

[daspete]

@viljamis oh, the nuxt-design-system repo is a little outdated, since there is nuxtjs@2.0 out now... i haven't checked, if it works with nuxtjs@1.4

i will update the nuxt-design-system repo, so it works straight out of the box.

hmm, to which build system will you switch?

[daspete]

@viljamis i have retested and updated the repo nuxt-design-system it works straight along the readme without any hussle, but it really seams that it doesn't work with older versions of nuxt, but with 2.0 everything is fine

[arielsalminen]

@daspete Maybe no need to change it for now! Got the setup now working perfectly with Nuxt. I do still see that warning about missing default export, but that doesn’t seem to affect anything really. Trying to see if there’s an easy way to get rid of it. Will push a tiny release fixing a few things during the next few days hopefully.

[arielsalminen]

@daspete If you open browser’s console while viewing your Nuxt.js project, do you see Uncaught TypeError: Cannot assign to read only property 'exports' of object?

While everything works for me, I think that should be fixed, but I’m having a bit of a hard time right now figuring out how exactly should it be solved + what’s causing it.

I created a new related working branch: #118

Would love to hear if you or anyone else has any ideas on what to do to fix that typeError. It’s related to the fact that Webpack/commonjs2 libraryTargets adds the exports.default, but I’m not sure what would be the optimal way to solve this.

[arielsalminen]

I added a note to FAQ about Nuxt not being supported right now because of the few errors it’s throwing once the system is imported and used: https://github.com/viljamis/vue-design-system/wiki/Frequently-Asked-Questions-(FAQ)#does-vue-design-system-work-with-nuxtjs

[arielsalminen]

@jackbarham @michaelpumo Do you have anything against if if I rename this issue to “Nuxt.js compatibility” as I don’t see the same issues when using a completely custom SSR setup?

[arielsalminen]

@daspete @jackbarham @michaelpumo Ok, I got the whole setup working perfectly with Nuxt now. Releasing a new version soon and a new “official” demo.

[arielsalminen]

Happy to tell you folks that I’ve added Nuxt.js support and that there’s an official demo now with small-ish instructions. See release notes: https://github.com/viljamis/vue-design-system/releases/tag/3.5.2