外部リンクの表現をリッチにする @microlink/vanilla
6/25/2019
@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>