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() 

```