Nuxt Basics

Preview — 3 of 10 questions

What is Nuxt.js and what problem does it solve compared to a plain Vue app?

javascript

Plain Vue (Vite):
✅ Reactivity, components, Composition API
❌ SSR requires manual setup
❌ Routing requires Vue Router configuration
❌ No auto-imports
❌ No server-side capabilities
❌ No built-in SEO optimization

Nuxt 3:
✅ All of Vue's capabilities
✅ SSR/SSG/ISR out of the box (powered by Nitro)
✅ File-based routing (pages/ directory)
✅ Auto-imports (components, composables, utils)
✅ Server routes (server/api/ directory)
✅ Built-in SEO with useHead, useSeoMeta
✅ Module ecosystem (auth, image, i18n, etc.)
✅ TypeScript first
✅ Edge-ready deployment

ANuxt is a meta-framework on top of Vue that adds SSR, file-based routing, auto-imports, and a full-stack capability out of the box

BNuxt is a UI component library built on top of Vue

CNuxt is Vue's official state management solution

DNuxt is a testing framework for Vue applications

How does Nuxt 3 handle routing with the pages/ directory?

javascript

pages/
├── index.vue                → /
├── about.vue                → /about
├── users/
│   ├── index.vue            → /users
│   ├── [id].vue             → /users/:id (dynamic)
│   └── [id]/
│       └── settings.vue     → /users/:id/settings
├── blog/
│   └── [...slug].vue        → /blog/** (catch-all)
└── [[optional]].vue         → / (optional param)

AYou must manually configure routes in a router.config.ts file

BFiles in pages/ automatically become routes — the filename and directory structure define the URL path

CRouting in Nuxt requires registering each page in nuxt.config.ts

DThe pages/ directory is for layouts only — routes are configured in routes/

What does Nuxt 3's auto-import feature do?

javascript

<!-- Without Nuxt (plain Vue) — manual imports required -->
<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import MyComponent from '@/components/MyComponent.vue'
</script>

<!-- With Nuxt 3 — auto-imported, no imports needed -->
<script setup>
// ref, computed, watch are auto-imported from Vue
const count = ref(0)
const double = computed(() => count.value * 2)

// useRoute, useRouter auto-imported from Vue Router
const route = useRoute()

// useFetch, useAsyncData, useHead auto-imported from Nuxt
const { data } = await useFetch('/api/users')
useHead({ title: 'My Page' })

// Your own composables from composables/ are auto-imported
const { user } = useUser() // composables/useUser.ts

// Components from components/ are auto-imported
// <MyComponent /> works without importing it
</script>

<template>
  <MyComponent :data="data" />
</template>

AIt automatically installs npm packages when they are used in code

BIt replaces Webpack's module resolution with a faster custom resolver

CIt auto-generates TypeScript types for all imports

DIt automatically makes Vue APIs, composables, and components available without manual import statements

Answer all 10 questions (7 more), see explanations for every answer, and track your score.