[Vuejs]-How to embed html/js widgets in Nuxt, specifically iFlyChat but broadly applicable

by

1👍

✅

You have to create a nuxt plugin to init your code on each page.

Fist, create a file plugins/iflychat.js:

export default () => {

  console.log("init iflychat plugin");

  var iflychat_app_id = "xyzappidcode";
  var iflychat_external_cdn_host="cdn.iflychat.com",iflychat_bundle=document.createElement("SCRIPT");iflychat_bundle.src="//"+iflychat_external_cdn_host+"/js/iflychat-v2.min.js?app_id="+iflychat_app_id,iflychat_bundle.async="async",document.body.appendChild(iflychat_bundle);var iflychat_popup=document.createElement("DIV");iflychat_popup.className="iflychat-popup",document.body.appendChild(iflychat_popup);

}

Then, configure Nuxt.js to import it:

//nuxt.config.js

export default {
  plugins: [
    { src: '~plugins/iflychat.js', mode: 'client' }
  ]
}

That’s it, you iFlatChat will run on every page view.

👤Nicolas Pennec

Leave a comment