Frontend Academy · Lesson

File-based Routing and Auto-imports

Create pages in the pages/ directory for automatic routing, understand dynamic segments, and rely on Nuxt's auto-imports for components and composables.

File-based Routing and Auto-imports is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Nuxt 3 — Vue's SSR Framework

Nuxt 3 is to Vue what Next.js is to React: an opinionated framework for SSR, SSG, file-based routing, data fetching, and a deep auto-import system.

pages/ Directory

Drop Vue components in pages/ and they become routes — no router configuration needed.

pages/
  index.vue        // route: /
  about.vue        // route: /about
  blog/
    index.vue      // route: /blog
    [slug].vue     // route: /blog/:slug
  users/
    [id]/
      profile.vue  // route: /users/:id/profile

Dynamic Routes with [param]

Square brackets in filenames create dynamic segments. Access params with useRoute().

<!-- pages/blog/[slug].vue -->
<script setup>
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.body" />
  </article>
</template>

Catch-all Routes

Use [...slug].vue for catch-all routes — matches any path under that folder.

// pages/docs/[...slug].vue
// matches /docs/getting-started, /docs/api/auth, etc.

<script setup>
const route = useRoute();
console.log(route.params.slug); // ['api', 'auth']
</script>

Layouts

Components in layouts/ wrap pages. Set the active layout per page with definePageMeta.

<!-- layouts/dashboard.vue -->
<template>
  <div class="dashboard">
    <Sidebar />
    <main><slot /></main>
  </div>
</template>

<!-- pages/dashboard/index.vue -->
<script setup>
definePageMeta({ layout: 'dashboard' });
</script>

Default Layout

layouts/default.vue applies to any page without a specified layout.

Navigation with NuxtLink

Use <NuxtLink> for client-side navigation — Nuxt prefetches linked pages on hover.

<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
    <NuxtLink to="/blog">Blog</NuxtLink>
    <NuxtLink :to="`/users/${userId}`">Profile</NuxtLink>
  </nav>
</template>

Programmatic Navigation

Use navigateTo() in setup or event handlers.

<script setup>
async function onLogin() {
  await login(form);
  await navigateTo('/dashboard');
}
</script>

Auto-imports — Components

Drop a component in components/ and use it in any template without importing — Nuxt scans and registers them.

components/
  AppHeader.vue
  UserCard.vue

<!-- any page or component: -->
<template>
  <AppHeader />
  <UserCard :user="user" />
</template>

Auto-imports — Composables

Composables in composables/ are auto-imported.

// composables/useCounter.ts
export const useCounter = () => {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
};

<!-- any component: -->
<script setup>
const { count, increment } = useCounter(); // no import needed!
</script>

Auto-imports — Utilities

Vue utilities (ref, reactive, computed, watch, etc.) and Nuxt utilities (useFetch, useState, navigateTo) are auto-imported.

Disabling Auto-imports

You can disable a specific auto-import in nuxt.config.ts if it conflicts with something else.

export default defineNuxtConfig({
  imports: {
    autoImport: false // disable all auto-imports
  }
});

Quick Check

How do you create a route in Nuxt 3 that matches any path under /docs/?

Recap: Routing & Auto-imports

pages/ folder creates routes. [param] for dynamic, [...slug] for catch-all. Layouts in layouts/ chosen via definePageMeta. NuxtLink + navigateTo for navigation. Auto-imports for components/, composables/, Vue and Nuxt utilities — no manual imports. Disable in nuxt.config.ts if needed.

Frequently asked questions

Is the “File-based Routing and Auto-imports” lesson free?

Yes — the full text of “File-based Routing and Auto-imports” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “File-based Routing and Auto-imports”?

Create pages in the pages/ directory for automatic routing, understand dynamic segments, and rely on Nuxt's auto-imports for components and composables. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “File-based Routing and Auto-imports” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy