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

Nuxt Fundamentals

Nuxt is a full-stack framework for building web applications with Vue. Vue supplies components, templates, reactivity, and the Composition API. Nuxt adds file-based routing, server rendering, data-fetching conventions, server endpoints, automatic imports, build tooling, and deployment presets.

A Nuxt application has two cooperating parts. The Vue application renders pages and browser interactions. The Nitro server renders initial HTML, runs server routes, and packages the production server. Some code can execute in both environments, so the server–browser boundary is the central design decision.

Nuxt fits content sites, commerce, dashboards, and applications that combine an interactive interface with server behavior. A client-only Vue application may be sufficient when every view can wait for JavaScript and no server endpoint is needed. A static generator may be preferable when every route is known at build time. Nuxt becomes useful when one codebase needs several rendering modes, server APIs, or framework-managed deployment output.

Directories declare application behavior

Nuxt turns conventional file locations into framework behavior. In Nuxt 4, client application code belongs under app/, while server code remains under server/ at the project root.

app/
├── app.vue
├── components/
├── composables/
├── layouts/
├── middleware/
├── pages/
└── plugins/
server/
├── api/
├── middleware/
├── plugins/
└── routes/
nuxt.config.ts

A file at app/pages/index.vue creates /. A file at app/pages/products/[id].vue creates a dynamic product route. Nuxt uses Vue Router for navigation, while <NuxtPage> renders the matched page. Layouts wrap pages through <NuxtLayout> and a slot, which keeps shared interface structure outside individual page files.

Files in app/components/, app/composables/, and app/utils/ can be auto-imported. Auto-imports reduce repetitive import statements without making every implementation global at runtime. Nuxt generates type declarations and includes only used code in the production bundle. This convention depends on framework scanning, so generated types may be missing until nuxt dev, nuxt build, or nuxt prepare has run.

An initial request crosses the server–browser boundary

Universal rendering is the default. When a browser requests a route, Nuxt runs the Vue application on the server and sends rendered HTML. The response also includes a payload containing data needed by the client. The browser displays the HTML, loads JavaScript, and hydrates the application by attaching Vue behavior to the existing markup.

Continue the course

This section is part of the paid course.

See pricing to subscribe, or log in if you already have access.

Where this skill leads

Relevant careers

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

Sources