Repository files navigation

An interactive tutorial and playground for learning Nuxt. Powered byNuxt andWebContainers.

Live at:📖 learn.nuxt.com.

This project is heavily inspired bylearn.svelte.dev.

Anthony Fu is building this project from scratch on Live Streaming.You can watch the recordings of the full process onYouTube.

To run this project locally, you need to haveNode.js v22.0+ andpnpm 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 athttp://localhost:3000.

The tutorial content is located in thecontent/en/ 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 anindex.md to serve the extra files. A.template folder can be placed with theindex.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 undertemplate/basic/
• .template/solutions/** - Optional solutions for the tasks in that guide, merged with the guide files.

We have the Japanese content undercontent/ja in collobration with theVue.js community. At this moment, we areNOT accepting new languages, pleaselearn more here.

• Content
  • Allow each guide to configure file filter
  • Persist user changes when toggling solutions
  • Verification for tutorial tasks
  • Search feature
    • Search in command palette
    • Search button
  • Navigation
    • Dropdown for guide outlines
    • Breadcrumbs
    • Previous/Next buttons
  • Embedded Nuxt Docs (update CORS headers)
  • Only make necessary changes when navigating between guides
  • Switch playgrounds on different guides
  • Allow each guide to toggle features
  • Solution for each guide
  • A button of "Edit this page"
• SEO
  • OG Image
  • Meta tags
  • Sitemap
• Command K System
• About Page
• Welcome Screen
• Tryhttps://ark-ui.com/docs/components/splitter
• Show release time for the playground
• Show Nuxt and Vue versions from the container
• Custom bundler for templates (replacesimport.meta.glob, create static virtual modules)
• Monaco editor and Volar
  • Connection Volar to the WebContainer FS
• File tree
• Add interactivity shell
• A basic editor
• Refactor logic from Vue SFC to composables
• Refactor to add Pinia
• Frame-to-parent communication
• Sync the basic style
• Buttons to restart server
• Open/close terminal panel
• Extract "playground injected" utils
• Download the project as zip

MIT