[Bug]: Vue TypeScript Changes - Nuxt v3.13

[theDeal]

Reproduction

// todo

Describe the bug

Description:

After upgrading to the latest version of Nuxt, developers are experiencing type-related issues when using Shadcn UI components. The types provided by Shadcn UI for Vue/Nuxt seem to be incompatible or not functioning as expected, leading to development warnings and potential runtime errors.

Steps to Reproduce:

Initialize a new Nuxt project or upgrade an existing one to the latest version: bash npx nuxi@latest upgrade --force Install Shadcn UI for Vue/Nuxt: bash npx shadcn-vue@latest init Add a Shadcn UI component (e.g., Button) to a page or component: vue Observe the development environment for type warnings or errors.

Expected Behavior:

No type errors or warnings should appear when using Shadcn UI components. Components should be fully type-safe and integrate seamlessly with Nuxt's latest TypeScript enhancements.

Actual Behavior:

Type errors or warnings are displayed in the console or during build time, indicating that the types from Shadcn UI are not compatible with the current Nuxt TypeScript configuration.

Additional Context: Recent changes in Nuxt and Vue's TypeScript handling might be contributing to this issue, particularly with how global components and custom properties are typed. There might be a need for Shadcn UI to update its type declarations to align with the new recommendations for Vue TypeScript changes.

Workaround:

For developers facing this issue, you might temporarily resolve this by adding a declarations.d.ts file in your project root with:

import type {
  ComponentCustomOptions as _ComponentCustomOptions,
  ComponentCustomProperties as _ComponentCustomProperties,
} from 'vue';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties extends _ComponentCustomProperties {}
  interface ComponentCustomOptions extends _ComponentCustomOptions {}
}

https://nuxt.com/blog/v3-13#vue-typescript-changes

Request:

Please update Shadcn UI's type definitions to be compatible with the latest Nuxt.js version or provide guidance on how to correctly configure TypeScript for projects using both Shadcn UI and the latest Nuxt framework.

Additional Notes:

This issue might require coordination with the Vue/Nuxt community to ensure compatibility with the new TypeScript changes in Vue. Any assistance in creating PRs or further diagnosing the issue would be

System Info

System:
    OS: Linux 6.10 Fedora Linux 40 (Workstation Edition)
    CPU: (16) x64 AMD Ryzen 7 7840U w/ Radeon  780M Graphics
    Memory: 12.29 GB / 30.62 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.8.1 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.4.0 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
  Browsers:
    Brave Browser: 127.1.68.141
    Chrome: 127.0.6533.119
  npmPackages:
    nuxt-nightly:  4.0.0-28744717.22cb8342
    radix-vue: ^1.9.5 => 1.9.5
    shadcn-nuxt: ^0.10.4 => 0.10.4
    vue: latest => 3.4.38

Contributes

• [ ] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests

[KingAdeCode]

Here is an example of the this bug

[hrynevychroman]

@KingAdeCode @theDeal Hello guys, could you please provide a reproduction, everything seems to work fine for me: https://stackblitz.com/edit/shadcn-nuxt-3-13?file=components%2Fui%2Fbutton%2FButton.vue

Also created public repo, link, you can fork it and install locally, no errors are inside my vs code 🤔

https://github.com/user-attachments/assets/4625a7e4-3e30-4556-bfca-0ba3a302b698

[Saeid-Za]

I couldn't reproduce the error on the latest nuxt/vue version. If you still encounter the issue, please provide a minimal reproduction Thanks!

[ansien]

"shadcn-nuxt": "^0.10.4",

Broken with tsConfig exactOptionalPropertyTypes: true