Nuxt 3 and Vue 3 support

[jhpmatos]

I've been trying to use storyblok design system on Nuxt 3 app, as a plugin and also tested with a 'native' Vue3 app, by following readme steps. Both approaches failed.

Expected Behavior

The Nuxt3 application should load storyblok-design-system components.

Current Behavior

I'm getting the following issue:

Internal server error: Failed to resolve entry for package "@storyblok/design-system". The package may have incorrect main/module/exports specified in its package.json.

Steps to Reproduce

1. Create a Nuxt3 app
2. Add a storyblok-design-system plugin into plugins folder with the code provided in readme file
3. Run the app

[ctmm]

Experiencing the same issue with version 3.8.0.

Installed with npm.
There's no dist folder on the package, even though it's listed as the entry point on package.json:

{
  "main": "dist/storyblok-design-system.js",
  "module": "dist/storyblok-design-system.mjs",
 }

[ctmm]

Version 3.7.0 seems to be published with all needed assets.

Workaround for now:

npm installi @storyblok/design-system@3.7.0

To configure it as plugin, create storyblok-design-system.client.js under /plugins.

import BlokInk from '@storyblok/design-system'
import '@storyblok/design-system/dist/storyblok-design-system.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(BlokInk)
})

[lisilinhart]

Hi, sorry we've had an issue with the dist folder being missing, it should work in 3.9.0 again

[ctmm]

@lisilinhart, 3.9.0 is also not working.

Getting this error in the console.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')
    at F (runtime-core.esm-bundler.js:3002:34)
    at Proxy.V2 (SbButton.vue:12:7)
    at renderComponentRoot (chunk-RGX4DJ7G.js:2474:39)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-RGX4DJ7G.js:6423:46)
    at ReactiveEffect.run (chunk-RGX4DJ7G.js:707:19)
    at instance.update (chunk-RGX4DJ7G.js:6522:52)
    at setupRenderEffect (chunk-RGX4DJ7G.js:6530:5)
    at mountComponent (chunk-RGX4DJ7G.js:6348:5)
    at processComponent (chunk-RGX4DJ7G.js:6313:9)
    at patch (chunk-RGX4DJ7G.js:6002:11)

[lisilinhart]

Thanks @ctmm, I made some more tests with nuxt 3 now and see the problem. I think it's caused by different Vue dependencies, I'll see if I can move to be a devDependency or change the build settings in vite. It's related to this issue: vuejs/core#4344

[lisilinhart]

I'm still trying to solve this issue, I noticed that it only happens for components that are using slots like SbButton, but not for others which arent using slots, like SbIcon. It seems to be between building with vite and vue3

[ctmm]

@lisilinhart
In case it's helpful for testing, we just made our app starter open source.
https://github.com/virtualidentityag/storyblok-app-starter

[lisilinhart]

Hi @ctmm, I made a patch 3.9.1 which I tested with a scaffolded Nuxt, Vue 3 and your project and worked for me. The only catch for me was that I couldn't install the dependencies with yarn, it had to be npm, whenever I install it with yarn I get the same problem, so I'm continuing to explore how this dependency resolution on the package managers can be solved.

Here are the steps for your project:

npm install @storyblok/design-system@3.9.1 --save

I managed to get your project running in storyblok, nice work :)

[ctmm]

@lisilinhart , just confirmed that it's working.
From my perspective, this issue is addressed.

Thank you!

[lisilinhart]

Thanks @ctmm, the starter is great, I forwarded it to our extensions team, it's on our roadmap to update the starter repo we provide and I'm looking to see if there is a place where we can link and highlight to your starter