CODEWITHSUNDEEP
webpackvue.jsvuejs2vue-component
ijijjnjnjn
ijijjnjnjn

Reputation: 21

twemoji not working in .vue component

I am trying to use twemoji in my nuxt.js starter project. But it doesn't work.

Component:

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

Also included twemoji CDN in head.

But error shows up:

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)

Upvotes: 1

Views: 1029

Answers (1)

ijijjnjnjn
ijijjnjnjn

Reputation: 21

Solution from guys from nuxt.js.

First need to install twemoji from npm, then in .vue template:

```

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

```

Upvotes: 1

Related Questions