search

arielsalminen / vue-design-system

An open source tool for building UI Design Systems with Vue.js
https://vueds.com
MIT License
2.17k stars 224 forks source link

Nuxt and SSR #92

Closed michaelpumo closed 5 years ago

michaelpumo commented 6 years ago

I've read all I can about integrating Vue Design System into an existing project, but not seeing anything about Nuxt and SSR - not even in the FAQ.

Related to this issue: https://github.com/viljamis/vue-design-system/issues/91

I have started out with a completely fresh clone of the Vue Design System 3 and when importing the default TextStyle component into my (bare bones) Nuxt project, I get this error:

nuxt:render Rendering url / +0ms
{ ReferenceError: window is not defined
    at Object.<anonymous> (/Users/paranoidandroid/Documents/websites/test-design-system/dist/system/system.js:1:277)
    at Module._compile (module.js:649:30)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at r (/Users/paranoidandroid/Documents/websites/Nuxt-SSR/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:3485:18)
    at __webpack_require__ (webpack:/webpack/bootstrap d2c3f5ec4324fdf353ad:25:0)
    at Object.<anonymous> (plugins/vue-design-system.js:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap d2c3f5ec4324fdf353ad:25:0)
    at Object.<anonymous> (.nuxt/index.js:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap d2c3f5ec4324fdf353ad:25:0)
    at Object.<anonymous> (.nuxt/server.js:1:0) statusCode: 500, name: 'ReferenceError' }

Seems like Vue Design System's liberal use of window in the build system.js means that it isn't guarding against use cases for SSR.

Can anyone confirm if the design system can work with Nuxt? Is it simply a bug?

arielsalminen commented 6 years ago

@michaelpumo 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 :)

arielsalminen commented 5 years ago

@michaelpumo Vue Design System does not use “window” anywhere actually and this whole issue is related to something else. I just commented about it in your other issue. Closing this one for now since this should get fixed too once the build process has been rebuild.