100 Vue (general) resources for developers

Utilize TypeScript interfaces within defineProps to enforce strict prop validation. Use the 'withDefaults' compiler macro to provide default values for optional props without losing type inference.

When destructuring props or reactive objects, wrap the source in toRefs() to prevent losing reactivity. This is critical when passing individual prop values to composables.

Define template refs using the generic ref syntax: const myInput = ref<HTMLInputElement | null>(null). This ensures proper IDE autocompletion and type checking for DOM methods.

Use shallowRef() instead of ref() for large arrays or complex objects that do not require deep reactivity. This reduces overhead by only tracking the top-level reference change.

Encapsulate reusable logic into functions prefixed with 'use'. Ensure they return an object of refs to maintain reactivity when consumed by components.

Wrap reactive state in readonly() before exporting it from a composable to prevent consumers from mutating state directly, enforcing a unidirectional data flow.

Use InjectionKey symbols to provide type safety for dependency injection across deeply nested components, preventing naming collisions and runtime errors.

Use watchEffect() when you need to track multiple reactive dependencies automatically without explicitly listing them, such as when syncing local state to localStorage.

Leverage Top-Level Await in <script setup> when working with asynchronous data fetching. Ensure the parent component is wrapped in a <Suspense> boundary.

Implement writable computed properties by providing an object with get() and set(value) methods, useful for wrapping v-model logic in child components.

Adopt the function-based 'Setup Store' syntax in Pinia to leverage the same mental model as the Composition API, making it easier to share logic between stores and components.

Apply storeToRefs() when extracting state or getters from a Pinia store to keep them reactive. Note that actions should be destructured directly from the store object.

Import and instantiate one store inside another to handle cross-domain logic. Pinia handles the dependency tree automatically without circular dependency issues.

Use store.$onAction() to implement global logging, analytics, or undo/redo functionality by intercepting store calls before or after they execute.

Since Setup Stores don't have a built-in $reset, manually implement a reset function that returns the store state to its initial values to handle user logout scenarios.

Integrate 'pinia-plugin-persistedstate' to automatically sync store state with localStorage or sessionStorage using a simple 'persist: true' configuration key.

Use the $patch method to apply multiple changes to the state simultaneously, which can be more performant and easier to debug via Vue DevTools.

Use @pinia/testing to create a fresh store instance for every unit test, allowing you to mock actions and verify state changes in isolation.

Use computed() inside Setup Stores to create getters. This allows for complex derived state that caches results based on reactive dependencies.

Ensure the initial state from the server is passed to the Pinia instance on the client side to prevent hydration mismatch errors in Nuxt or custom SSR setups.

Migrate from Jest to Vitest for faster unit testing of Single File Components (SFCs), taking advantage of Vite's native module resolution and fast HMR.

Use findComponent() to locate child components in the wrapper instead of querying DOM selectors, making tests more resilient to internal markup changes.

Test composables without a component by wrapping them in a dummy component or using a simple wrapper function to provide the necessary lifecycle context.

Disable the built-in VS Code 'TypeScript Language Features' for Vue projects and enable Volar's Take Over Mode to ensure accurate type checking in templates.

Wrap heavy components (like charts or editors) in defineAsyncComponent() to split them into separate chunks, reducing the initial bundle size.

Implement lazy loading of components or infinite scrolling using the useIntersectionObserver composable from the VueUse library for a performance boost.

Use <Teleport to="body"> for modals and notifications to avoid CSS overflow or z-index issues caused by parent container constraints.

Always use a unique identifier (like an ID) for :key in v-for loops. Avoid using array indices to prevent rendering glitches during list mutations.

Use the Timeline tab in Vue DevTools to identify slow component renders and excessive reactivity triggers in complex views.

Configure unplugin-vue-components in Vite to automatically import UI library components (like PrimeVue or Element Plus) as they are used in templates.