ts(2304): Cannot find name ...

[creage]

I have a simple .vue file written in Vue3

<template>
    <div class="home">
        <img alt="Vue logo" :src="logo" />
        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
    data() {
        return {
            logo: './logo.png'
        };
    }
})
export default class Home extends Vue {}
</script>

But Volar fails to locate property from my data:

[creage]

My bad, sorry. Converting data into class props fixes the issue.

[creage]

But then - what about Composition API?

Here is the example from the Vue3 documentation, with lang="ts" in it's <script> tag, and it has same issue(s):

<!-- MyBook.vue -->
<template>
    <div>{{ readersNumber }} {{ book.title }}</div>
</template>

<script lang="ts">
import { ref, reactive } from 'vue';

export default {
    setup() {
        const readersNumber = ref(0);
        const book = reactive({ title: 'Vue 3 Guide' });

        // expose to template
        return {
            readersNumber,
            book
        };
    }
};
</script>

[creage]

We should use defineComponent for full TS support.

[johnsoncodehk]

For class base component, you can see #21 (comment).