Interactive Vue Playgrounds with TutorialKit with Garrison Snelling - Part 1

on YouTube ↗14m

" summary

Creates a working interactive Vue playground for VueUse in about 45 minutes using StackBlitz tech: Tutorial Kit (newly open source) plus Web Containers and an Astro-backed site. Workflow clones a boilerplate, adds a part/chapter/lesson with a content.md plus files and solution folders, uses templates that supply package.json and prepare/main commands (npm/pnpm install, npm run dev), and produces an IDE with file tree, terminal, reset and solve flows demonstrating a useStorage example.

AI-written summary · about

" chapters (9)

1. 0:00Introduction
2. 1:48Web Containers and TutorialKit
3. 3:35Interactive tutorials with TutorialKit
4. 5:43Vue playground tutorial plan
5. 7:31Lesson structure in TutorialKit
6. 9:23File system setup
7. 10:26Code templates and scaffolding
8. 11:48Vue template creation
9. 13:11Next steps and resources

" related talks

• 24mFull Stack DocumentationRich Harris · JSNation Conference 2022
• 20mPlaying with Interactive DocumentationJason Etcovitch · Next.js Conf 2020
• 30mVue Crash Course: What Can You Build in 20 Minutes?Michael Thiessen · Frontend Nation 2025
• 10mBoost up your component developmentMitko Tschimev · ngVikings 2019
• 39mVue.js - developer friendly, fast and versatileAlexander Schwartz · code.talks 2017
• 34mComponent Documentation Made EasyBart Ledoux · Vueconf.US 2020
• 38mAn Introduction to the Vue EcosystemHassan Djirdeh · Web Unleashed 2019
• 01h 03mVue.js is going to take the worldThiago Passos · NDC Sydney 2020