Vue Class Component: How to custom options

Question

Currently I use Vue 2 with Typescript, but I can't 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 got undefined!

I found 1 problem similar to this, I tried but still no result

Extend Component options

My src\shims-vue.d.ts

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;
  }
}

tony19 · Accepted Answer · 2021-07-04 09:27:19Z

1

Your type declaration is missing an import for Vue:

// shims-vue.d.ts
import Vue from 'vue' 👈

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    middleware?: string;
  }
}

To access the option from your component, use this.$options.middleware (not this.middleware):

export default class Home extends Vue {
  mounted() {           👇
    console.log(this.$options.middleware);
  }
}

edited Jul 4, 2021 at 9:27

answered Jul 4, 2021 at 9:12

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tony19 Over a year ago

That's for instance properties. That same page shows how to augment component options with vue/types/vue.

Collectives™ on Stack Overflow

Vue Class Component: How to custom options

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related