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:
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:
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.