Docs are wrong for Typescript projects

[lud-hu]

Describe the bug

For TS + nuxt projects, I cannot just do what the docs say about adding the env.d.ts into the tsconfig. It will just overwrite the nuxt config and therefore vanish out all auto imports etc. If I copy over the generated tsconfig from the .nuxt directory it's working, but this is more like a workaround.

Reproduction

https://github.com/lud-hu/nuxt-histoire-reproduction/blob/main/tsconfig.json

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 68.38 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - /opt/homebrew/opt/node@18/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - /opt/homebrew/opt/node@18/bin/npm
    pnpm: 8.15.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.139
    Edge: 121.0.2277.98
    Safari: 17.0
  npmPackages:
    @histoire/plugin-nuxt: ^0.17.9 => 0.17.9 
    @histoire/plugin-vue: ^0.17.9 => 0.17.9 
    histoire: ^0.17.9 => 0.17.9

Used Package Manager

yarn

Validations

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

[letoast]

• Add the env.d.ts as in docs:

// env.d.ts
/// <reference types="./node_modules/@histoire/plugin-vue/components.d.ts" /> <--- add .d.ts in the end

export {}

• Add this hook to your nuxt config

// nuxt.config.ts
export default defineNuxtConfig({
	hooks: {
		'prepare:types': ({
			tsConfig,
		}) => {
			tsConfig?.include?.push('../env.d.ts')
		},
	},
})

[YaredFall]

Just added .d.ts at the end of types reference path in env.d.ts and its worked!

/// <reference types="./node_modules/@histoire/plugin-vue/components.d.ts" />

[letoast]

Just added .d.ts at the end of types reference path in env.d.ts and its worked!

/// <reference types="./node_modules/@histoire/plugin-vue/components.d.ts" />

You get global components typed or do you have to import them? Because what I wrote in my reply just does what the docs say should be done, it doesn't solve the problem for me, the components are still undefined. In order for it to work @Histoire would need to add to here: https://github.com/histoire-dev/histoire/blob/main/packages/histoire-plugin-vue/components.d.ts#L217

module '@vue/runtime-core' {
  export interface GlobalComponents {
    ...whichever components need to be autoimported...
  }
}

module '@vue/runtime-dom' {
   export interface GlobalComponents {
    ...whichever components need to be autoimported...
  }
}

If I modify components.d.ts in node_modules then it actually works. But this shouldn't be modified in node_modules, it should be fixed by the package authors.

To add: I'm also using Nuxt, like the OP is

EDIT: Works #669 (comment)

[YaredFall]

@letoast Yes, I get global types for histoire components without the need to import them.
I am using Nuxt too.

I have created a repo with fresh nuxt and histoire setup. Histoire components globally available and have proper types (at least for me).

[letoast]

@YaredFall looks like there was something in my project (it's a pretty big project with lots of layers). I had to remove node_modules/, .nuxt/ folder and yarn.lock file and reinstall everything again. Now it works. Thanks for the repo, it made me look for the issue again :D