Overview

This article discusses an interactive Nuxt playground for learning Nuxt, powered by Nuxt and WebContainers. The project is in progress and contributions are welcome. The article also mentions live streaming sessions where the project is being built from scratch.

Features

• Show release time for the playground
• Show Nuxt and Vue versions from the container
• Custom bundler for templates to replace import.meta.glob and create static virtual modules
• Switch playgrounds on different guides (in progress)
• Verification for tutorial tasks (in progress)
• Monaco editor and Volar integration
• Connection of Volar to the WebContainer file system
• File tree implementation
• Interactivity shell addition
• Basic editor functionality
• Refactoring of logic from Vue Single File Components to composables
• Integration of Pinia
• Frame-to-parent communication
• Basic style synchronization
• Buttons to restart server
• Open/close terminal panel
• Extraction of “playground injected” utilities
• Ability to download the project as a zip

Installation

To run this project locally, you need to have Node.js v20.0+ and pnpm installed.

After cloning the repository, run the following commands to install dependencies:

npm install -g pnpm
pnpm install

Then, run the following command to start the development server:

npm run dev

The development server will be running at http://localhost:3000.

Summary

The article introduces an interactive Nuxt playground for learning Nuxt, powered by Nuxt and WebContainers. It highlights the project’s current progress and invites contributions from the community. The article also provides installation instructions for running the project locally.