Nuxt Tutorial Playground

Warning

This project is unfinished and heavily work in progress.

An interactive interactive tutorial and playground for learning Nuxt. Powered by Nuxt and WebContainers.

Inspired by learn.svelte.dev.

Live Streaming

Anthony Fu is doing regular live streaming on building this project from scratch. You can watch the recordings or join the live stream on YouTube.

Contributing

Important

Please create an issue first before submitting PRs. So that we can discuss about the directions and plans, to avoid wasted efforts. Thank you!

This project is progressed mainly on Live Stream. In general, we want to present the main progress on the stream so people can follow along the whole process. Contributions are still greatly welcome! For PR that makes refactors or big changes, we could review them on the stream as well.

Development

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.

Todolist

• 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
• Try https://ark-ui.com/docs/components/splitter
• Show release time for the playground
• Show Nuxt and Vue versions from the container
• Custom bundler for templates (replaces import.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

License

MIT