[Work in Progress] An interactive tutorial and playground for Nuxt
MIT License
[!WARNING] The architecture of this project is ready, while the tutorial content is still work in progress, contributions appreciated!
An interactive tutorial and playground for learning Nuxt. Powered by Nuxt and WebContainers.
Inspired by learn.svelte.dev.
learn.nuxt.com
is not yet deployed, but you can preview the latest branch at learn-dev.nuxt.com.
Anthony Fu built this project from scratch on Live Streaming. You can watch the recordings of the full process on YouTube.
To run this project locally, you need to have Node.js v20.0+ and pnpm installed.
After cloning the repo, run the following commands to install dependencies:
pnpm install
Then, run the following command to start the development server:
pnpm dev
The development server will be running at http://localhost:3000.
The tutorial content is located in the content/
directory. Each route contains a number prefix (1.
) to indicate the order and will be removed in the final URL. For each route, we use a folder with an index.md
to serve the extra files. A .template
folder can be placed with the index.md
file to provide the template for the playground.
.template/index.ts
- Indicates the metadata for that guide, like enabling/disabling features, file filters, etc..template/files/**
- The files that will be copied to the playground when the user navigates to that guide, merged with the basic template under template/basic/
.template/solutions/**
- Optional solutions for the tasks in that guide, merged with the guide files.import.meta.glob
, create static virtual modules)