twemojiが.vueコンポーネントで動作しない

Question

私は、nuxt.jsのスタータープロジェクトでtwemojiを使用しようとしています。しかし、それは動作しません。

コンポーネント：

<template> 
    <section class="container"> 
     ♠️ &#x1F3C1 ♥️ 
    </section> 
</template> 

<script> 
var yyy = require ('static/app.js') 
yyy.xxx() 
</script> 

<style scoped> 
img.emoji { 
    margin: 0px !important; 
    display: inline !important; 
} 
</style> 

app.js

module.exports = { 
    xxx: function() { 
    twemoji.size = '16x16' 
    twemoji.parse(document.body) 
    } 
} 

はまた、頭の中でtwemoji CDNが含まれています。

しかし、エラーが現れます：nuxt.js.からみんなから

Vue.js error 

ReferenceError: twemoji is not defined 
    at Object.xxx (__vue_ssr_bundle__:4382:5) 
    at Object.<anonymous> (__vue_ssr_bundle__:2094:5) 
    at __webpack_require__ (__vue_ssr_bundle__:21:30) 
    at Object.<anonymous> (__vue_ssr_bundle__:3845:3) 
    at __webpack_require__ (__vue_ssr_bundle__:21:30) 
    at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:1616:5) 
    at __webpack_require__ (__vue_ssr_bundle__:21:30) 
    at Object.<anonymous> (__vue_ssr_bundle__:1117:69) 
    at __webpack_require__ (__vue_ssr_bundle__:21:30) 
    at Object.<anonymous> (__vue_ssr_bundle__:4233:65) 

Answer 1

ソリューション

NPMからtwemojiをインストールしておく必要がありますし、.vueテンプレートで：

`` `

import twemoji from 'twemoji' 
var em = function() { 
    if (process.BROWSER_BUILD) { 
    const twemoji = require('twemoji') 
    twemoji.size = '72x72' 
    window.onNuxtReady(() => { 
     twemoji.parse(document.body) 
    }) 
    } 
} 
em() 

` ``