-
Notifications
You must be signed in to change notification settings - Fork 224
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is Vue Design System Nuxt.js compatible? #94
Comments
i've implemented this system into a nuxt app... what isn't working for you? |
It's my colleague taking this on now. I'll send him this link :) |
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 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 |
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 :) |
Thanks @viljamis; much appreciated and hope you had a great holiday! |
@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 |
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! |
@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 |
Now i got the key... in the file After that, the designsystem is also usable with an ssr context |
@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). |
@viljamis i just changed the 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... |
@daspete Hmm, yes, I tried with commonjs2 as well earlier, but couldn’t get that working either since it doesn’t do |
@daspete Anyway, to makes things simpler and to fix all these issues I’m planning on switching away from Webpack for the build process. |
@viljamis oh, the nuxt-design-system repo is a little outdated, since there is [email protected] out now... i haven't checked, if it works with [email protected] i will update the nuxt-design-system repo, so it works straight out of the box. hmm, to which build system will you switch? |
@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 |
@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. |
@daspete If you open browser’s console while viewing your Nuxt.js project, do you see 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 |
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 |
@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? |
@daspete @jackbarham @michaelpumo Ok, I got the whole setup working perfectly with Nuxt now. Releasing a new version soon and a new “official” demo. |
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 |
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.
The text was updated successfully, but these errors were encountered: