Web猫ブログ | 外部リンクの表現をリッチにする @microlink/vanilla
外部リンクの表現をリッチにする @microlink/vanilla
6/25/2019
Nuxt
Contentful
TypeScript

@microlink/vanilla (ある一定のアクセス数を超えると有料) を使う。

yarn add @microink/vanilla

Dependency Injectionを利用する

Nuxt では Dependency Injection を使える。

const microlink = require('@microlink/vanilla/umd/microlink');

export class MicrolinkPlugin {
  microlinkjs: string = '';

  constructor() {
    this.microlinkjs = microlink
  }
}

export default ({ app }, inject) => {
  inject('microlinkjs', (selector => microlink(selector)))
}

nuxt.config.ts で事前に準備したファイルを設定する。

module.export = {
    plugins: [
        '~plugins/microlink.ts'
    ]
}

そして、ライフサイクルメソッド mounted() で使う。

export default Vue.extend ({
    mounted() {
        this.$microlinkjs('.link-preview')
    }
})

適宜該当リンクに link-preview タグを設定するとリッチな表現として表示されるようになる。

<a class="link-preview" href="#"></a>

あわせてよみたい..