How can I reference js file from node_modules folder in page head in nuxt.js

Question

I have added package onesignal-emoji-picker to my nuxt.js vue project and I want to reference css and js files in my pages without copying them to static folder. css is included with ease in nuxt.config.js:

css: ['~/node_modules/onesignal-emoji-picker/lib/css/emoji.css']

but I could not manage to reference js files, head.script section seems to work only for external resources:

script: [
  {
    src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
    type: 'text/javascript'
  },
  {
    src: '~/node_modules/onesignal-emoji-picker/lib/js/config.js',
    type: 'text/javascript'
  },
  {
    src: '~/node_modules/onesignal-emoji-picker/lib/js/util.js',
    type: 'text/javascript'
  },
  {
    src: '~/node_modules/onesignal-emoji-picker/lib/js/jquery.emojiarea.js',
    type: 'text/javascript'
  },
  {
    src: '~/node_modules/onesignal-emoji-picker/lib/js/emoji-picker.js',
    type: 'text/javascript'
  }
]

It seems to me that I should somehow tell webpack to include this files on build and reference them appropriately? How could I do it? Thanks!

Answer 1

In nuxt.config.js, simply use the plugins key for including any internal scripts:

plugins: [
    { src: "~/node_modules/onesignal-emoji-picker/lib/js/config.js", mode: "client" },
    { src: "~/node_modules/onesignal-emoji-picker/lib/js/util.js", mode: "client" },
    { src: "~/node_modules/onesignal-emoji-picker/lib/js/jquery.emojiarea.js", mode: "client" },
    { src: "~/node_modules/onesignal-emoji-picker/lib/js/emoji-picker.js", mode: "client" }
]

Note the mode: "client" option which means the files will only be run on the client, preventing issues on the server if the library is not compatible with server-side-rendering. You may want to remove the flag in other cases.