Welcome to Vue / Nuxt Training!

This is an interactive training that is composed with guides and challenges to help you learn Nuxt and its concepts step by step.

The goal of this training is to quickly give you an experience of what it feels like to work with Nuxt and Vue, right in the browser. It does not aim to be comprehensive, and you don't need to understand everything before moving on. All playgrounds are editable with a full-featured editor and dev environment, so you can play with the code and see the result right away and learn by doing.

What's Nuxt?

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js. Nuxt has no vendor lock-in, allowing you to deploy your application everywhere, even on the edge.

Getting Started

With this training, we assume you are already familiar with the basic concepts of HTML, CSS and JavaScript. Nuxt is a full-stack framework built on top of Vue, we also include a simple Vue tutorial to help you get started quickly.

Start learning by clicking the topics below:

Core Learning Paths

Vue Basics

Learn Vue fundamentals: reactivity, components, props, slots, and more.

Nuxt Concepts

Master Nuxt essentials: routing, data fetching, server routes, and configuration.

Advanced Topics

Advanced Nuxt

SSR pitfalls, performance optimization, SEO, testing, and deployment strategies.

Pinia State Management

Global state management with Pinia: stores, getters, actions, and best practices.

Nuxt UI

Build beautiful interfaces with ready-made, accessible components.

Case Studies

Once you are already familiar with the concepts of Vue and Nuxt, we provide some case studies to help you understand how to use Nuxt in real-world applications:

GitHub Profile ^{Coming Soon}

Build an website to generate custom user profile from GitHub

ECommerce ^{Coming Soon}

Build a basic ECommerce site with product display, cart and login

About This Playground

This playground itself is also built with Nuxt. It uses:

WebContainers to create a fully-featured Node.js environment in your browser to run Nuxt dev server.
Nuxt Content to provide content management for the playground.
Monaco Editor to provide a code editor with syntax highlighting and code completion.
Volar to provide Vue and TypeScript language support for Monaco Editor.

This project has been reused for the purpose of this training. The content is available in English and French and has been worked on specifically for the purpose of the training. The content is not yet finalized on the base project. You can find the source code on GitHub to learn more about how this playground is built.

Vue Basics

Nuxt integrates Vue 3, a progressive framework for building user interfaces. In this section, we will cover the basics of Vue.