Turn files into routes with the pages directory, render them through app.vue, and nest folders to nest URLs.
Why: every .vue file under app/pages becomes a URL automatically — no router config to write. The file’s path is its address.
app/pages/index.vue -> / app/pages/about.vue -> /about app/pages/blog/index.vue -> /blog app/pages/blog/authors.vue -> /blog/authors
Why: app.vue is the root component. To show whichever page matches the URL, render <NuxtPage />. Wrapping it in <NuxtLayout> also turns on layouts (next lesson). Note: both components are auto-imported — no import line needed.
<!-- app/app.vue -->
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>Why: a page is a normal Vue component. Put reactive data in <script setup> with ref(), and read it in the template with {{ }}. Note: ref() is auto-imported by Nuxt, and .value is added for you inside the template.
<!-- app/pages/counter.vue -> /counter -->
<script setup lang="ts">
const count = ref(0)
</script>
<template>
<button @click="count++">Count: {{ count }}</button>
</template>Why: nest folders to nest URL segments. A folder with an index.vue is the section’s landing page, and other files in it become sub-pages.
app/pages/dashboard/index.vue -> /dashboard app/pages/dashboard/settings.vue -> /dashboard/settings