Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
In Vue 3 / Typescript, I am getting the following error:
"Cannot find name", when referencing a data variable into the ... area.
How can I solve this?
Please see the attached screenshot.
Many thanks in advance.
–
–
–
I had a similar issue when I added lang="ts" to the vue file as I'm new to Vue 3 and Typescript. I resolved it by ensuring the following:
export default
export default defineComponent({
in your .vue file.
Ensure you add the import.
import { defineComponent }
Your data should reside in the setup as well.
setup () {
return {
loader: false,
error: false,
firstTime: false
–
I also encountered the same bug, the code inference error, that was caused by the code loop reference.
I create a route-array-contant in route.ts, such as the following:
import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
import Layout from "../layout/index";
export const NaviHeaderRoutes: RouteRecordRaw[] = [
path: "/foo",
name: "FOO",
redirect: "/foo/index",
component: Layout,
children: [
path: "index",
name: "foolIndex",
component: () => import("../views/foo/index")
path: "/bar",
name: "BAR",
redirect: "/bar/index",
component: Layout,
children: [
path: "index",
name: "barIndex",
component: () => import("../views/bar/index")
const routes: RouteRecordRaw[] = [
...NaviHeaderRoutes
const router = createRouter({
history: createWebHistory(),
routes
export default router;
then I use NaviHeaderRoutes in the child component of Layout.vue
// layout.vue
<template>
<NaviHeader></NaviHeader>
<!-- error TS2304 cannot find name in template variable -->
<main :class="testClass">
<RouterView />
</main>
</template>
<sciprt lang="ts" setup>
const testClass = ref();
</script>
// naviheader
<template>
<header>
<!--error TS2304 cannot find name in template variable-->
<span>{{title}}</span>
<span v-for="(hitem in NaviHeaderRoutes)" :key="hitem.name">
<router-link :to="hitem.path">{{hitem.name}}</route-link>
</span>
<!--error TS2304 cannot find name in template variable-->
<div>{{username}}</div>
</header>
</template>
<script lang="ts" setup>
import {NaviHeaderRoutes} from '@/router'
const title = ref('')
const username = ref('')
</script>
Fix it is simple, try to set route's component lately
export const NaviHeaderRoutes: RouteRecordRaw[] = [
path: "/foo",
name: "FOO",
redirect: "/foo/index",
// component: Layout,
// ....
const routes: RouteRecordRaw[] = [
...NaviHeaderRoutes.map((x) => {
x.component = Layout;
return x;
The Composition API helps greatly with this issue. There does not seem to be a clear path to deal with the problem in the Options API.
One way to deal with the issue in the Options API:
Create a MyComponent.d.ts file that corresponds to the component that you are working with and add the following in that file:
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
myTroublesomeVariable: boolean // change here
I had same issue.
Couldn't find a solution after inspecting VSCode/TS and Volar.
Created tiny reproduction (wanted to post it in Discord):
<template>
<input v-model="email" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const email = ref('')
</script>
After I saved this file as Test.vue the error in other files disappeared. Sorry, but I don't know why...
I don't know if you still have this bug, but, I also had this. I have fix it by fixing a silent TS bug.
When I have fix this bug, everything was working again.
EDIT: I found the bug I had. I had put an enum in a *.d.ts file and I was using this enum in the file that gave me the same error as you. The problem is that an enum can't be in a *.d.ts file because it is not compiled in JS afterwards and you lose the enum's value.
By fixing this bug, I didn't have the errors displayed anymore. What I mean by this is not that there is a simple solution to your problem, but that maybe like me, you have a silent bug that hides and causes these errors!
–
–
–
Use defineComponent instead of export default class ParentSupervise extends Vue.
Write like this:
<template>
<div class="hello">
<h1>{{ book.title }}</h1>
</template>
<script lang="ts">
import { reactive, ref, defineComponent } from "vue";
interface Book {
title: string;
const HelloWorld = defineComponent({
data() {
return {
boardFields: "燕儿",
setup() {
let name = ref("燕");
const book = reactive({ title: "Vue 3 Guide" }) as Book;
debugger;
console.log("name :>> ", name);
console.log("book :>> ", book);
// 暴露给 template
return {
book,
name,
export default HelloWorld;
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
–
You are missing setup within <script lang="ts"> so it should be:
<script setup lang="ts">
From the docs:
When using <script setup>, any top-level bindings (including variables, function declarations, and imports) declared inside are directly usable in the template (...)
https://v3.vuejs.org/api/sfc-script-setup.html#top-level-bindings-are-exposed-to-template
–
–
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
