histoire-dev / histoire-dev/histoire
histoire-plugin-nuxt: provide from plugin not working with useNuxtApp in component
- 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
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