Nuxt.js - Blazing Fast Static Sites with Vue.js (for FREE)

Install and set up a Nuxt.js project by updating Node and npm, then scaffold a Nuxt app using npx create-nuxt-app and select universal static site mode.

Start the development server with auto-reload, then create a simple multi-page site: index, about, contact, and donate, featuring a shared header and next/link navigation.

Learn to add a navigation bar to your nuxt.js layout by creating a header partial, updating links for home, about, and contact, and injecting it into the default layout.

Learn to manipulate the head in a Nuxt.js app by editing the export default head object to set the title and meta information, shared across pages.

Add scss styling to the header component using scoped styles, variables, and nesting. Generate color schemes with coolors.co and build a 100vh header with flex layout and color inheritance.

learn to implement a top loading bar in nuxt.js that reflects asset loading, customize its color with a hex value, and apply global css through the layout and head configuration.

Implement page transitions in Nuxt.js using a bounce animation that scales content, bounces out then in on link changes, with adjustable durations and optional opacity effects.

Build your application, generate a static site with npm run generate, and host the static files for fast loading and improved search engine indexing.