Welcome to Nuxt Tutorial!

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

The goal of this tutorial 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 tutorial, 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:

Vue Basics
If you are not familiar with Vue, we recommend you to learn the basics of Vue first.
Nuxt Concepts
If you are not familiar with Vue, we recommend you to learn the basics of Vue first.

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.

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.
Initializing WebContainer
Mounting files
Installing dependencies
Starting Nuxt server
Waiting for Nuxt to ready