Why the page html is not Loading in nuxt3js

Question

I'm Using Nuxt3 js and when I click nuxt-link java script code is working but the page is not coming till I make refresh this is navbar code:

<template>
  <nuxt-link to="/about">About</nuxt-link>
</template>

this is about page:

<template>
  <div class="pt-8"><h1>About Page</h1></div>
</template>

and this is my default.vue layout:

<template>
  <div lang="ar" dir="rtl">
    <Navbar /> <slot />
    <app-footer />
  </div>
</template>

Answer 1

you have to pu your ```about.vue`` in folder >pages

the first try, u can create Page in folder component and access in your browser..

localhost:3000/{yourPage}

Answer 2

Check your index.vue (EDIT: all files!) in /pages directory. It has to include only ONE root element (components are not considered elements) it means that all your contents have to be wrapped in one element. more info here