Vue.js で Twemoji を楽チンに使う方法

どんな感じ？

Codepen でサンプルを作ってみました （Qiita に埋め込むと表示されるのに数秒かかる）

See the Pen Vue.js + Twemoji by tdkn (@tdkn) on CodePen.

• Twemoji とは
  • Twitter がオープンソースで公開している絵文字のセットです
  • Qiita でも使われています →
  • https://twemoji.twitter.com/

Custom Directive

通常、Vue においてコードの再利用と抽象化における基本の形はコンポーネントですが、Custom Directive を使うと低レベルDOMにアクセスすることができるため、これを利用して Twemoji のパース処理を差し込みます。

Vue には Custom Directive をグローバルあるいはコンポーネント単位でローカルに登録することができます。
ディレクティブというのは v-on や v-if など HTML の attribute によく似たものです。

global

import Vue from 'vue'
import twemoji from 'twemoji'

// アプリケーションにグローバル登録
Vue.directive('twemoji', {
  inserted(el) {
    el.innerHTML = twemoji.parse(el.innerHTML)
  }
})

local

// Component単位で登録
directives: {
  twemoji: {
    inserted(el) {
      el.innerHTML = twemoji.parse(el.innerHTML)
    }
  }
}

使い方

ディレクティブを登録したので v-twemoji が使えるようになっています。
お好みで v-emoji など、ディレクティブの名前は適宜変えても良いでしょうね。

app.vue

<template>
  <div v-twemoji>{{message}}</div>
</template>

<script>
export default {
  data: () => ({
    message: "Hello Twemoji ✨🍣😋"
  })
}
</script>

絵文字の大きさの調整

そのままだと、36px ほどあるので、css で適宜調整しましょう。
親要素を基準に計算する em が良いかも。

img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}