How to include Vue plugins to Vue TypeScript's template?

Question

How to include Vue plugins to Vue TypeScript's template, like vue-webpack-typescript?

For example, vue-meta.

I already add to ./src/main.ts this:

import * as Meta from 'vue-meta';

Vue.use(Meta, {
  keyName: 'head', 
  attribute: 'data-vue-meta', 
  ssrAttribute: 'data-vue-meta-ssr', 
  tagIDKeyName: 'vmid'
});

And add this to ./src/components/home/home.ts component:

export class HomeComponent extends Vue {

  static head() {
    return {
      title: 'Test'
    }
  }

}

But this not working, don't show over written title..

tony19 · Accepted Answer · 2022-07-15 04:47:15Z

1

It's nothing to do with including Vue plugins I suppose. If you correctly set typescript compiler to work with vue, the component would use whatever the plugins are. So I guess it would be the issue of your using the class-style component.

According to the Vue's official example, you'll need vue-class-component to make Vue recognize class components. https://v2.vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components

@Component
export class MyMixin extends Vue {
  mixinValue = 'Hello'
}

Good luck!

edited Jul 15, 2022 at 4:47

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 5, 2018 at 8:50

daiyanze

1037 bronze badges

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

Comments

jkchao · Accepted Answer · 2018-07-03 03:47:45Z

0

Maybe you should write this in Component decorator:

@Component({
  head () {
    return {
      title: 'test'
    }
  }
})
export class Test extends Vue {}

answered Jul 3, 2018 at 3:47

jkchao

4031 gold badge3 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to include Vue plugins to Vue TypeScript's template?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related