'Nuxt3 not importing component

I follow the basic tutorial in order to start a nuxt3 project:

cd /myfolder
yarn init -y
yarn add --dev nuxt3
yarn nuxi create nuxt3-app
cd nuxt3-app
yarn install
yarn dev -o

Then I delete app.vue.

I create the directories:

mkdir components pages layouts

And the files:

touch components/Header.vue
touch pages/index.vue
touch layouts/default.vue

// components/Header.vue
<template>
  <div>
    HEADER
  </div>
</template>

// pages/index.vue
<template>
  <div>
    INDEX
  </div>
</template>

// layouts/default.vue
<template>
  <div>
    <Header />
    <slot />
  </div>
</template>

However the Header component is not included. If I connect to http://localhost:3000 I see only the word INDEX.

What am I getting wrong?

I've followed the tutorial on the official documentation:

https://v3.nuxtjs.org/getting-started/installation

https://v3.nuxtjs.org/docs/directory-structure/components/

Nuxt project info:                                                                                                                                                                                       

------------------------------
- Operating System: `Linux`
- Node Version:     `v16.13.1`
- Nuxt Version:     `3.0.0-27459267.f69126e`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------
vue.jscomponentsnuxt.jsvuejs3nuxt3


Solution 1:[1]

Here is the solution:

https://github.com/nuxt/framework/issues/3770

Run:

npm up c12

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ndr4

Related Questions