Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nuxt built-in and auto imported components typed as unknown #143

Closed
ThomasBerne opened this issue Mar 28, 2024 · 3 comments
Closed

Nuxt built-in and auto imported components typed as unknown #143

ThomasBerne opened this issue Mar 28, 2024 · 3 comments

Comments

@ThomasBerne
Copy link

ThomasBerne commented Mar 28, 2024

Describe the bug

When using VSCode Vue Official extension, nuxt auto imported components are typed as unknown with nuxt-typed-router.

vuejs/language-tools#4170

Expected behavior
Auto imported components shall be well typed.

Screenshots

I use nuxt 3 and Vue Official 2.X+

Built-in and auto imported components are typed as unknown :

image

Even though they are in the .nuxt/components.d.ts

image

Imported by the .nuxt/tsconfig.json

image

.nuxt/tsconfig.json extended by my project tsconfig.json

image

Environnement infos

------------------------------
- Operating System: Linux
- Node Version:     v20.11.0
- Nuxt Version:     3.11.1
- CLI Version:      3.11.1
- Nitro Version:    2.9.4
- Package Manager:  npm@10.5.0
- Builder:          -
- User Config:      app, modules, experimental, tailwindcss, security, css, ssr, eslint, imports, runtimeConfig, plugins, build, vite, devServer, devtools, $test
- Runtime Modules:  nuxt-security@1.2.2, @nuxtjs/eslint-module@4.1.0, @vueuse/nuxt@10.9.0, @nuxtjs/tailwindcss@6.11.4, @nuxt/test-utils/module@3.12.0, nuxt-typed-router@3.6.1, @pinia/nuxt@0.5.1, ()
- Build Modules:    -
------------------------------

Your pages folder structure

pages
├── account
│   └── index.vue
├── index.vue
├── login.vue

Your nuxt.config.ts

nuxt.config.ts modules config :

modules: [
    'nuxt-security',
    '@nuxtjs/eslint-module',
    '@vueuse/nuxt',
    '@nuxtjs/tailwindcss',
    '@nuxt/test-utils/module',
    'nuxt-typed-router',
    ['@pinia/nuxt', { autoImports: ['defineStore'] }],
    (_, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        config.plugins?.push(vuetify());
      });
    },
  ],

  tailwindcss: { viewer: false },

  security: {
    headers: {
      crossOriginEmbedderPolicy: 'unsafe-none',
      contentSecurityPolicy: {
        'img-src': ['*', 'blob: data:'],
        'script-src-attr': false,
      },
    },
  },
@ThomasBerne
Copy link
Author

The problem comes from the TypedNuxtLink GlobalComponents definition. it breaks the GlobalComponents typing.

image

When I remove the declore module 'vue', it works just fine.

@ThomasBerneHCSE
Copy link

I successfully reproduced adding vuetify and nuxt typed router to a clear nuxt install :
https://github.com/ThomasBerneHCSE/issue-4170-repro

I used npm as the default package manager.

@victorgarciaesgi
Copy link
Owner

Sorry to respond only now @ThomasBerne , it looks like a regression because of a Nuxt change, i'll look

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants