How can we integrate Cordova plugins into Vue-Cordova framework?

Question

How can we integrate Cordova plugins into Vue-Cordova framework?

Looking to integrate Vue-Cordova with Cordova-plugin-file-opener2 to open PDF files within iOS/Android applications.

In the Vue-Cordova setup, plugins related to the device are defined 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
          })
        },
         ....

While I can access these properties on my iOS simulator, I'm facing difficulty in accessing externally installed plugins via Cordova CLI. The Cordova object that should enable calling file-opener2 commands like:

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

has additional properties not present on the Vue.cordova instance. Trying to access them via: Vue.cordova.plugins.fileOpener2 results in undefined.

Seeking guidance on how to incorporate external plugins into Vue-Cordova, or potentially find a workaround?

EDIT:

Despite my efforts, I haven't succeeded, but progress seems near.

The steps taken include:

cloning https://github.com/pwlin/cordova-plugin-file-opener2 into the plugins folder of the Cordova project

modifying

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

/***/ },

included the following addition to plugins in the data object in app.vue: (Unsure about further additions needed for this definition. Any recommendations?)

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

Following these steps, anticipation is high for {{ fileOpener2 }} availability in the template as an object, yet it remains elusive. What am I overlooking?

javascript file cordova plugins vue.js

Answer 1

Answer №1

Have you made sure to wait for the deviceready event before accessing your plugin?

If not, try using this code snippet after the event is triggered:

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

It's possible that you didn't follow the contribution guide properly to support this plugin, as mentioned by Gandhi. Avoid editing webpack generated files and instead generate your own:

Clone the vue-cordova repository
Replace node_modules/vue-cordova in your project with a symlink to the cloned repository
Add the plugins and run npm run build (or npm run dev)

After completing these steps, try building your Cordova app again.

Answer 2

Have you made sure to wait for the deviceready event before accessing your plugin?

If not, try using this code snippet after the event is triggered:

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

It's possible that you didn't follow the contribution guide properly to support this plugin, as mentioned by Gandhi. Avoid editing webpack generated files and instead generate your own:

Clone the vue-cordova repository
Replace node_modules/vue-cordova in your project with a symlink to the cloned repository
Add the plugins and run npm run build (or npm run dev)

After completing these steps, try building your Cordova app again.

Answer 3

Answer №2

If you're struggling to incorporate Cordova plugins into Vue-Cordova, the issue at hand involves transpiling files with Webpack.

Start by cloning the repository
Create a file in the plugins/ directory named after the plugin
Add your plugin to the list in src/index.js

Include ".babelrc" in the root folder

Insert the following code:

{
  "presets": [
    [
      "env",  { "modules": false }
    ]
  ]
}

Execute
```
npm install --save-dev babel-preset-env
```
Run the command npm install

You will discover the transpiled file generated in the index.js file within the root folder.

Answer 4

If you're struggling to incorporate Cordova plugins into Vue-Cordova, the issue at hand involves transpiling files with Webpack.

Start by cloning the repository
Create a file in the plugins/ directory named after the plugin
Add your plugin to the list in src/index.js

Include ".babelrc" in the root folder

Insert the following code:

{
  "presets": [
    [
      "env",  { "modules": false }
    ]
  ]
}

Execute
```
npm install --save-dev babel-preset-env
```
Run the command npm install

You will discover the transpiled file generated in the index.js file within the root folder.

Answer 5

Answer №3

If you're looking for an alternative solution, one way to ensure that plugins load correctly is by modifying this function within cordova.js...

  function determineCordovaPath() {
    let platform = cordova.platformId.toUpperCase();
    if (platform === 'ANDROID') {
      return `file:///android_asset/www/`;
    }
    else if (platform === 'IOS') {
      return `cdvfile://localhost/bundle/www/`;
    }
    else if (platform === 'OSX') {
      return `cdvfile://localhost/bundle/Contents/Resources/www/`;
    }
    else if (platform === 'WINDOWS') {
      return `/www/`;
    }
    return null;
  }

Answer 6

If you're looking for an alternative solution, one way to ensure that plugins load correctly is by modifying this function within cordova.js...

  function determineCordovaPath() {
    let platform = cordova.platformId.toUpperCase();
    if (platform === 'ANDROID') {
      return `file:///android_asset/www/`;
    }
    else if (platform === 'IOS') {
      return `cdvfile://localhost/bundle/www/`;
    }
    else if (platform === 'OSX') {
      return `cdvfile://localhost/bundle/Contents/Resources/www/`;
    }
    else if (platform === 'WINDOWS') {
      return `/www/`;
    }
    return null;
  }

How can we integrate Cordova plugins into Vue-Cordova framework?

Answer №1

Answer №2

Answer №3

Similar questions

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

Retrieving Vue data from parent components in a nested getter/setter context

Is there a solution for the continuous automatic incrementing of the jQuery UI spinner that occurs when I right-click on it?

Why isn't this setState function activating?

I encountered an Angular error that is preventing me from updating and uploading images to my Firebase Storage because it is unable to locate the storage bucket

Encountering a "Element is not defined" error in Nuxt when trying to render Editor.js and receiving

Delete particular user inputs following a $.ajax request

What steps should I follow to utilize a JavaScript dependency following an NPM installation?

As soon as I closed the modal, I noticed that the checked inputs reverted back to

ng-show and ng-hide toggling for the active row

The specified timeout elapsed without the jasmine async callback being invoked

Showcase Pictures from a Document

Dealing with issues escaping unicode characters in JavaScript

Struggling to dynamically fill the table with Ajax Json data

Tips for preparing HTML content with Jquery's "ON" method?

Sharing data between view and controller in Laravel: a guide

Adjust the displayed HTML Tag within a Vue Component to add variety

Inquiring about the Model component within the MVC architecture in a web application created with NodeJs and integrated with

The JQuery datepicker fails to display the current date

Solution: The issue where the children's onChange event was not updating the parent in Ant Design was discovered to be due to the Select and Table components nested inside a Tab not changing according to the pageSize