[Nuxt] useState crashes histoire - nuxt is undefined

[Rigo-m]

trafficstars

Describe the bug

When using useState, histoire crashes

Reproduction

https://stackblitz.com/edit/nuxt-starter-szzksv?file=package.json,components%2FHello.vue,components%2FHello.story.vue

System Info

Stackblitz

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[Akryum]

We probably need to mock this nuxt object? @danielroe

[Rigo-m]

This is a quick mock for useState that I've internally used in some storybook projects:

import { computed, ref, reactive } from "vue"

const globalState = reactive({})

export const useState = (key, initial) => {
  if (!globalState[key]) {
    globalState[key] = initial()
  }

  const computedState = computed({
    get: () => {
      // force reactivity
      return globalState[key]
    },
    set: (value) => {
      globalState[key] = value
    },
  })

  return computedState
}

Although, the problem is broader, because everything that uses some nuxt runtime (useNuxtApp alike) crashes histoire.

[agritheory]

@Rigo-m I am also having this issue. Could you help me understand how to use the useState mock you provided?

[Rigo-m]

@agritheory you can put this mock useState file somewhere in your project and auto-import it by adding this vite plugin to histoire vite configuration

[alxshell]

Hi @Akryum are there any plans to fix this issue or do you have any instructions for a workaround or something like that? Would be very appreciated. Thx.

[Lyokolux]

Histoire using Nuxt related stuff is also an issue in #300

[Rigo-m]

@danielroe @Akryum is there any thoughts/progress on this?

[Archetipo95]

Any update on this issue/bug?

[LuciaFe]

i also have the same problem. Any update?

[Akryum]

@danielroe is working on stuff to simplify the nuxt integration https://twitter.com/danielcroe/status/1590490011501142017