N
Nuxtβ€’5mo ago
Stefan

nuxt3 with nuxtUI Failed to resolve component UPage

Hi, I installed a fresh nuxt3 app and added nuxtUI according the instalation guides. in my app.vue, I added this content 
<template>
  <div>
      <UPage>
        <template #left>
          <VerticalMenu />
        </template>

        <template #right>
          <h1>Welcome to your dashboard, {{ user?.name }}</h1>
        </template>
      </UPage>
  </div>
</template>
<template>
  <div>
      <UPage>
        <template #left>
          <VerticalMenu />
        </template>

        <template #right>
          <h1>Welcome to your dashboard, {{ user?.name }}</h1>
        </template>
      </UPage>
  </div>
</template>
and this is my VerticalManu, component file 
<script setup lang="ts">

const links = [{
  label: 'Documentation',
  icon: 'i-heroicons-book-open',
  to: '/getting-started'
}, {
  label: 'Playground',
  icon: 'i-simple-icons-stackblitz',
  to: '/playground'
}]

const pageLinks = [{
  icon: 'i-heroicons-heart',
  label: 'Learn how to contribute',
  to: '/getting-started/contributing',
  target: '_blank'
}]
</script>

<template>
  <UAside :links="links">
    <template #top>
      <UContentSearchButton />
    </template>

    <Placeholder class="h-60" />

    <template #bottom>
      <UDivider type="dashed" class="my-6" />

      <UPageLinks :links="pageLinks" />
    </template>
  </UAside>
</template>

<style scoped>

</style>
<script setup lang="ts">

const links = [{
  label: 'Documentation',
  icon: 'i-heroicons-book-open',
  to: '/getting-started'
}, {
  label: 'Playground',
  icon: 'i-simple-icons-stackblitz',
  to: '/playground'
}]

const pageLinks = [{
  icon: 'i-heroicons-heart',
  label: 'Learn how to contribute',
  to: '/getting-started/contributing',
  target: '_blank'
}]
</script>

<template>
  <UAside :links="links">
    <template #top>
      <UContentSearchButton />
    </template>

    <Placeholder class="h-60" />

    <template #bottom>
      <UDivider type="dashed" class="my-6" />

      <UPageLinks :links="pageLinks" />
    </template>
  </UAside>
</template>

<style scoped>

</style>
The problem is that I get this warnings in the console and I do not know how to get over it. I mention that if I add a <UButton>click me</UButton> in the main <div> of app.vue and delete everything else, I see the button in the browser. Any help will be much appreciated! 😚 
 WARN  [Vue warn]: Failed to resolve component: UPage
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
  at <Anonymous>
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Component <Anonymous> is missing template or render function.
  at <Anonymous>
  at <App>
  at <NuxtRoot>
 WARN  [Vue warn]: Failed to resolve component: UPage
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
  at <Anonymous>
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Component <Anonymous> is missing template or render function.
  at <Anonymous>
  at <App>
  at <NuxtRoot>
2 Replies
dwol
dwolβ€’5mo ago
UPage is a pro component, do you have nuxt ui pro? If not then you won’t be able to use this component.
Psi
Psiβ€’5d ago
what do you mean by do you have nuxt ui pro meaning it's installed on the package.json or you bought the pro? cause i am encountering the error just now installed it locally but doesn't show up, nothing on my nuxt app yet just barebones and installed nuxt/ui-pro ^3.0.0-alpha.12. okay i had a typo now it results to my previous error.

Did you find this page helpful?