histoire-dev / histoire-dev/histoire

histoire-plugin-nuxt: provide from plugin not working with useNuxtApp in component

Open
#666 4 comments 5 reactions 0 assignees View on GitHub
to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

When using `provide` from a nuxt plugin, and inserting the provided value into a component using `useNuxtApp`, the provided value will not be available, and an error will be thrown.

### Reproduction

Stackblitz: https://stackblitz.com/edit/nuxt-starter-7avtmp?file=components%2Ftest.vue

In `plugins/example.ts`:

```ts
return {
provide: {
example: { foo: 'bar' },
},
};
```

In `components/test.vue`

```ts
const nuxtApp = useNuxtApp();
const foo = nuxtApp.$example.foo;
```

Then try to start `histoire dev` with a story that includes ``, and an error will be thrown that `nuxtApp.$example` is `undefined`.

### System Info

```shell
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.18.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.14.0 - /usr/local/bin/pnpm
npmPackages:
@histoire/plugin-nuxt: ^0.17.8 => 0.17.8
@histoire/plugin-vue: ^0.17.8 => 0.17.8
histoire: ^0.17.8 => 0.17.8
```

### Used Package Manager

npm

### Validations

- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) 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](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Contributor guide

Open the contributing guide

Research direction

Start with the reproduction in StackBlitz, then inspect plugins/example.ts and components/test.vue. Run histoire dev with a story containing and trace why the value from useNuxtApp is unavailable. Done means the provided example value is available in the component without an error.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.