Add Cordova plugins to Vue-Cordova?

Question

I'm trying to use Vue-Cordova along with Cordova-plugin-file-opener2 to open pdf's in ios/android apps.

Vue-Cordova defines plugins related to the device on the data property of the App vue instance:

  data: function () {
    return {
      cordova: Vue.cordova,
      plugins: {
        'cordova-plugin-camera': function () {
          if (!Vue.cordova.camera) {
            window.alert('Vue.cordova.camera not found !')
            return
          }
          Vue.cordova.camera.getPicture((imageURI) => {
            window.alert('Photo URI : ' + imageURI)
          }, (message) => {
            window.alert('FAILED : ' + message)
          }, {
            quality: 50,
            destinationType: Vue.cordova.camera.DestinationType.FILE_URI
          })
        },
         ....

I can access these properties on my ios simulator, but I am not able to access plugins that I install via the cordova-cli. The Cordova object that should be exposed to call file-opener2 commands like:

cordova.plugins.fileOpener2.open(
    filePath, 
    fileMIMEType, 
    {
        error : function(){ }, 
        success : function(){ } 
    } 
);

has properties not included on the Vue.cordova instance. When I try accessing them with: Vue.cordova.plugins.fileOpener2 I get undefined.

Can anyone tell me what I need to do to add plugins to Vue-Cordova, or possibly bypass it somehow?

EDIT:

My attempt at a solution doesn't work, but I feel I'm getting close.

I took the following steps:

1. cloned https://github.com/pwlin/cordova-plugin-file-opener2 into the plugins folder of my cordova project

2. changed the following in node_modules/vue-cordova/index.js:

   function(module, exports, webpack_require) {

           'use strict';
   
   // list here all supported plugins
   var pluginsList = ['cordova-plugin-camera', 'cordova-plugin-device', 'cordova-plugin-geolocation', 'cordova-plugin-contacts', 'cordova-plugin-file-opener2'];
   
   exports.install = function (Vue, options) {
   
     // declare global Vue.cordova object
     Vue.cordova = Vue.cordova || {
       deviceready: false,
       plugins: []
     };
   
     // Cordova events wrapper
     Vue.cordova.on = function (eventName, cb) {
       document.addEventListener(eventName, cb, false);
     };
   
     // let Vue know that deviceready has been triggered
     document.addEventListener('deviceready', function () {
       Vue.cordova.deviceready = true;
     }, false);
   
     // load supported plugins
     pluginsList.forEach(function (pluginName) {
       var plugin = __webpack_require__(1)("./" + pluginName);
       plugin.install(Vue, options, function (pluginLoaded) {
         if (pluginLoaded) {
           Vue.cordova.plugins.push(pluginName);
         }
         if (Vue.config.debug) {
           console.log('[VueCordova]', pluginName, '→', pluginLoaded ? 'loaded' : 'not loaded');
         }
       });
     });
   };
   

   // }, / 1 / // function(module, exports, webpack_require) {

   var map = {
       "./cordova-plugin-camera": 2,
       "./cordova-plugin-camera.js": 2,
       "./cordova-plugin-contacts": 3,
       "./cordova-plugin-contacts.js": 3,
       "./cordova-plugin-device": 4,
       "./cordova-plugin-device.js": 4,
       "./cordova-plugin-geolocation": 5,
       "./cordova-plugin-geolocation.js": 5,
       "./cordova-plugin-file-opener2": 6
   };
   function webpackContext(req) {
       return __webpack_require__(webpackContextResolve(req));
   };
   function webpackContextResolve(req) {
       return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
   };
   webpackContext.keys = function webpackContextKeys() {
       return Object.keys(map);
   };
   webpackContext.resolve = webpackContextResolve;
   module.exports = webpackContext;
   webpackContext.id = 1;
   

   /***/ },

   ...

   /***/ function(module, exports) {

   'use strict';
   
   exports.install = function (Vue, options, cb) {
     document.addEventListener('deviceready', function () {
   
         if (typeof cordova.plugins.fileOpener2 === 'undefined'){
         return cb(false);
         }
   
   
       // pass through the geolocation object
         Vue.cordova.fileOpener2 = cordova.plugins.fileOpener2;
   
       return cb(true);
     }, false);
   };
   
   /***/ },
   

3. added the following to plugins in the data object in app.vue: (I'm not sure what else to add to this definition. Any suggestions?)

   'cordova-plugin-file-opener2': function () { if (!Vue.cordova.fileOpener2){ window.alert('Vue.cordova.fileOpener2 not found !') return } }

After taking these three steps, I expect {{ fileOpener2 }} to be available in my template as an object, but it's not. Am I missing something?

Answer 1

Did you wait for the deviceready event ?

Maybe try to access your plugin once this event has been triggered. Example :

Vue.cordova.on('deviceready', () => {
  // here check for your variable
})

However it is most likely that you didn't follow the contribution guide to support this plugin as stated by Gandhi over there. You should not edit webpack generated files but rather generate your own :

• clone the vue-cordova repo
• replace node_modules/vue-cordova in your project with a symlink to the cloned repo
• add the plugins and run npm run build (or npm run dev)

Then retry to build your Cordova app