N
Nuxt•2w ago
endif

Unable to use NuxtUI types in a layer

If I have a component that uses a NuxtUI type as a type argument to defineProps: Test.vue: 
<template>
  <div>{{ props.label }}</div>
</template>

<script lang="ts" setup>
import type { ButtonProps } from "@nuxt/ui"

const props = defineProps<ButtonProps>()
</script>

<style></style>
<template>
  <div>{{ props.label }}</div>
</template>

<script lang="ts" setup>
import type { ButtonProps } from "@nuxt/ui"

const props = defineProps<ButtonProps>()
</script>

<style></style>
The component works perfectly in the main Nuxt application. If I move the same component to a Nuxt layer, the component still works perfectly when running bun dev in that layer and viewing the .playground. However, trying to use that component in a Nuxt app that extends that nuxt layer, I get the following error: 
 ERROR  Pre-transform error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type                                                             11:02:01 AM

/home/mark/repos/rr/sfnuxtlayer-authn/node_modules/sfnuxtlayer-nuxtui/components/SF/Test.vue
6  |  import type { ButtonProps } from "@nuxt/ui"
7  |  
8  |  const props = defineProps<ButtonProps>()
   |                            ^^^^^^^^^^^
9  |  </script>
10 |  
  Plugin: vite:vue
  File: /home/mark/repos/rr/sfnuxtlayer-authn/node_modules/sfnuxtlayer-nuxtui/components/SF/Test.vue
 ERROR  Pre-transform error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type                                                             11:02:01 AM

/home/mark/repos/rr/sfnuxtlayer-authn/node_modules/sfnuxtlayer-nuxtui/components/SF/Test.vue
6  |  import type { ButtonProps } from "@nuxt/ui"
7  |  
8  |  const props = defineProps<ButtonProps>()
   |                            ^^^^^^^^^^^
9  |  </script>
10 |  
  Plugin: vite:vue
  File: /home/mark/repos/rr/sfnuxtlayer-authn/node_modules/sfnuxtlayer-nuxtui/components/SF/Test.vue
5 Replies
kapa.ai
kapa.ai•2w ago
Hi @endif. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue is related to how type references work when using Nuxt UI components in a Nuxt layer. The error occurs because the Vue compiler can't resolve the ButtonProps type from @nuxt/ui when the component is used in a project that extends your layer. The Problem When you move a component that uses Nuxt UI types to a layer, the type information isn't properly resolved when that layer is extended by another Nuxt application. This is a known issue with how TypeScript resolution works in the context of Nuxt layers. Solution Based on the knowledge sources, there are a few approaches to solve this issue: 1. Run nuxt prepare in your layer As mentioned in the GitHub issue, every layer with a tsconfig.json should have nuxt prepare run there so types are correct as far as Vue is concerned: 
cd your-layer-directory
npx nuxt prepare
cd your-layer-directory
npx nuxt prepare
This is required because @vitejs/plugin-vue needs type information, and it's trying to resolve your tsconfig.json as noted in the GitHub issue. 2. Ensure proper dependency resolution Make sure that @nuxt/ui is properly installed in both your layer and the main project. You might need to add it as a peer dependency in your layer's package.json. 3. Use explicit type imports Instead of importing the type from the package, you could define the type directly in your component or in a separate types file within your layer: 
<script lang="ts" setup>
// Define the type locally instead of importing from @nuxt/ui
type LocalButtonProps = {
  label?: string
  // Add other properties as needed
}

const props = defineProps<LocalButtonProps>()
</script>
<script lang="ts" setup>
// Define the type locally instead of importing from @nuxt/ui
type LocalButtonProps = {
  label?: string
  // Add other properties as needed
}

const props = defineProps<LocalButtonProps>()
</script>
4. Check for version compatibility Ensure that you're using compatible versions of @nuxt/ui and related packages. Some GitHub issues suggest that specific versions might resolve dependency problems: 
"@unhead/vue": "^1.11.20"
"@unhead/vue": "^1.11.20"
Additional Considerations When working with Nuxt layers, be aware of how paths and aliases are resolved. As mentioned in the Nuxt documentation on layers, global aliases like ~/ and @/ are resolved relative to the user's project paths, not the layer. This could also affect how type imports are resolved. If you continue to face issues, you might want to explore the Nuxt Discord server for more specific help, as suggested in one of the GitHub issues. I hope this helps resolve your issue with using Nuxt UI types in a layer! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@691795894940598372> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
endif
endifOP•2w ago
@kapa.ai 1. The layer is built into a package using nuxt build .playground && bun pm pack and then installed into the main Nuxt app as a dev dependency so I do not believe using nuxt prepare is relevant. I ran it any way before building the package and it made no difference. 2. I installed @nuxt/ui in both the layer and the main project and it made no difference. 3. I would prefer not to explicitly redefine the types as it would mean redefining large sections of NuxtUI types in my layer. 4. Installing Using "@unhead/vue": "^1.11.20" caused the error to occur in the layer as well.
kapa.ai
kapa.ai•2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration with this issue. Let me explore some additional approaches based on the knowledge sources. Alternative Solutions to Try 1. Check for Module Resolution in Layers There was a recent fix in Nuxt that addresses module resolution from layer directories. According to this pull request, Nuxt now adds node_modules directories within layers to the resolution tree for dependencies. Make sure you're using the latest version of Nuxt that includes this fix, as it resolves several issues related to module resolution in layers. 2. Investigate TSConfig Configuration The error message suggests a type resolution issue at the Vue compiler level. Your layer's tsconfig.json might need to be configured properly to extend the Nuxt-generated TSConfig: 
{
  "extends": "./.nuxt/tsconfig.json"
}
{
  "extends": "./.nuxt/tsconfig.json"
}
This is a common pattern in Nuxt projects, but when working with layers, there might be issues with how this path is resolved. 3. Try Using Layer Aliases According to the Nuxt documentation on layers, you might need to use layer-specific aliases instead of global ones: 
// Instead of importing directly from @nuxt/ui
// Try using a relative path or a layer-specific alias
import type { ButtonProps } from "../../node_modules/@nuxt/ui/dist/types"
// Instead of importing directly from @nuxt/ui
// Try using a relative path or a layer-specific alias
import type { ButtonProps } from "../../node_modules/@nuxt/ui/dist/types"
4. Examine Build Configuration Since you're building the layer into a package, check if your build process is properly handling type definitions. You might need to: 1. Ensure your package.json includes proper types field 2. Generate and include .d.ts files in your package 3. Configure your build to properly bundle type definitions 5. Multi-Layer Support Approach As mentioned in the Nuxt documentation on multi-layer support, you might need to implement custom handling for your layer: 
export default defineNuxtModule({
  setup(_options, nuxt) {
    for (const layer of nuxt.options._layers) {
      // Custom handling for type resolution
    }
  }
})
export default defineNuxtModule({
  setup(_options, nuxt) {
    for (const layer of nuxt.options._layers) {
      // Custom handling for type resolution
    }
  }
})
This approach might help you implement a more robust solution for type resolution across layers. If none of these solutions work, this might be a deeper issue with how Vue's compiler resolves types in the context of Nuxt layers. In that case, you might need to consider filing an issue in the Nuxt GitHub repository with a minimal reproduction of your specific setup. Would you be able to share more details about your package structure or create a minimal reproduction repository? That might help identify the specific cause of the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@691795894940598372> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?