vuejs-ai/skills

A computed getter should only derive a value. No mutation, no API calls, no storage writes, no event emits. ([Reference](https://vuejs.org/guide/essentials/computed.html#best-practices))

([Reference](https://vuejs.org/guide/essentials/computed.html#best-practices))

const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`, {

It leads to unclear intent and unnecessary work. ([Reference](https://vuejs.org/guide/essentials/list.html#v-for-with-v-if))

([Reference](https://vuejs.org/guide/essentials/list.html#v-for-with-v-if))

updated() {     // This runs after every single state change!     fetch('/api/sync', {

// This runs after every single state change!     fetch('/api/sync', {       method: 'POST',

fetch('/api/sync', {

methods: {     syncToServer: debounce(function(items) {       fetch('/api/sync', {

syncToServer: debounce(function(items) {       fetch('/api/sync', {         method: 'POST',

fetch('/api/sync', {

const syncToServer = useDebounceFn((items) => {   fetch('/api/sync', { method: 'POST', body: JSON.stringify(items) })

fetch('/api/sync', { method: 'POST', body: JSON.stringify(items) })

## Reference - [Vue.js Animation Techniques](https://vuejs.org/guide/extras/animation.html)

- [Vue.js Animation Techniques](https://vuejs.org/guide/extras/animation.html)

- [AutoAnimate with Vue](https://auto-animate.formkit.com/#usage-vue)

- [Vue.js v-for with key](https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key)

## Reference - [Vue.js TransitionGroup](https://vuejs.org/guide/built-ins/transition-group.html)

- [Vue.js TransitionGroup](https://vuejs.org/guide/built-ins/transition-group.html)

- [GitHub Issue: transition-group DOM update lag](https://github.com/vuejs/vue/issues/5845)

- [Vue Virtual Scroller](https://github.com/Akryum/vue-virtual-scroller)

- [Vue.js Async Components Documentation](https://vuejs.org/guide/components/async)

- [Handling Async Components' loading errors](https://awad.dev/blog/handling-async-component-loading-errors/)

- [Vue.js GitHub Discussion #11334](https://github.com/orgs/vuejs/discussions/11334)

- [Vue.js Async Components Documentation](https://vuejs.org/guide/components/async)

- [Vue Router Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html)

- [Vue.js Async Components Documentation](https://vuejs.org/guide/components/async)

- [Fallthrough Attributes - v-on Listener Inheritance](https://vuejs.org/guide/components/attrs.html#v-on-listener-inheritance)

- [Component Events](https://vuejs.org/guide/components/events.html)

await fetch('/api/update', {

## Reference - [Vue.js Form Input Bindings - Checkbox](https://vuejs.org/guide/essentials/forms.html#checkbox)

- [Vue.js Form Input Bindings - Checkbox](https://vuejs.org/guide/essentials/forms.html#checkbox)

## Reference - [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)

- [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)

- [VueUse - useEventListener](https://vueuse.org/core/useEventListener/)

## Reference - [Vue.js Component Events](https://vuejs.org/guide/components/events.html)

- [Vue.js Component Events](https://vuejs.org/guide/components/events.html)

- [Vue.js Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)

- [Vue 3 Migration - .native Modifier Removed](https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html)

## Reference - [Vue.js Component Registration](https://vuejs.org/guide/components/registration.html)

- [Vue.js Component Registration](https://vuejs.org/guide/components/registration.html)

- [GitHub Issue: Global component naming conflicts](https://github.com/vuejs/vue/issues/4434)

## Reference - [Vue.js Component Refs](https://vuejs.org/guide/essentials/template-refs.html#ref-on-component)

- [Vue.js Component Refs](https://vuejs.org/guide/essentials/template-refs.html#ref-on-component)

- [Script Setup - defineExpose](https://vuejs.org/api/sfc-script-setup.html#defineexpose)

async function fetch(url) {

## Reference - [Vue.js Composables](https://vuejs.org/guide/reusability/composables.html)

- [Vue.js Composables](https://vuejs.org/guide/reusability/composables.html)

- [Common Mistakes Creating Composition Functions](https://www.telerik.com/blogs/common-mistakes-creating-composition-functions-vue)

// Either fetch in onMounted or use a composable designed for arrays onMounted(async () => {   results.value = await Promise.all(urls.value.map(url => fetch(url)))

onMounted(async () => {   results.value = await Promise.all(urls.value.map(url => fetch(url))) })

results.value = await Promise.all(urls.value.map(url => fetch(url)))

## Reference - [Vue.js Composables - Usage Restrictions](https://vuejs.org/guide/reusability/composables.html#usage-restrictions)

- [Vue.js Composables - Usage Restrictions](https://vuejs.org/guide/reusability/composables.html#usage-restrictions)

- [Vue.js Composition API - Setup Context](https://vuejs.org/api/composition-api-setup.html)

## Reference - [Vue.js Composables - Conventions and Best Practices](https://vuejs.org/guide/reusability/composables.html#conventions-and-best-practices)

- [Vue.js Composables - Conventions and Best Practices](https://vuejs.org/guide/reusability/composables.html#conventions-and-best-practices)

- [Vue.js Composables - Return Values](https://vuejs.org/guide/reusability/composables.html#return-values)

try {       // urlValue is a static string - no dependency tracked!       const response = await fetch(urlValue)

// urlValue is a static string - no dependency tracked!       const response = await fetch(urlValue)       data.value = await response.json()

const response = await fetch(urlValue)

try {       const response = await fetch(urlValue)

const response = await fetch(urlValue)

## Reference - [Vue.js Reactivity API - toValue](https://vuejs.org/api/reactivity-utilities.html#tovalue)

- [Vue.js Reactivity API - toValue](https://vuejs.org/api/reactivity-utilities.html#tovalue)

- [Vue.js Composables - Accepting Ref Arguments](https://vuejs.org/guide/reusability/composables.html#accepting-reactive-state)

## Reference - [Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)

- [Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)

- [Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)

## Reference - [Composition API FAQ - Async Setup](https://vuejs.org/guide/extras/composition-api-faq.html)

- [Composition API FAQ - Async Setup](https://vuejs.org/guide/extras/composition-api-faq.html)

- [Composables - Async Without Await](https://antfu.me/posts/async-with-composition-api)

- [Suspense](https://vuejs.org/guide/built-ins/suspense.html)

## Reference - [Composition API FAQ - Relationship with React Hooks](https://vuejs.org/guide/extras/composition-api-faq.html#relationship-with-react-hooks)

- [Composition API FAQ - Relationship with React Hooks](https://vuejs.org/guide/extras/composition-api-faq.html#relationship-with-react-hooks)

- [Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)

## Reference - [Vue.js Computed Properties - Avoid Mutating Computed Value](https://vuejs.org/guide/essentials/computed.html#avoid-mutating-computed-value)

- [Vue.js Computed Properties - Avoid Mutating Computed Value](https://vuejs.org/guide/essentials/computed.html#avoid-mutating-computed-value)

- [MDN Array Methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

## Reference - [Vue.js Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)

- [Vue.js Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)

- [GitHub Discussion: Dependency collection gotcha with conditionals](https://github.com/vuejs/Discussion/issues/15)

## Reference - [Vue.js Computed Properties](https://vuejs.org/guide/essentials/computed.html)

- [Vue.js Computed Properties](https://vuejs.org/guide/essentials/computed.html)

- [Vue.js Methods](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-methods)

// BAD: Makes async request const userData = computed(async () => {   const response = await fetch('/api/user')  // Side effect - API call!

const userData = computed(async () => {   const response = await fetch('/api/user')  // Side effect - API call!   return response.json()

const response = await fetch('/api/user')  // Side effect - API call!

// GOOD: Use lifecycle hook for initial fetch onMounted(async () => {   const response = await fetch('/api/user')

onMounted(async () => {   const response = await fetch('/api/user')   userData.value = await response.json()

const response = await fetch('/api/user')

|-----------------|---------|-------------| | State mutation | `otherRef.value = x` | Use watcher | | API calls | `fetch()`, `axios()` | Use watcher or lifecycle hook |

| State mutation | `otherRef.value = x` | Use watcher | | API calls | `fetch()`, `axios()` | Use watcher or lifecycle hook | | DOM manipulation | `document.title = x` | Use watcher |

| API calls | `fetch()`, `axios()` | Use watcher or lifecycle hook |

## Reference - [Vue.js Computed Properties - Getters Should Be Side-Effect Free](https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free)

- [Vue.js Computed Properties - Getters Should Be Side-Effect Free](https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free)

## Reference - [Vue.js Computed Properties - Avoid Mutating Computed Value](https://vuejs.org/guide/essentials/computed.html#avoid-mutating-computed-value)

- [Vue.js Computed Properties - Avoid Mutating Computed Value](https://vuejs.org/guide/essentials/computed.html#avoid-mutating-computed-value)

- [Vue.js Computed Properties - Writable Computed](https://vuejs.org/guide/essentials/computed.html#writable-computed)

## Reference - [Vue.js - Creating a Vue Application](https://vuejs.org/guide/essentials/application.html)

- [Vue.js - Creating a Vue Application](https://vuejs.org/guide/essentials/application.html)

- [Vue.js Application API](https://vuejs.org/api/application.html)

## Reference - [Vue.js Component Events - Declaring Emitted Events](https://vuejs.org/guide/components/events.html#declaring-emitted-events)

- [Vue.js Component Events - Declaring Emitted Events](https://vuejs.org/guide/components/events.html#declaring-emitted-events)

- [Vue.js Component Events - Events Validation](https://vuejs.org/guide/components/events.html#events-validation)

- [Vue 3 Migration - emits Option](https://v3-migration.vuejs.org/breaking-changes/emits-option)

// WRONG: await before defineExpose const response = await fetch('/api/data')

const response = await fetch('/api/data')

// Now safe to use await const response = await fetch('/api/data')

const response = await fetch('/api/data')

async function refreshData() {   loading.value = true   const response = await fetch('/api/data')

loading.value = true   const response = await fetch('/api/data')   data.value = await response.json()

const response = await fetch('/api/data')

async function loadData() {   const [userRes, postsRes] = await Promise.all([     fetch('/api/user'),

const [userRes, postsRes] = await Promise.all([     fetch('/api/user'),     fetch('/api/posts')

fetch('/api/user'),

fetch('/api/posts')

// Context available here   await fetch(...)  // Suspends execution

await fetch(...)  // Suspends execution

## Reference - [Vue.js Script Setup - defineExpose](https://vuejs.org/api/sfc-script-setup.html#defineexpose)

- [Vue.js Script Setup - defineExpose](https://vuejs.org/api/sfc-script-setup.html#defineexpose)

- [Vue.js Async Components](https://vuejs.org/guide/components/async.html)

## Reference - [Vue.js Component v-model](https://vuejs.org/guide/components/v-model.html)

- [Vue.js Component v-model](https://vuejs.org/guide/components/v-model.html)

- [Vue School - defineModel Guide](https://vueschool.io/articles/vuejs-tutorials/v-model-and-definemodel-a-comprehensive-guide-to-two-way-binding-in-vue-js-3/)

## Reference - [Vue.js SFC script setup](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)

- [Vue.js SFC script setup](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)

- [ESLint vue/valid-define-emits](https://eslint.vuejs.org/rules/valid-define-emits)

## Reference - [Vue.js SFC script setup - defineEmits](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)

- [Vue.js SFC script setup - defineEmits](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)

- [Vue.js TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits)

## Reference - [Vue.js Component v-model](https://vuejs.org/guide/components/v-model.html)

- [Vue.js Component v-model](https://vuejs.org/guide/components/v-model.html)

- [GitHub Discussion: defineModel with objects](https://github.com/orgs/vuejs/discussions/10538)

- [SIMPL Engineering: Vue defineModel Pitfalls](https://engineering.simpl.de/post/vue_definemodel/)

## Reference - [Vue.js Reactivity Fundamentals - DOM Update Timing](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#dom-update-timing)

- [Vue.js Reactivity Fundamentals - DOM Update Timing](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#dom-update-timing)

- [Vue.js nextTick API](https://vuejs.org/api/general.html#nexttick)

// Simple string variable const attributeName = ref('href') const url = ref('https://vuejs.org')

const url = ref('https://vuejs.org')

// Match the lowercase used in template     const attrname = ref('href')     const url = ref('https://vuejs.org')

const attrname = ref('href')     const url = ref('https://vuejs.org')     return { attrname, url }

const url = ref('https://vuejs.org')

## Reference - [Vue.js Template Syntax - Dynamic Arguments](https://vuejs.org/guide/essentials/template-syntax.html#dynamic-arguments)

- [Vue.js Template Syntax - Dynamic Arguments](https://vuejs.org/guide/essentials/template-syntax.html#dynamic-arguments)

- [Vue.js Template Syntax - Dynamic Argument Value Constraints](https://vuejs.org/guide/essentials/template-syntax.html#dynamic-argument-value-constraints)

## Reference - [Vite - Glob Import](https://vitejs.dev/guide/features.html#glob-import)

- [Vite - Glob Import](https://vitejs.dev/guide/features.html#glob-import)

- [Vue.js Component Registration](https://vuejs.org/guide/components/registration.html)

## Reference - [Vue.js Event Handling - Event Modifiers](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers)

- [Vue.js Event Handling - Event Modifiers](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers)

## Reference - [Vue.js Event Handling - .exact Modifier](https://vuejs.org/guide/essentials/event-handling.html#exact-modifier)

- [Vue.js Event Handling - .exact Modifier](https://vuejs.org/guide/essentials/event-handling.html#exact-modifier)

- [Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)

- [Vue 3 Migration Guide - Attribute Coercion Behavior](https://v3-migration.vuejs.org/breaking-changes/)

- [Vue Fallthrough Attributes behaviour changes from Vue 2 to Vue 3](https://lukes.tips/posts/vue-3-fallthough-attributes-changes/)

## Reference - [Vue.js - In-DOM Template Parsing Caveats](https://vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats)

- [Vue.js - In-DOM Template Parsing Caveats](https://vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats)

- [Fallthrough Attributes - Disabling Attribute Inheritance](https://vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance)

- [Build Advanced Components in Vue 3 using $attrs](https://www.thisdot.co/blog/build-advanced-components-in-vue-3-using-usdattrs)

## Reference - [Vue Router Issue #626: keep-alive in nested route mounted twice](https://github.com/vuejs/router/issues/626)

- [Vue Router Issue #626: keep-alive in nested route mounted twice](https://github.com/vuejs/router/issues/626)

- [GitHub: vue3-keep-alive-component workaround](https://github.com/emiyalee1005/vue3-keep-alive-component)

- [Vue.js KeepAlive Documentation](https://vuejs.org/guide/built-ins/keep-alive.html)

## Reference - [GitHub Issue #9842: Memory leak with transition and keep-alive](https://github.com/vuejs/vue/issues/9842)

- [GitHub Issue #9842: Memory leak with transition and keep-alive](https://github.com/vuejs/vue/issues/9842)

- [GitHub Issue #9840: Memory leak with transition and keep-alive](https://github.com/vuejs/vue/issues/9840)

- [Vue.js KeepAlive Documentation](https://vuejs.org/guide/built-ins/keep-alive.html)

## Reference - [Vue.js Event Handling - Key Modifiers](https://vuejs.org/guide/essentials/event-handling.html#key-modifiers)

- [Vue.js Event Handling - Key Modifiers](https://vuejs.org/guide/essentials/event-handling.html#key-modifiers)

- [Vue.js Event Handling - System Modifier Keys](https://vuejs.org/guide/essentials/event-handling.html#system-modifier-keys)

## Reference - [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)

- [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)

- [Vue.js Template Refs](https://vuejs.org/guide/essentials/template-refs.html)

- [Vue.js nextTick](https://vuejs.org/api/general.html#nexttick)

## Reference - [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)

- [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)

- [Composition API Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html)

## Reference - [Vue.js SSR Guide](https://vuejs.org/guide/scaling-up/ssr.html)

- [Vue.js SSR Guide](https://vuejs.org/guide/scaling-up/ssr.html)

- [Nuxt.js Lifecycle](https://nuxt.com/docs/api/composables/use-nuxt-app#lifecycle-hooks)

- [Vue SSR Hydration](https://vuejs.org/guide/scaling-up/ssr.html#client-hydration)

## Reference - [Vue.js Component Registration - Local Registration](https://vuejs.org/guide/components/registration.html#local-registration)

- [Vue.js Component Registration - Local Registration](https://vuejs.org/guide/components/registration.html#local-registration)

## Reference - [Vue.js - Mounting the App](https://vuejs.org/guide/essentials/application.html#mounting-the-app)

- [Vue.js - Mounting the App](https://vuejs.org/guide/essentials/application.html#mounting-the-app)

- [Vue.js Application API - mount()](https://vuejs.org/api/application.html#app-mount)

- [Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)

- [Vue 3 Migration Guide - $attrs includes class & style](https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style)

## Reference - [Vue.js Component Events](https://vuejs.org/guide/components/events.html)

- [Vue.js Component Events](https://vuejs.org/guide/components/events.html)

- [Vue.js Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)

## Reference - [Vue.js Event Handling - Event Modifiers](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers)

- [Vue.js Event Handling - Event Modifiers](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers)

- [MDN - Improving scroll performance with passive listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners)

## Reference - [Vue.js Style Guide - Avoid v-if with v-for](https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for)

- [Vue.js Style Guide - Avoid v-if with v-for](https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for)

- [Vue 3 Migration Guide - v-if vs v-for Precedence](https://v3-migration.vuejs.org/breaking-changes/v-if-v-for)

- [ESLint Plugin Vue - no-use-v-if-with-v-for](https://eslint.vuejs.org/rules/no-use-v-if-with-v-for)

## Reference - [Vue.js Performance - Computed Stability](https://vuejs.org/guide/best-practices/performance.html#computed-stability)

- [Vue.js Performance - Computed Stability](https://vuejs.org/guide/best-practices/performance.html#computed-stability)

- [Vue.js Computed Properties](https://vuejs.org/guide/essentials/computed.html)

## Reference - [Vue.js Performance - Props Stability](https://vuejs.org/guide/best-practices/performance.html#props-stability)

- [Vue.js Performance - Props Stability](https://vuejs.org/guide/best-practices/performance.html#props-stability)

- [Vue.js Plugins Documentation](https://vuejs.org/guide/reusability/plugins.html)

- [Vue.js Global Properties](https://vuejs.org/api/application.html#app-config-globalproperties)

- [Vue.js Plugins Documentation](https://vuejs.org/guide/reusability/plugins.html)

- [Vue.js Application API](https://vuejs.org/api/application.html)

- [Vue 3 Migration Guide - Global API](https://v3-migration.vuejs.org/breaking-changes/global-api.html)

- [Vue.js Plugins Documentation](https://vuejs.org/guide/reusability/plugins.html)

- [Vue.js Provide/Inject](https://vuejs.org/guide/components/provide-inject.html)

- [TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)

- [Vue.js TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)

- [TypeScript Module Augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)

- [Vue.js Plugins Documentation](https://vuejs.org/guide/reusability/plugins.html)

## Reference - [Vue.js Script Setup - defineProps](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)

- [Vue.js Script Setup - defineProps](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)

## Reference - [Vue DevTools](https://devtools.vuejs.org/)

- [Vue DevTools](https://devtools.vuejs.org/)

- [Pinia DevTools](https://pinia.vuejs.org/core-concepts/index.html#devtools)

// TypeScript understands the factory return type const config = inject(ConfigKey, () => ({   apiUrl: 'https://api.example.com',

const config = inject(ConfigKey, () => ({   apiUrl: 'https://api.example.com',   debug: false,

apiUrl: 'https://api.example.com',

## Reference - [Vue.js inject() API Reference](https://vuejs.org/api/composition-api-dependency-injection.html#inject)

- [Vue.js inject() API Reference](https://vuejs.org/api/composition-api-dependency-injection.html#inject)

- [Vue.js Provide/Inject Guide](https://vuejs.org/guide/components/provide-inject.html)

## Reference - [Vue.js Provide/Inject - Working with Reactivity](https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity)

- [Vue.js Provide/Inject - Working with Reactivity](https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity)

- [How to make provide/inject reactive - LogRocket Blog](https://blog.logrocket.com/how-to-make-provide-inject-reactive/)

- [GitHub Issue: Inject/Provide is not reactive](https://github.com/vuejs/vue/issues/7017)

const response = await fetch('/api/config')

## Reference - [Vue.js Composition API - provide()](https://vuejs.org/api/composition-api-dependency-injection.html#provide)

- [Vue.js Composition API - provide()](https://vuejs.org/api/composition-api-dependency-injection.html#provide)

- [Vue.js Provide/Inject Guide](https://vuejs.org/guide/components/provide-inject.html)

## Reference - [Vue.js Reactivity Fundamentals - reactive()](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive)

- [Vue.js Reactivity Fundamentals - reactive()](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive)

- [Vue.js Reactivity API - toRefs()](https://vuejs.org/api/reactivity-utilities.html#torefs)

## Reference - [Vue.js Reactivity in Depth - Debugging](https://vuejs.org/guide/extras/reactivity-in-depth.html#reactivity-debugging)

- [Vue.js Reactivity in Depth - Debugging](https://vuejs.org/guide/extras/reactivity-in-depth.html#reactivity-debugging)

- [Vue.js computed() API](https://vuejs.org/api/reactivity-core.html#computed)

- [Vue.js onRenderTracked()](https://vuejs.org/api/composition-api-lifecycle.html#onrendertracked)

// CORRECT: Large static data const geoJsonData = markRaw(await fetch('/huge-geojson.json').then(r => r.json()))

const geoJsonData = markRaw(await fetch('/huge-geojson.json').then(r => r.json()))

## Reference - [Vue.js markRaw() API](https://vuejs.org/api/reactivity-advanced.html#markraw)

- [Vue.js markRaw() API](https://vuejs.org/api/reactivity-advanced.html#markraw)

- [Vue.js Reducing Reactivity Overhead](https://vuejs.org/guide/best-practices/performance.html#reduce-reactivity-overhead-for-large-immutable-structures)

- [Vue.js Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)

## Reference - [Vue.js Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)

- [Vue.js Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)

- [Vue.js toRaw() API](https://vuejs.org/api/reactivity-advanced.html#toraw)

## Reference - [Vue.js Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)

- [Vue.js Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)

- [Vue.js Watchers - Callback Flush Timing](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing)

- [Vue.js nextTick()](https://vuejs.org/api/general.html#nexttick)

## Reference - [Vue.js Reactivity Fundamentals - ref()](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref)

- [Vue.js Reactivity Fundamentals - ref()](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref)

## Reference - [Vue.js Reactivity Fundamentals - Caveat in Arrays and Collections](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-in-arrays-and-collections)

- [Vue.js Reactivity Fundamentals - Caveat in Arrays and Collections](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-in-arrays-and-collections)

## Reference - [Vue.js Render Function APIs](https://vuejs.org/api/render-function.html)

- [Vue.js Render Function APIs](https://vuejs.org/api/render-function.html)

- [Vue.js Render Functions - The Virtual DOM](https://vuejs.org/guide/extras/render-function.html#the-virtual-dom)

## Reference - [Vue.js Render Functions - Vnodes Must Be Unique](https://vuejs.org/guide/extras/render-function.html#vnodes-must-be-unique)

- [Vue.js Render Functions - Vnodes Must Be Unique](https://vuejs.org/guide/extras/render-function.html#vnodes-must-be-unique)

## Reference - [Vue 3 Migration Guide - Render Function API](https://v3-migration.vuejs.org/breaking-changes/render-function-api.html)

- [Vue 3 Migration Guide - Render Function API](https://v3-migration.vuejs.org/breaking-changes/render-function-api.html)

- [Vue.js Render Functions & JSX](https://vuejs.org/guide/extras/render-function.html)

## Reference - [Vue.js Render Functions with Composition API](https://vuejs.org/guide/extras/render-function.html#render-functions-jsx)

- [Vue.js Render Functions with Composition API](https://vuejs.org/guide/extras/render-function.html#render-functions-jsx)

- [Vue.js Composition API setup()](https://vuejs.org/api/composition-api-setup.html)

## Reference - [Vue.js Render Functions - Passing Slots](https://vuejs.org/guide/extras/render-function.html#passing-slots)

- [Vue.js Render Functions - Passing Slots](https://vuejs.org/guide/extras/render-function.html#passing-slots)

- [Vue.js Render Functions - Children](https://vuejs.org/guide/extras/render-function.html#children)

## Reference - [Vue 3 Migration - Render Function API](https://v3-migration.vuejs.org/breaking-changes/render-function-api.html)

- [Vue 3 Migration - Render Function API](https://v3-migration.vuejs.org/breaking-changes/render-function-api.html)

- [Vue.js Render Function API - resolveComponent](https://vuejs.org/api/render-function.html#resolvecomponent)

## Reference - [Vue.js Form Input Bindings - Select](https://vuejs.org/guide/essentials/forms.html#select)

- [Vue.js Form Input Bindings - Select](https://vuejs.org/guide/essentials/forms.html#select)

## Reference - [Vue.js Component Registration](https://vuejs.org/guide/components/registration.html)

- [Vue.js Component Registration](https://vuejs.org/guide/components/registration.html)

## Reference - [Vue.js SFC Specification](https://vuejs.org/api/sfc-spec.html)

- [Vue.js SFC Specification](https://vuejs.org/api/sfc-spec.html)

- [Vue.js Composition API - Composables](https://vuejs.org/guide/reusability/composables.html)

## Reference - [Vue.js Scoped CSS - Deep Selectors](https://vuejs.org/api/sfc-css-features.html#deep-selectors)

- [Vue.js Scoped CSS - Deep Selectors](https://vuejs.org/api/sfc-css-features.html#deep-selectors)

- [Vue Loader Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html)

## Reference - [Vue.js Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css)

- [Vue.js Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css)

- [GitHub Issue: Scoped CSS not applied for programmatically added elements](https://github.com/vuejs/vue/issues/7649)

## Reference - [Vue.js Scoped CSS - Slotted Selectors](https://vuejs.org/api/sfc-css-features.html#slotted-selectors)

- [Vue.js Scoped CSS - Slotted Selectors](https://vuejs.org/api/sfc-css-features.html#slotted-selectors)

- [Vue.js Deep Selectors](https://vuejs.org/api/sfc-css-features.html#deep-selectors)

## Reference - [Vue.js Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)

- [Vue.js Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)

- [Vue.js ref()](https://vuejs.org/api/reactivity-core.html#ref)

- [Vue.js reactive()](https://vuejs.org/api/reactivity-core.html#reactive)

## Reference - [Vue Land FAQ - Forwarding Slots](https://vue-land.github.io/faq/forwarding-slots)

- [Vue Land FAQ - Forwarding Slots](https://vue-land.github.io/faq/forwarding-slots)

- [Vue.js Slots - Scoped Slots](https://vuejs.org/guide/components/slots.html#scoped-slots)

## Reference - [Vue.js Slots - Named Slots](https://vuejs.org/guide/components/slots.html#named-slots)

- [Vue.js Slots - Named Slots](https://vuejs.org/guide/components/slots.html#named-slots)

## Reference - [Vue.js Slots - Scoped Slots](https://vuejs.org/guide/components/slots.html#scoped-slots)

- [Vue.js Slots - Scoped Slots](https://vuejs.org/guide/components/slots.html#scoped-slots)

## Reference - [Vue.js Slots - Named Scoped Slots](https://vuejs.org/guide/components/slots.html#named-scoped-slots)

- [Vue.js Slots - Named Scoped Slots](https://vuejs.org/guide/components/slots.html#named-scoped-slots)

## Reference - [Vue.js Slots - Render Scope](https://vuejs.org/guide/components/slots.html#render-scope)

- [Vue.js Slots - Render Scope](https://vuejs.org/guide/components/slots.html#render-scope)

## Reference - [Vue.js Slots](https://vuejs.org/guide/components/slots.html)

- [Vue.js Slots](https://vuejs.org/guide/components/slots.html)

- [DeepScan - vue-misused-v-slot](https://deepscan.io/docs/rules/vue-misused-v-slot)

## Reference - [Vue.js SSR Guide - Hydration Mismatch](https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch)

- [Vue.js SSR Guide - Hydration Mismatch](https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch)

- [Nuxt Hydration Best Practices](https://nuxt.com/docs/guide/best-practices/hydration)

- [data-allow-mismatch RFC](https://github.com/vuejs/core/pull/9562)

// Fetch - works in both Node.js 18+ and browsers const response = await fetch('/api/data')

const response = await fetch('/api/data')

// app.js - Universal code uses API instead const config = await fetch('/api/config').then(r => r.json())

const config = await fetch('/api/config').then(r => r.json())

## Reference - [Vue.js SSR - Platform-Specific APIs](https://vuejs.org/guide/scaling-up/ssr.html#access-to-platform-specific-apis)

- [Vue.js SSR - Platform-Specific APIs](https://vuejs.org/guide/scaling-up/ssr.html#access-to-platform-specific-apis)

- [Nuxt ClientOnly Component](https://nuxt.com/docs/api/components/client-only)

- [MDN: Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)

## Reference - [Vue.js State Management - SSR Considerations](https://vuejs.org/guide/scaling-up/state-management.html#ssr-considerations)

- [Vue.js State Management - SSR Considerations](https://vuejs.org/guide/scaling-up/state-management.html#ssr-considerations)

- [Pinia SSR Guide](https://pinia.vuejs.org/ssr/)

- [Vue SSR Guide](https://vuejs.org/guide/scaling-up/ssr.html)

- [Vue.js Suspense Documentation](https://vuejs.org/guide/built-ins/suspense#error-handling)

- [Vue.js onErrorCaptured](https://vuejs.org/api/composition-api-lifecycle#onerrorcaptured)

- [Vue.js Suspense Documentation](https://vuejs.org/guide/built-ins/suspense)

- [Vue Issue #6638 - Suspense hydration](https://github.com/vuejs/core/issues/6638)

- [Vue Issue #7672 - defineAsyncComponent SSR](https://github.com/vuejs/core/issues/7672)

- [TanStack Query SSR Discussion](https://github.com/TanStack/query/discussions/4870)

- [Tailwind CSS Dynamic Class Names](https://tailwindcss.com/docs/content-configuration#dynamic-class-names)

- [Tailwind Safelist](https://tailwindcss.com/docs/content-configuration#safelisting-classes)

## Reference - [Vue.js SFC CSS Features - Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css)

- [Vue.js SFC CSS Features - Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css)

- [GitHub Issue #2047 - Scoped styles and teleport](https://github.com/vuejs/core/issues/2047)

## Reference - [Vue.js SSR - Teleports](https://vuejs.org/guide/scaling-up/ssr.html#teleports)

- [Vue.js SSR - Teleports](https://vuejs.org/guide/scaling-up/ssr.html#teleports)

- [Element Plus SSR Guide](https://element-plus.org/en-US/guide/ssr.html)

- [Nuxt ClientOnly Component](https://nuxt.com/docs/api/components/client-only)

## Reference - [Vue.js Teleport - Using with Vue-rendered Targets](https://vuejs.org/guide/built-ins/teleport.html#using-with-vue-rendered-targets)

- [Vue.js Teleport - Using with Vue-rendered Targets](https://vuejs.org/guide/built-ins/teleport.html#using-with-vue-rendered-targets)

- [Vue.js Teleport - Deferred Teleport](https://vuejs.org/guide/built-ins/teleport.html#deferred-teleport)

## Reference - [Vue.js Template Syntax - Using JavaScript Expressions](https://vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions)

- [Vue.js Template Syntax - Using JavaScript Expressions](https://vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions)

- [Vue.js Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)

// BAD: Async operation in template async function fetchUserName() {   const res = await fetch('/api/user')  // Side effect!

async function fetchUserName() {   const res = await fetch('/api/user')  // Side effect!   return (await res.json()).name

const res = await fetch('/api/user')  // Side effect!

// Fetch data in lifecycle hook onMounted(async () => {   const res = await fetch('/api/user')

onMounted(async () => {   const res = await fetch('/api/user')   userName.value = (await res.json()).name

const res = await fetch('/api/user')

## Reference - [Vue.js Template Syntax - Calling Functions](https://vuejs.org/guide/essentials/template-syntax.html#calling-functions)

- [Vue.js Template Syntax - Calling Functions](https://vuejs.org/guide/essentials/template-syntax.html#calling-functions)

- [Vue.js Computed Properties](https://vuejs.org/guide/essentials/computed.html)

## Reference - [Vue.js Template Refs](https://vuejs.org/guide/essentials/template-refs.html)

- [Vue.js Template Refs](https://vuejs.org/guide/essentials/template-refs.html)

## Reference - [Vue.js Reactivity Fundamentals - Caveat when Unwrapping in Templates](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-when-unwrapping-in-templates)

- [Vue.js Reactivity Fundamentals - Caveat when Unwrapping in Templates](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-when-unwrapping-in-templates)

## Reference - [Vue.js Template Refs - Refs inside v-for](https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for)

- [Vue.js Template Refs - Refs inside v-for](https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for)

## Reference - [Vue.js Form Input Bindings - Multiline text](https://vuejs.org/guide/essentials/forms.html#multiline-text)

- [Vue.js Form Input Bindings - Multiline text](https://vuejs.org/guide/essentials/forms.html#multiline-text)

## Reference - [Vue.js TransitionGroup Move Transitions](https://vuejs.org/guide/built-ins/transition-group.html#move-transitions)

- [Vue.js TransitionGroup Move Transitions](https://vuejs.org/guide/built-ins/transition-group.html#move-transitions)

- [MDN CSS Transform - Formal Definition](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#formal_definition)

## Reference - [Vue.js TransitionGroup Move Transitions](https://vuejs.org/guide/built-ins/transition-group.html#move-transitions)

- [Vue.js TransitionGroup Move Transitions](https://vuejs.org/guide/built-ins/transition-group.html#move-transitions)

- [FLIP Animation Technique](https://aerotwist.com/blog/flip-your-animations/)

## Reference - [Vue 3 Migration Guide - TransitionGroup Root Element](https://v3-migration.vuejs.org/breaking-changes/transition-group.html)

- [Vue 3 Migration Guide - TransitionGroup Root Element](https://v3-migration.vuejs.org/breaking-changes/transition-group.html)

- [Vue.js TransitionGroup](https://vuejs.org/guide/built-ins/transition-group.html)

## Reference - [Vue.js Transition - JavaScript Hooks](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks)

- [Vue.js Transition - JavaScript Hooks](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks)

- [GSAP with Vue](https://gsap.com/resources/vue/)

## Reference - [Vue.js Transition - Nested Transitions](https://vuejs.org/guide/built-ins/transition.html#nested-transitions-and-explicit-transition-durations)

- [Vue.js Transition - Nested Transitions](https://vuejs.org/guide/built-ins/transition.html#nested-transitions-and-explicit-transition-durations)

## Reference - [Vue.js Reusable Transitions](https://vuejs.org/guide/built-ins/transition.html#reusable-transitions)

- [Vue.js Reusable Transitions](https://vuejs.org/guide/built-ins/transition.html#reusable-transitions)

- [Vue.js Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css)

## Reference - [Vue Router Transitions](https://router.vuejs.org/guide/advanced/transitions.html)

- [Vue Router Transitions](https://router.vuejs.org/guide/advanced/transitions.html)

- [Vue.js Transition appear](https://vuejs.org/guide/built-ins/transition.html#transition-on-appear)

## Reference - [Vue.js Transition Documentation](https://vuejs.org/guide/built-ins/transition.html#css-based-transitions)

- [Vue.js Transition Documentation](https://vuejs.org/guide/built-ins/transition.html#css-based-transitions)

onMounted(() => {       fetch('/api/data', { signal: abortController.signal })

fetch('/api/data', { signal: abortController.signal })

## Reference - [Vue.js GitHub Issue #6260](https://github.com/vuejs/core/issues/6260)

- [Vue.js GitHub Issue #6260](https://github.com/vuejs/core/issues/6260)

- [Vue.js Transition](https://vuejs.org/guide/built-ins/transition.html)

- [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)

## Reference - [Vue.js Props - Boolean Casting](https://vuejs.org/guide/components/props.html#boolean-casting)

- [Vue.js Props - Boolean Casting](https://vuejs.org/guide/components/props.html#boolean-casting)

- [GitHub Issue: Boolean props default to false](https://github.com/vuejs/core/issues/8576)

- [TypeScript Vue 3 Props](https://madewithlove.com/blog/typescript-vue-3-and-strongly-typed-props/)

## Reference - [Vue.js TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html)

- [Vue.js TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html)

- [GitHub Issue: defineProps with imported interfaces](https://github.com/vuejs/core/issues/8612)

- [GitHub Issue: Union types in defineProps](https://github.com/vuejs/core/issues/5804)

## Reference - [Vue.js TypeScript with Composition API - Event Handlers](https://vuejs.org/guide/typescript/composition-api.html#typing-event-handlers)

- [Vue.js TypeScript with Composition API - Event Handlers](https://vuejs.org/guide/typescript/composition-api.html#typing-event-handlers)

- [MDN Event Reference](https://developer.mozilla.org/en-US/docs/Web/Events)

- [TypeScript DOM Types](https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts)

## Reference - [Vue.js TypeScript with Composition API - Typing reactive()](https://vuejs.org/guide/typescript/composition-api.html#typing-reactive)

- [Vue.js TypeScript with Composition API - Typing reactive()](https://vuejs.org/guide/typescript/composition-api.html#typing-reactive)

- [GitHub Issue: ref with generic type](https://github.com/vuejs/core/discussions/9564)

- [Vue TypeScript Caveats Gist](https://gist.github.com/LinusBorg/e041ff635994b50b7cec9383c3a067f1)

- [Vue.js Reactivity in Depth - Reducing Reactivity Overhead](https://vuejs.org/guide/extras/reactivity-in-depth.html#reducing-reactivity-overhead-for-large-immutable-structures)

- [Vue.js API - shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)

- [Vue.js API - markRaw](https://vuejs.org/api/reactivity-advanced.html#markraw)

## Reference - [Vue.js TypeScript with Composition API - Template Refs](https://vuejs.org/guide/typescript/composition-api.html#typing-template-refs)

- [Vue.js TypeScript with Composition API - Template Refs](https://vuejs.org/guide/typescript/composition-api.html#typing-template-refs)

- [Vue.js Template Refs](https://vuejs.org/guide/essentials/template-refs.html)

- [Vue.js TypeScript Overview - TypeScript in Templates](https://vuejs.org/guide/typescript/overview.html#typescript-in-templates)

- [Vue.js TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html)

## Reference - [Vue.js TypeScript with Composition API - Default Props](https://vuejs.org/guide/typescript/composition-api.html#props-default-values)

- [Vue.js TypeScript with Composition API - Default Props](https://vuejs.org/guide/typescript/composition-api.html#props-default-values)

- [Vue RFC - Reactive Props Destructure](https://github.com/vuejs/rfcs/discussions/502)

## Reference - [Vue 3 Migration - emits Option](https://v3-migration.vuejs.org/breaking-changes/emits-option)

- [Vue 3 Migration - emits Option](https://v3-migration.vuejs.org/breaking-changes/emits-option)

- [Vue.js Component Events](https://vuejs.org/guide/components/events.html)

- [Vue.js Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)

## Reference - [Vue.js Template Refs - Composition API](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs)

- [Vue.js Template Refs - Composition API](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs)

- [Vue 3.5 Release Notes](https://blog.vuejs.org/posts/vue-3-5)

## Reference - [Vue.js Conditional Rendering - v-else](https://vuejs.org/guide/essentials/conditional.html#v-else)

- [Vue.js Conditional Rendering - v-else](https://vuejs.org/guide/essentials/conditional.html#v-else)

## Reference - [Vue.js List Rendering - v-for with Components](https://vuejs.org/guide/essentials/list.html#v-for-with-a-component)

- [Vue.js List Rendering - v-for with Components](https://vuejs.org/guide/essentials/list.html#v-for-with-a-component)

## Reference - [Vue.js List Rendering - Displaying Filtered/Sorted Results](https://vuejs.org/guide/essentials/list.html#displaying-filtered-sorted-results)

- [Vue.js List Rendering - Displaying Filtered/Sorted Results](https://vuejs.org/guide/essentials/list.html#displaying-filtered-sorted-results)

## Reference - [Vue.js List Rendering - Key](https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key)

- [Vue.js List Rendering - Key](https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key)

- [Vue 3 Migration Guide - Key on Template](https://v3-migration.vuejs.org/breaking-changes/key-attribute)

## Reference - [Vue.js List Rendering - v-for with a Range](https://vuejs.org/guide/essentials/list.html#v-for-with-a-range)

- [Vue.js List Rendering - v-for with a Range](https://vuejs.org/guide/essentials/list.html#v-for-with-a-range)

## Reference - [Vue.js Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)

- [Vue.js Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)

- [MDN - Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)

## Reference - [Vue.js Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)

- [Vue.js Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)

## Reference - [Vue.js Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)

- [Vue.js Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)

## Reference - [Vue.js Form Input Bindings - .number](https://vuejs.org/guide/essentials/forms.html#number)

- [Vue.js Form Input Bindings - .number](https://vuejs.org/guide/essentials/forms.html#number)

## Reference - [Vue.js Conditional Rendering - v-show](https://vuejs.org/guide/essentials/conditional.html#v-show)

- [Vue.js Conditional Rendering - v-show](https://vuejs.org/guide/essentials/conditional.html#v-show)

watch(searchQuery, async (query) => {   if (query) {     const response = await fetch(`/api/search?q=${query}`)

if (query) {     const response = await fetch(`/api/search?q=${query}`)     results.value = await response.json()  // May overwrite newer results!

const response = await fetch(`/api/search?q=${query}`)

loading.value = true   try {     const response = await fetch(`/api/search?q=${query}`, {

try {     const response = await fetch(`/api/search?q=${query}`, {       signal: controller.signal

const response = await fetch(`/api/search?q=${query}`, {

fetch(`/api/users/${newId}`, { signal: controller.signal })

## Reference - [Vue.js Watchers - Callback Flush Timing](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing)

- [Vue.js Watchers - Callback Flush Timing](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing)

- [Vue.js Watchers - Side Effect Cleanup](https://vuejs.org/api/reactivity-core.html#watcheffect)

// BAD: Watcher in Promise callback fetch('/api/config').then(() => {

fetch('/api/config').then(() => {

## Reference - [Vue.js Watchers - Stopping a Watcher](https://vuejs.org/guide/essentials/watchers.html#stopping-a-watcher)

- [Vue.js Watchers - Stopping a Watcher](https://vuejs.org/guide/essentials/watchers.html#stopping-a-watcher)

## Reference - [Vue.js Watchers - Deep Watchers](https://vuejs.org/guide/essentials/watchers.html#deep-watchers)

- [Vue.js Watchers - Deep Watchers](https://vuejs.org/guide/essentials/watchers.html#deep-watchers)

## Reference - [Vue.js Watchers - Callback Flush Timing](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing)

- [Vue.js Watchers - Callback Flush Timing](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing)

## Reference - [Vue.js Watchers - Watch Source Types](https://vuejs.org/guide/essentials/watchers.html#watch-source-types)

- [Vue.js Watchers - Watch Source Types](https://vuejs.org/guide/essentials/watchers.html#watch-source-types)

// BAD: includeDetails is accessed after await - NOT TRACKED! watchEffect(async () => {   const response = await fetch(`/api/users/${userId.value}`)

watchEffect(async () => {   const response = await fetch(`/api/users/${userId.value}`)   const data = await response.json()

const response = await fetch(`/api/users/${userId.value}`)

// Now these are tracked   const response = await fetch(`/api/users/${id}`)

const response = await fetch(`/api/users/${id}`)

[userId, includeDetails],   async ([id, withDetails]) => {     const response = await fetch(`/api/users/${id}`)

async ([id, withDetails]) => {     const response = await fetch(`/api/users/${id}`)     const data = await response.json()

const response = await fetch(`/api/users/${id}`)

// Now safe to do async work   const response = await fetch(

const response = await fetch(

## Reference - [Vue.js Watchers - watchEffect](https://vuejs.org/guide/essentials/watchers.html#watcheffect)

- [Vue.js Watchers - watchEffect](https://vuejs.org/guide/essentials/watchers.html#watcheffect)

- [Vue.js API - watchEffect](https://vuejs.org/api/reactivity-core.html#watcheffect)

## Reference - [Vue.js Watchers - Callback Flush Timing](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing)

- [Vue.js Watchers - Callback Flush Timing](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing)

- [Vue.js watchEffect API](https://vuejs.org/api/reactivity-core.html#watcheffect)

## Reference - [Vue.js JSX and TSX](https://vuejs.org/guide/extras/render-function.html#jsx-tsx)

- [Vue.js JSX and TSX](https://vuejs.org/guide/extras/render-function.html#jsx-tsx)

## Reference - [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)

- [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)

- [Vue.js Options Lifecycle](https://vuejs.org/api/options-lifecycle.html)

// Arrow functions ARE fine for callbacks INSIDE methods     fetchData() {       fetch('/api/data')

fetchData() {       fetch('/api/data')         .then(response => response.json())

fetch('/api/data')

## Reference - [Vue.js Methods - Avoid Arrow Functions](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#methods)

- [Vue.js Methods - Avoid Arrow Functions](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#methods)

## Reference - [Vue.js Reactivity Fundamentals - Stateful Methods](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#stateful-methods)

- [Vue.js Reactivity Fundamentals - Stateful Methods](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#stateful-methods)

- [Vue.js TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html#caveats)

- [TypeScript 4.7 Release Notes](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/)

- [Vue.js TypeScript with Options API - Typing Computed Properties](https://vuejs.org/guide/typescript/options-api.html#typing-computed-properties)

- [Vue.js TypeScript with Options API - Typing Component Props](https://vuejs.org/guide/typescript/options-api.html#typing-component-props)

- [Vue.js Props Documentation](https://vuejs.org/guide/components/props.html)

- [Vue.js Provide/Inject](https://vuejs.org/guide/components/provide-inject.html)

- [GitHub Issue: Add type inference to Options API provide/inject](https://github.com/vuejs/core/issues/3031)

- [Vue.js TypeScript with Options API - Typing Event Handlers](https://vuejs.org/guide/typescript/options-api.html#typing-event-handlers)

- [MDN Event Interface](https://developer.mozilla.org/en-US/docs/Web/API/Event)

- [TypeScript DOM Types](https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts)

- [Vue.js TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)

- [Vue.js Using Vue with TypeScript](https://vuejs.org/guide/typescript/overview.html)

- [Vue.js TypeScript Overview - tsconfig.json](https://vuejs.org/guide/typescript/overview.html#configuring-tsconfig-json)

- [Vue.js TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)

- [TypeScript strict Mode](https://www.typescriptlang.org/tsconfig#strict)

export function fetchUser() {   return fetch('/api/user', {

return fetch('/api/user', {

return fetch('/api/user', {

## Reference - [Vue Land FAQ - No Active Pinia](https://vue-land.github.io/faq/no-active-pinia)

- [Vue Land FAQ - No Active Pinia](https://vue-land.github.io/faq/no-active-pinia)

- [Pinia - Using a Store Outside of a Component](https://pinia.vuejs.org/core-concepts/outside-component-usage.html)

- [Pinia - Getting Started](https://pinia.vuejs.org/getting-started.html)

async function login(credentials) {     const response = await fetch('/api/login', {

const response = await fetch('/api/login', {

// Actions   async function login(credentials) {     const response = await fetch('/api/login', {

async function login(credentials) {     const response = await fetch('/api/login', {       method: 'POST',

const response = await fetch('/api/login', {

## Reference - [Pinia - Setup Stores](https://pinia.vuejs.org/core-concepts/#setup-stores)

- [Pinia - Setup Stores](https://pinia.vuejs.org/core-concepts/#setup-stores)

- [Pinia - SSR](https://pinia.vuejs.org/ssr/)

- [Mastering Pinia - Common Mistakes](https://masteringpinia.com/blog/top-5-mistakes-to-avoid-when-using-pinia)

## Reference - [Pinia - Destructuring from a Store](https://pinia.vuejs.org/core-concepts/#destructuring-from-a-store)

- [Pinia - Destructuring from a Store](https://pinia.vuejs.org/core-concepts/#destructuring-from-a-store)

- [Pinia API - storeToRefs](https://pinia.vuejs.org/api/modules/pinia.html#storetorefs)

## Reference - [VueUse - useRouteQuery](https://vueuse.org/router/useRouteQuery/)

- [VueUse - useRouteQuery](https://vueuse.org/router/useRouteQuery/)

- [Vue Router - Query Parameters](https://router.vuejs.org/guide/essentials/passing-props.html#passing-props-to-route-components)

- [Mastering Pinia - URL State](https://masteringpinia.com/blog/top-5-mistakes-to-avoid-when-using-pinia)

## Reference - [Vue.js - State Management](https://vuejs.org/guide/scaling-up/state-management.html)

- [Vue.js - State Management](https://vuejs.org/guide/scaling-up/state-management.html)

- [Pinia Documentation](https://pinia.vuejs.org/)

- [Pinia vs Vuex](https://pinia.vuejs.org/introduction.html#comparison-with-vuex)

## Reference - [Vue.js State Management - Tip on Method Binding](https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api)

- [Vue.js State Management - Tip on Method Binding](https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api)

- [MDN - this in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)

## Reference - [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)

- [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)

- [Vue Router Per-Route Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard)

## Reference - [Vue Router In-Component Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards)

- [Vue Router In-Component Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards)

- [Vue Router Navigation Resolution Flow](https://router.vuejs.org/guide/advanced/navigation-guards.html#the-full-navigation-resolution-flow)

## Reference - [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)

- [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)

- [Vue Router Navigation Failures](https://router.vuejs.org/guide/advanced/navigation-failures.html)

## Reference - [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)

- [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)

- [Vue Router Route Meta Fields](https://router.vuejs.org/guide/advanced/meta.html)

## Reference - [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)

- [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)

- [RFC: Remove next() from Navigation Guards](https://github.com/vuejs/rfcs/discussions/302)

## Reference - [Vue Router Dynamic Route Matching](https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes)

- [Vue Router Dynamic Route Matching](https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes)

- [Vue School: Reacting to Param Changes](https://vueschool.io/lessons/reacting-to-param-changes)

## Reference - [Vue.js Routing Documentation](https://vuejs.org/guide/scaling-up/routing.html)

- [Vue.js Routing Documentation](https://vuejs.org/guide/scaling-up/routing.html)

- [Vue Router Official Library](https://router.vuejs.org/)

## Reference - [Vue.js Routing Guide](https://vuejs.org/guide/scaling-up/routing.html)

- [Vue.js Routing Guide](https://vuejs.org/guide/scaling-up/routing.html)

- [Vue Router Documentation](https://router.vuejs.org/)

- [Vue Router Getting Started](https://router.vuejs.org/guide/)

- [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing)

- [Vue Test Utils](https://test-utils.vuejs.org/)

- [Vitest Documentation](https://vitest.dev/)

- [Playwright Documentation](https://playwright.dev/)

- [Vue Test Utils - Asynchronous Behavior](https://test-utils.vuejs.org/guide/advanced/async-suspense)

- [Vue.js Async Components Documentation](https://vuejs.org/guide/components/async)

## Reference - [Vue Test Utils - Teleport](https://test-utils.vuejs.org/guide/advanced/teleport)

- [Vue Test Utils - Teleport](https://test-utils.vuejs.org/guide/advanced/teleport)

- [Vue Test Utils - Stubs](https://test-utils.vuejs.org/guide/advanced/stubs-shallow-mount)

## Reference - [Vue Test Utils - Asynchronous Behavior](https://test-utils.vuejs.org/guide/advanced/async-suspense)

- [Vue Test Utils - Asynchronous Behavior](https://test-utils.vuejs.org/guide/advanced/async-suspense)

- [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing)

[Credential-related source omitted]

[Credential-related source omitted]

## Reference - [Vue.js Testing - Component Testing](https://vuejs.org/guide/scaling-up/testing#component-testing)

- [Vue.js Testing - Component Testing](https://vuejs.org/guide/scaling-up/testing#component-testing)

- [Vitest Browser Mode](https://vitest.dev/guide/browser.html)

## Reference - [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing)

- [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing)

- [Vue Test Utils - Testing Philosophy](https://test-utils.vuejs.org/guide/)

- [Testing Library Guiding Principles](https://testing-library.com/docs/guiding-principles)

## Reference - [Vue.js Testing Guide - Testing Composables](https://vuejs.org/guide/scaling-up/testing#testing-composables)

- [Vue.js Testing Guide - Testing Composables](https://vuejs.org/guide/scaling-up/testing#testing-composables)

- [Vue Test Utils - Mounting Components](https://test-utils.vuejs.org/guide/)

use: {     // Base URL for navigation     baseURL: 'http://localhost:5173',

// Base URL for navigation     baseURL: 'http://localhost:5173',     // Capture trace on first retry

baseURL: 'http://localhost:5173',

webServer: {     command: 'npm run dev',     url: 'http://localhost:5173',

command: 'npm run dev',     url: 'http://localhost:5173',     reuseExistingServer: !process.env.CI,

url: 'http://localhost:5173',

## Reference - [Playwright Documentation](https://playwright.dev/)

- [Playwright Documentation](https://playwright.dev/)

- [Vue.js E2E Testing Recommendations](https://vuejs.org/guide/scaling-up/testing#e2e-testing)

- [Playwright Best Practices](https://playwright.dev/docs/best-practices)

## Reference - [Vue.js Testing Guide - What Not to Test](https://vuejs.org/guide/scaling-up/testing)

- [Vue.js Testing Guide - What Not to Test](https://vuejs.org/guide/scaling-up/testing)

- [Effective Snapshot Testing](https://kentcdodds.com/blog/effective-snapshot-testing)

- [Vitest Snapshot Testing](https://vitest.dev/guide/snapshot.html)

## Reference - [Pinia Testing Guide](https://pinia.vuejs.org/cookbook/testing.html)

- [Pinia Testing Guide](https://pinia.vuejs.org/cookbook/testing.html)

- [@pinia/testing Package](https://www.npmjs.com/package/@pinia/testing)

- [Vue Test Utils - Plugins](https://test-utils.vuejs.org/guide/advanced/plugins.html)

## Reference - [Vue Test Utils - Async Suspense](https://test-utils.vuejs.org/guide/advanced/async-suspense)

- [Vue Test Utils - Async Suspense](https://test-utils.vuejs.org/guide/advanced/async-suspense)

- [Vue.js Suspense Documentation](https://vuejs.org/guide/built-ins/suspense.html)

- [Testing Library Vue Suspense Issue](https://github.com/testing-library/vue-testing-library/issues/230)

## Reference - [Vitest Documentation](https://vitest.dev/)

- [Vitest Documentation](https://vitest.dev/)

- [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing)

- [Vue Test Utils](https://test-utils.vuejs.org/)