What Nuxt is
Nuxt is a framework built on top of Vue 3. Vue handles components and reactivity, and Nuxt adds what a whole site needs: pages from files, rendering on the server, data fetching and its own server for an API. The course targets Nuxt 4, the current major version. Almost everything also applies to Nuxt 3; where the versions differ, the lesson says so.
What Nuxt adds to Vue
| Task | In Vue | In Nuxt |
|---|---|---|
| Routes | Add Vue Router and describe an array of routes | A file in app/pages/ becomes a page by itself |
| Imports | Import every component and ref | Components, composables and Vue functions are imported for you |
| Rendering | The page is built in the browser | The page is built on the server and arrives as ready HTML |
| Data | fetch inside onMounted | useFetch, data arrives together with the HTML |
| API | A separate backend | The server/ folder in the same project |
| SEO | By hand | useHead and useSeoMeta |
Server-side rendering
A plain Vue app sends the browser an empty page and a script that builds the interface. Nuxt works differently by default: the server runs the components, builds HTML with the text and sends it to the browser. Then the JavaScript loads and the page comes alive: buttons and forms start working. This step is called hydration.
Users see the content sooner, and search engines receive real text instead of an empty block.
What a page looks like
<!-- app/pages/index.vue -->
<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>
<template>
<h1>Blog</h1>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>This is an ordinary Vue component with <script setup>, but it has no import at all: useFetch is available automatically. The file lives in app/pages/, so it opens at /. The list of posts comes from the server in the same response as the HTML.
The course example
The whole course builds a small blog:
- a home page and a list of posts;
- a page for one post with comments;
- a form to add a post;
- an API in the
server/folder that keeps posts on disk.
What you need to know first
The course builds on the Vue course: components, ref, computed, props and events, the idea of a router. You need Node.js 20 or newer and an editor with Vue support, for example VS Code with the Vue (Official) extension.
Common mistake
The code in a page's <script setup> runs twice: first on the server, then in the browser. The server has no window, document or localStorage, so a line like localStorage.getItem('theme') right inside <script setup> fails with localStorage is not defined. Use them inside onMounted, which runs only in the browser.