How to get external dependencies bundled with the .umd.js files

[sts-ryan-holton]

Hi, I'm using quite a few Vue Dependencies in my custom plugin:

• Vue Resource
• Vee Validate
• Vue Router
• Vue Moment
• Bootstrap Vue
• Bootstrap

I'm loading all of these into the plugin.js file which gets created when adding the p11n module. I have a few custom liquidators set up along with a few other things. I'm not sure if I've added them correctly to this file.

I'm including Vue Router as part of the router.js file.

// Import required packages
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'

import '@fortawesome/fontawesome-free/css/all.min.css'

import plugin from './index'

Vue.use(require('vue-moment'))
Vue.use(VueResource)
Vue.use(VeeValidate)
Vue.use(BootstrapVue)

VeeValidate.Validator.extend('mobile', function (value) {
  var numbers = /^07[1-57-9]{1}[0-9]{8}$/
  var drama = /^07700900[0-9]{3}$/
  if (numbers.test(value) && !drama.test(value)) return true
  return false
})

VeeValidate.Validator.extend('dobAge', function (value, formData) {
  var data = formData
  var today = new Date()
  var birth = new Date(data['AppDOBYear'], parseInt(data['AppDOBMonth']) - 1, data['AppDOBDay'])
  var age = today.getFullYear() - birth.getFullYear()
  var month = today.getMonth() - birth.getMonth()
  if (month < 0 || month === 0 && today.getDate() < birth.getDate()) age--
  return !(age < 18)
})

Vue.use(plugin)

The issue I face, is everything works fine when using a module system like Nuxt JS, but when building the project, linking to the umd.js JS files works fine, but everything related to the external dependencies seems to be undefined in my site.

Is there anyway to bundle the external dependencies in the output of the build JS files?