Vue Tips Collection

Description

Vue Tips Collection Michael Thiessen Introduction Michael Thiessen Table of Tips Forgotten Features Slots and Reusability Logic Lore CSS Tips Powerful Patterns Template Tidbits All the Others Chapter Forgotten Features A simpler way to pass lots of props Watching Arrays and Objects Restrict a prop to a list of types How to watch anything in your component Global Components Use quotes to watch nested values Getting Meta with Nuxt 3 h and Render Functions Deep Linking with Vue Router toRef default value Directives in Render Functions Vue to Web Component in 3 Easy Steps Private properties with script setup Special CSS pseudo-selectors in Vue Custom Directives Next Tick: Waiting for the DOM to Update Destructuring in a v-for Chapter Slots and Reusability The limitations of props Splitting slots Conditionally rendering slots So why do we want to be able to conditionally render slots? Understanding scoped slots Slot transitions How to watch a slot for changes Reusable components aren't what you think Recursive slots Default content with slots 6 levels of reusability Nesting slots Improve reusability by converting template props into slots Shorthand for named slots Default content with nested slots Chapter Logic Lore Global properties Detect clicks outside an element Composable return values Detect mouse hover in your component A bunch of composable mini tips A simple undo composable When ref and reactive work the same Structuring composables Ref vs. reactive Vue Testing Library Lazy loading images in a single line Requiring injections Chapter CSS Tips Don't override component CSS Defining your own utility classes in Tailwind Two-sided transitions Don't set height and width Grid template areas Creating grids without holes Using multiple box shadows How I deal with dynamic classes Reactive CSS Shapes in CSS Circle Semi-Circle Triangle Overriding styles of a child component — the right way Mixing local and global styles together Clean up your Tailwind classes Invisible outlines Chapter Powerful Patterns Creating magic with context-aware components 1. State Sharing 2. Configuration 3. Styling Where do you put shared state? Default content and extension points Make test cases super specific Directly accessing parent components (and why) Async components Stop testing the implementation Why there must be one source of truth Calling a method from outside of the component Using composition and options API together Simpler testing with dependency injection Controlled props — or how to override internal state Component Seams Framework: How to split up components Component metadata Smooth dragging (and other mouse movements) Component variations with the Base Component pattern Lonely children Better injection keys How to make a variable created outside of Vue reactive Tests before implementation Reusability Fundamentals: The Configuration Pattern Suspense: More Flexible Loading State Master computed props Stealing prop types Prevent navigating away Chapter Template Tidbits Static and dynamic classes Multiple v-models v-pre and v-once Dynamic directives Reactive SVG components Teleportation Template refs How to get rid of extra template tags Configuration driven templates Dynamic slot names Computed Props in Your Template: v-memo Another use for the template tag When should you use v-if? Chapter All the Others Check Vue’s version Using two script blocks Define multiple components in a single file Script setup Performance tracing Multi-file single-file components Get rid of the double curly braces A better way to handle errors (and warnings) Aria roles you didn't know you needed What are all these loops for? Reducing objects Looping over a range in Vue My favourite git commands The picture element Stacking contexts Blockquotes UI states to get right Folder Structure: Keep It Flat The smallest possible PR The best solution is the worst solution