リンクのプレビュー機能を「link-prevue」を使って実装する

link-prevueとは

リンクのプレビューを生成するためのコンポーネントライブラリです。
対象のURLのサイトが表示されるのではなく、メイン画像？とtitle, descriptionでサイトカードを生成しているようです。

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install link-prevue

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/link-prevue.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/nivaldomartinez/link-prevue

導入手順

1. ライブラリの取り込み

webpack等の場合 ※モジュール版は未検証です。

import LinkPrevue from 'link-prevue'
new Vue({
  el: '#app',
  components: {
    LinkPrevue
  }
})

WEBページの場合

new Vue({
  el: "#app",
  components: {
    LinkPrevue: window.LinkPrevue.default
   }
})

2. テンプレートを準備

<div id="app">
  <link-prevue url="https://vuejs.org/"></link-prevue>
</div>

サンプル

>>専用ページで確認する

フォームの入力でプレビュー

1. ライブラリの取り込み

new Vue({
  el: "#app",
  components: {
    LinkPrevue: window.LinkPrevue.default
   },
   data: {
     url: '',
     previewInput: ''
   },
   methods: {
     preview: function(){
       this.url = this.previewInput
     }
   }
})

2. テンプレートを準備

<div id="app">
  <div>
     <input type="url" v-model="previewInput">
     <button @click="preview">preview</button>
  </div>
  <link-prevue :url="url"></link-prevue>
</div>

サンプル

>>専用ページで確認する

まとめ

リンクのプレビューを生成するためのコンポーネントライブラリでした。

上手いことライブラリを使えば、リンクにマウスホバーしたらサイトカードを表示するようにできそうです。

時間ができたら試してみたいなーと思いました○

今日はこの辺でー