Contents
Nuxt
A Vue framework for sites and apps: file-based routing, data fetching and server APIs.
1.Getting started
- What Nuxt isWhat Nuxt adds to Vue, which problems it solves and which version this course covers.
- Creating a projectHow to create a project with npm create nuxt@latest, run it and what lives in its folders.
- app.vue and NuxtPageThe root component of the app and the place where the current page is shown.
- Pages and file-based routingHow files in the app/pages folder turn into site addresses.
- Navigation: NuxtLink and navigateToLinks between pages without a reload, and moving to another page from code.
- LayoutsA shared wrapper for pages: the default layout, a second layout and choosing a layout for a page.
2.Routing
3.Components and state
- Components and auto-importsWhere components live, how Nuxt makes them available without import and how components in subfolders are named.
- Composables and utilsThe app/composables and app/utils folders: shared functions available without import.
- PluginsCode that runs when the app starts: shared helpers, directives and Vue libraries.
- Shared state: useStateData shared by several components that is safely passed from the server to the browser.
- Pinia in NuxtAdding Pinia with the @pinia/nuxt module, a store of favourite posts and how to use it.
4.The server side
- Server routesThe server/api folder: request handlers on the server, HTTP methods in file names and JSON responses.
- Params, query and body in handlersHow a server handler reads a route parameter, the query string and the request body, and how it reports an error.
- Storing data on the serverThe built-in Nitro storage: setup in nuxt.config.ts, reading and writing, posts and comments on disk.
5.Fetching data
- Fetching data: useFetchHow a page gets data from the API so that it arrives with the HTML and is not loaded twice.
- useAsyncData and $fetchThe $fetch function for requests from code, and useAsyncData for loading data in any way.
- Loading, errors and refreshing dataThe status, error and refresh fields of useFetch, lazy loading and repeating a request with a button.
- Forms: sending data to the serverThe new post form and the comment form: $fetch with POST, server errors and refreshing the list.
- The error page and createErrorYour own app/error.vue file, a 404 error for a missing post and getting back to the site with clearError.
6.Setting up the site
- Runtime config and environment variablesruntimeConfig in nuxt.config.ts, the .env file, secret and public values and the useRuntimeConfig function.
- SEO and meta tags: useHead and useSeoMetaThe tab title, the description and social media meta tags for each page and for the whole site.
- Images, files and stylesThe difference between the public and app/assets folders, a global stylesheet and component styles.
- Nuxt modulesWhat a module is, how to install it with nuxi module add and how to configure it, using @nuxt/image as an example.
- Authentication overviewSigning in to the blog admin with the nuxt-auth-utils module: the session, the login page, protecting pages and the API.
7.Going to production
- Rendering modes: SSR, SSG and hybridWhere and when page HTML is built: on the server, in the browser, ahead of time at build, and how to mix modes with routeRules.
- Testing basicsVitest and @nuxt/test-utils: setup, a function test and a component test with mountSuspended.
- Building and deployingThe build, preview and generate commands, the .output folder, running on a Node.js server and Nitro presets for hosting platforms.