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 >{{ page.title }}</h1>
    <div >
        <div >
            <div  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>

CodePudding user response：

To enable type inference in components, use the defineComponent wrapper around the component declaration:

<script lang="ts">
import { defineComponent } from 'vue'