Vue3 / typescript accessing properties - vue.js

Question

I am trying to include a dynamic route component in a Vue3 application using axios to connect to a Django API but instead I am getting the below mistakes. I am using Vite.dev. I follow the docs to use create method but i am a little lost in documents and examples.
first errors:
src/views/Page.vue:27:11 - error TS2339: Property 'page' does not exist on type '{ getPage(pageSlug: any): Promise<void>; }'.
27 this.page = response.data
~~~
src/views/Page.vue:35:14 - error TS2339: Property 'getPage' does not exist on type '{ name: string; components: { PageComponent: { props: string[]; }; }; data(): { page: {}; }; methods: { getPage(pageSlug: any): Promise<void>; }; created(): Promise<void>; }'.
35 await this.getPage(pageSlug)
~~~~~~~
src/views/Page.vue:36:8 - error TS2339: Property '$watch' does not exist on type '{ name: string; components: { PageComponent: { props: string[]; }; }; data(): { page: {}; }; methods: { getPage(pageSlug: any): Promise<void>; }; created(): Promise<void>; }'.
36 this.$watch (() => this.route.params, this.getPage())
~~~~~
src/views/Page.vue:36:27 - error TS2339: Property 'route' does not exist on type '{ name: string; components: { PageComponent: { props: string[]; }; }; data(): { page: {}; }; methods: { getPage(pageSlug: any): Promise<void>; }; created(): Promise<void>; }'.
36 this.$watch (() => this.route.params, this.getPage())
~~~~~
src/views/Page.vue:36:46 - error TS2339: Property 'getPage' does not exist on type '{ name: string; components: { PageComponent: { props: string[]; }; }; data(): { page: {}; }; methods: { getPage(pageSlug: any): Promise<void>; }; created(): Promise<void>; }'.
36 this.$watch (() => this.route.params, this.getPage()) ~~~~~~~
Found 5 errors.
I have edited my Page.vue script like below but does not help me to build in production
<template>
...
<PageComponent :page="page" />
....
</template>
<script lang=ts>
export default {
name: 'Page',
components: {
PageComponent
},
data() {
return {
page: {}
}
},
methods: {
async getPage(pageSlug:any) {
let page = {}
await axios
.get(`/api/v1/pages/${pageSlug}/`)
.then(response => {
console.log(response.data)
this.page = response.data
})
},
},
async created() {
const route = useRoute()
const pageSlug = route.params.slug
await this.getPage(pageSlug)
this.$watch (() => this.route.params, this.getPage())
}
};
</script>
and my pageComponent.vue:
<template>
<h1 class="title is-1">{{ page.title }}</h1>
<div class="container has-size-6">
<div class="columns is-centered is-vcentered is-mobile">
<div class="column is-narrow has-text-centered is-6 has-text-left has-text-weight-medium" v-html="page.content">
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
props: ['page']
}
</script>
and my tsconfig
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
and my viteconfig:
const { resolve } = require('path');
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: '/static/',
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
build: {
outDir: resolve('./dist'),
assetsDir: '',
manifest: true,
emptyOutDir: true,
target: 'es2015',
rollupOptions: {
input: {
main: resolve('./src/main.ts'),
},
output: {
chunkFileNames: undefined,
},
},
}
})
How can I fix the errors ?
Thanks
ps here is what I have to solve it according to #tony19 answer:
<script lang="ts">
import { defineComponent } from 'vue'
import PageComponent from './../components/PageComponent.vue'
import axios from 'redaxios'
import { useRoute } from 'vue-router'
export default defineComponent({
name: 'Page',
components: {
PageComponent
},
data() {
return {
page: Object
}
},
methods: {
async getPage() {
const route = useRoute()
const pageSlug = route.params.slug
await axios
.get(`/api/v1/pages/${pageSlug}/`)
.then(response => {
this.page= response.data
})
},
},
async created() {
const route = useRoute()
await this.getPage()
this.$watch (() => route.params, () => this.getPage())
}
});
</script>

Answer 1

To enable type inference in components, use the defineComponent wrapper around the component declaration:
<script lang="ts">
import { defineComponent } from 'vue'
👇
export default defineComponent({
created() {
// 💡 type inference enabled
}
})
</script>