this.$refs.x / ref.value is undefined or null before mount Vue Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Vue: TypeError: Cannot read properties of undefined (reading 'focus') — template ref accessed before the component is mounted

A template ref (ref="input") is read before the element exists (setup, created, or before v-if renders it).

Exact message you may see TypeError: Cannot read properties of undefined (reading 'focus') template refCannot read properties of null (reading 'focus') ref valuethis.$refs.input is undefined Vue[Vue warn]: Unhandled error during execution of mounted hook TypeError: Cannot read properties of null (reading 'focus')Vue template ref null before mount
Explore the map of this error Full error map →
Seen on: Vue

Meaning

Template refs are populated after mount. Use them in onMounted/nextTick, check for null (inputRef.value?.focus()), and remember refs inside v-if/v-for appear later. In <script setup> declare const input = ref(null) with the same name as the ref attribute; with v-for refs are arrays.

Common causes

  • Accessing refs in setup()/created
  • Name mismatch between ref attribute and variable
  • Element under v-if not rendered yet
  • v-for refs are arrays
  • Child component refs undefined until mounted

⚡ Quick fix

  1. Use onMounted(() => input.value?.focus())
  2. Match const input = ref(null) to ref="input"
  3. await nextTick() after toggling v-if

Detailed fix by platform

Vue

  1. <input ref="input"><script setup>const input = ref(null); onMounted(() => input.value?.focus());</script>

How to diagnose

  1. Timing — After mount?
  2. Name — Matches?
  3. v-if — Rendered?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

[Vue warn]: onMounted is called when there is no active component instance — Vue: [Vue warn]: onMounted is called when there is no active component instance to be associated with (Vue)[Vue warn]: onMounted…[Vue warn]: Unhandled error during execution of setup/mounted hook — Vue: [Vue warn]: Unhandled error during execution of mounted hook / TypeError: Cannot read properties of undefined (reading 'x') (Vue)[Vue warn]: Unhandled…Duplicate attribute (Vue template) — Vue: [plugin:vite:vue] Duplicate attribute. / [vue/no-duplicate-attributes] Duplicate attribute 'class' (Vue)Duplicate attribute (…ESLint Parsing error in .vue files — ESLint: Parsing error: Unexpected token < / Parsing error: '>' expected (vue-eslint-parser not configured) (Vue)ESLint Parsing error …Property was accessed during render but is not defined — Vue: [Vue warn]: Property "x" was accessed during render but is not defined on instance (Vue)Property was accessed…refs on function components — Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? (React)refs on function comp…Vite: Failed to parse source / Unknown file extension ".vue" — Vite/Vue: [plugin:vite:import-analysis] Failed to parse source for import analysis — you may need to install appropriate plugins to handle the .vue file format (Vue)Vite: Failed to parse…vue-loader was used without the corresponding plugin — Webpack: Error: [vue-loader] vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. (Vue)vue-loader was used w…this.$ref…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.