vue Errors
20 error patterns
Cannot read property of undefined in setup()
Cannot read propert(y|ies) of undefined.*setup
- •Initialize reactive refs before accessing nested properties
- •Add optional chaining (?.) when accessing potentially undefined objects
Computed property getter returns undefined
computed property.*getter.*undefined
- •Ensure computed getter always returns a value
- •Check that reactive dependencies are initialized before computed runs
Direct prop mutation warning
Avoid mutating a prop directly
- •Use a local data/ref copy of the prop instead of mutating directly
- •Emit an event to let the parent update the prop value
Template references undefined property
Property.*was accessed during render but is not defined
- •Declare the property in setup() return or data()
- •Check for typos in template variable names
v-model used directly on prop
v-model.*cannot be used on a prop
- •Create a computed with get/set that emits update event
- •Use defineModel() macro in Vue 3.4+
Reactive ref accessed without .value
Ref.*is not.*function
- •Access ref value with .value in script (auto-unwrapped in template)
- •Check if you're passing a ref where a raw value is expected
Vue Router duplicate navigation error
NavigationDuplicated|Avoided redundant navigation
- •Add .catch(() => {}) to router.push() calls
- •Check if current route matches target before navigating
Navigation guard blocking route change
navigation guard.*error|navigation.*aborted
- •Ensure every code path in beforeEach calls next()
- •Return true/false or call next() — never leave guard hanging
Pinia store used outside setup or without active instance
\[pinia\].*store.*already.*disposed|getActivePinia.*was called with no active Pinia
- •Call useStore() inside setup() or a composable called from setup()
- •Ensure createPinia() is installed on the app before using stores
Pinia store action error or storeToRefs misuse
\[pinia\].*action.*rejected|storeToRefs.*not a store
- •Wrap async store actions in try/catch for error handling
- •Pass the store instance (not destructured) to storeToRefs()
SSR hydration mismatch
Hydration.*mismatch|hydrat(ion|e).*expected.*but received
- •Wrap browser-only code in onMounted() or <ClientOnly>
- •Ensure server and client render identical initial HTML
Component resolved to undefined in template
Invalid VNode type.*undefined|component.*resolved to undefined
- •Check component import path and ensure it's properly exported
- •Register the component in components option or use defineAsyncComponent()
Infinite reactivity loop detected
Maximum recursive updates exceeded
- •Avoid modifying reactive state inside watch callbacks that watch the same state
- •Use watchEffect with explicit dependencies instead of deep watchers
Provide/inject dependency not found
inject.*not found|No provider found
- •Ensure provide() is called in an ancestor component
- •Use a default value as second argument to inject()
Invalid watch source in Composition API
watch.*is not a function|watch source.*invalid
- •Pass a ref, reactive object, or getter function as watch source
- •Wrap plain values in () => value getter function
Teleport target element missing from DOM
Teleport target.*not found|Failed to locate Teleport target
- •Ensure the target element exists before the Teleport component mounts
- •Use defer prop on Teleport or move target element earlier in DOM
Compiler macros used without script setup
defineProps.*is not defined|defineEmits.*is not defined
- •Use <script setup> instead of regular <script> for compiler macros
- •Import defineProps/defineEmits from 'vue' if not using script setup
toRef/toRefs called on non-reactive object
toRef.*expects a reactive object|toRefs.*not reactive
- •Pass a reactive() object to toRefs(), not a plain object or ref
- •Use computed() instead if you need a derived value from a ref
Async component without Suspense boundary
Suspense.*is an experimental feature|async setup.*without Suspense
- •Wrap async components with <Suspense> and provide #fallback slot
- •Move async logic from setup() to onMounted() if Suspense isn't needed
ShallowRef not triggering reactivity on deep change
shallowRef.*not triggering|triggerRef.*needed
- •Call triggerRef(myRef) after mutating nested properties of a shallowRef
- •Replace the entire value: myRef.value = {...myRef.value, updated: true}