Nuxt•3mo ago

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>

1 Reply

dwol•3mo ago

UPage is a pro component, do you have nuxt ui pro? If not then you won’t be able to use this component.

Gaming

Programming

nuxt3 with nuxtUI Failed to resolve component UPage