Vue.js. Интеграция сторонних vue-плагинов в проект по шаблону TypeScript?

Question

[Vic Shóstak]

Доброго времени суток!

Начинаю потихочечку ковырять TypeScript. Поскольку, лучше всего «ковыряние» идёт на примерах, то начал делать простенький SPA-бложик. Так как из всех современных JS-фреймворков знаю только Vue.js, то выбрал вот этот стартер-шаблон для него (ставил, естественно, через vue-cli): https://github.com/ducksoupdev/vue-webpack-typescript

Так вот вопрос: каким образом теперь происходит интеграция сторонних vue-плагинов и их вызов в компонентах? Например, того же vue-meta? Я делаю всё, как обычно:

Импорт плагина в ./src/main.ts

import Meta from 'vue-meta';

Инициализация и настройка (там же)

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

Далее, пробую вызвать его в компоненте (./src/components/home/home.ts)

export class HomeComponent extends Vue {
  
  static head() {
    return {
      title: 'Test'
    }
  }

}

Но ничего не происходит. Ошибок тоже нет.

Подскажите, пожалуйста, что я делаю не так и как делать так.
Заранее спасибо!

Answer 1

[Данакт Фрост]

import * as Meta from 'vue-meta'

Comments

[Vic Shóstak]

А в самом компоненте как его вызывать?

[Klein Maximus]

При чем тут import *? Посмотрите внутрь самого mata - там только

export default install

Не надо глупости писать!

[Данакт Фрост]

Klein Maximus, если у компилятора typescript не включен параметр «allowSyntheticDefaultImports», то дефолтный импорт пытается искать «default» в экспортах. В commonjs это выглядело бы так:
const Meta = require('vue-meta').default
Тем временем, написанная в ответе строка импортирует все сущности из экспорта. Т.е.
const Meta = require('vue-meta')

Answer 2

[Klein Maximus]

А с такими настройками Вы чего хотите добиться?
Vue.use - это только установка и настройка самого плагина в приложение.
Элементы head-а меняются в компонентах через metaInfo.
Попробуйте заменить static head() на static metaInfo().

Comments

[Vic Shóstak]

Так, а разве в настройках параметр keyName не меняет название? Из доков по vue-meta: "keyName – the component option name that vue-meta looks for meta info on.".

[Klein Maximus]

А если убрать static?