NuxtN
Nuxt•10mo ago•
9 replies
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>


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
Was this page helpful?