Inside Vue Components
summary
Argues that single-file components colocate template, script and style and are compiled with Browserify/webpack loaders into plain JavaScript; shows Babel/TS, PostCSS, CSS-loader, extract plugin and webpack dev server in the pipeline. Demonstrates scoped CSS that compiles to attribute selectors (works back to IE9), hot reload that preserves state for template edits but resets on script changes, and code-splitting via dynamic import to lazy-load components and shrink initial bundles.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:36The old way
- 8:50Single file setup
- 9:42Inspirations
- 10:29Why compile
- 11:57Browserify
- 16:15Virtual DOM
- 19:56Tylar
- 20:56Template Explorer
- 28:03Deployment
- 30:56Assembly
- 33:46Single file components
- 34:51Hot reload
related talks
18mCode Splitting Patterns with Vue
19mDemystifying: The Dark Art of SFC Compilation
27mDemystifying the Dark Art of SFC Compilation
27mThe State of CSS in Vue
12mLet's Vue Like It's 1999
28mVue Development in CodeSandbox
34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?
37mPrototyping with Vue Single File Component