storyblok-design-system
storyblok-design-system copied to clipboard
Element is not defined when using with Nuxt 3
When Using the vue3 package with Nuxt3 and creating a plugin like explained in the documentation I get an error.
Expected Behavior
I can implement the storyblok design system within my Nuxt 3 application and use the components.
Current Behavior
After installing the storyblok-design-system @storyblok/design-system and starting the nuxt application I get the following Error:
[nuxt] [request error] [unhandled] [500] Element is not defined
at Module.<anonymous> (./node_modules/@storyblok/design-system/src/components/Popover/index.vue:88:25)
at Module._compile (node:internal/modules/cjs/loader:1241:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
at Module.load (node:internal/modules/cjs/loader:1091:32)
at Module._load (node:internal/modules/cjs/loader:938:12)
at cjsLoader (node:internal/modules/esm/translators:284:17)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
Steps to Reproduce
- Set up a new Nuxt3 Project using
npx nuxi@latest init
- Follow the documentation to install @storyblok/design-system
- Add a design system component to the app.vue and start the project with
yarn dev
Or just clone my repo and do yarn && yarn dev
Note: If I use a client only plugin to register the design-system it works , renaming the storyblok-design-system.js to storyblok-design-system.clien.js