Course Preview

Nuxt Fundamentals

Nuxt is a full-stack web framework built around Vue components. It adds file-based routing, server rendering, browser hydration, server endpoints, data-fetching conventions, and deployment tooling so one project can produce both the user interface and its supporting server behavior.

itWeb development | OpenSkills.info

Course pathWalk it in order

Look it upDip in anytime

Go furtherLeaves this page

Don't Panic — Nuxt Fundamentals

Nuxt is Vue with a filing system, a server, and a strong opinion about what happens when someone asks for a web page. That may sound like Vue has acquired a small municipal government. In practice, Nuxt takes the recurring parts of an application—routes, initial HTML, data, server endpoints, and deployment output—and gives them places to live.

The useful map has two halves. The Vue application handles pages and browser interaction. Nitro receives requests, renders the first page, runs server routes, and prepares production output. The interesting work is not choosing a favourite half. It is deciding which code belongs on the server, in the browser, or on the narrow bridge between them.

That bridge is hydration. Nuxt sends server-rendered HTML and a payload of page data to the browser; Vue then attaches interaction to the markup already there. This is why a current time, a random number, or browser-only state can cause a warning. The server and browser have both told a story about the first page, and their accounts no longer match. Computers are very particular about witness statements.

The directories are less decorative than they look. Files in app/pages become routes. Files in server/api become API endpoints. useFetch carries initial page data through Nuxt's payload lifecycle, while a direct $fetch suits a later action such as submitting a form. Runtime configuration separates private server values from public browser values, because secrets are poor candidates for a public performance.

One surprise remains: a page redirect is not authorization for an API. Route middleware governs navigation; a server handler still validates input, authenticates the caller, and authorizes the action. The other recurring surprise is that a static deployment has no live Nitro server, so a route that depends on server endpoints needs a runtime that can host them.

Read the intro when you need the full request path and the rendering choices. Use the slides for the compact architecture map. Keep the cheatsheet nearby when a directory, data composable, or configuration scope needs a precise answer. Then take the exercise: it makes one small endpoint, one payload-aware page, and one production preview do the explaining that a hundred framework adjectives never manage.

Where this skill leads

Relevant careers

See how this topic contributes to broader role-level skill maps.

Sources