Currently, I am working on a project using Vue 2 with Typescript. However, I am facing an issue where I cannot add options to the component.
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
@Component<Home>({
components: {
HelloWorld,
},
middleware: "yyy",
})
export default class Home extends Vue {
mounted() {
console.log(this.middleware);
}
}
</script>
I am getting 'undefined' as the output!
In my search for a solution, I came across a similar problem and attempted to resolve it, but unfortunately, I still have not achieved the desired result.
Visit this link for more information about extending Component options
This is my src\shims-vue.d.ts file:
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
declare module "vue/types/vue" {
interface Vue {
middleware?: string;
}
}
declare module "vue/types/options" {
interface ComponentOptions<V extends Vue> {
middleware?: string;
}
}