Playground workflow

Get the most from each lesson’s live editor with a deliberate loop—the same habits that transfer to Vite, Vue CLI, or Nuxt projects.

Recommended workflow

1. Read the concept section before touching code.
2. Click Run in browser to compile TypeScript and execute in the preview iframe.
3. Use printOutput(...) to inspect values in the terminal panel below the editor.
4. When a lesson shows UI, define a component with setup() + template, then call mountApp(App) — the preview renders inside #app.
5. Change one idea at a time (one ref, one directive, one prop).
6. Read TypeScript errors in the terminal—they often point to wrong prop types before runtime.
7. Reset the editor if you drift too far from the lesson goal.

What happens when you Run

• Your TypeScript runs in the browser (same idea as a dev server without the file system).
• Vue 3 loads from CDN with the global build and template compiler.
• Vue is a global—destructure APIs: const { ref, computed } = Vue;
• mountApp calls createApp(component).mount('#app') in the iframe.

Review TypeScript intro if type errors block you. If you know React, compare setup() return values to what you expose from a function component.

Self-check

1. What is the difference between printOutput and mountApp?
2. Why change one concept at a time while learning?