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

Retrieving every single .json file present in a specific folder

How to sort objects by keys in AngularJS

Managing Form Data with Vuex

Retrieve, establish cookies, and guard against CSRF attacks

Numerous comparisons between ngIf and ngShow are made when dealing with intricate user interfaces and form structures

Is there a way to repurpose a JavaScript object that gets sent back to the client upon page loading?

Expanding form fields dynamically with AngularJS

Issue with Mat-AutoComplete arising while utilizing a formArray

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

Event with no refresh required

Preventing Javascript array elements from being overwritten: Best practices

Issues with hover functionality in React Material Design Icons have been identified

When running "npx create-nuxt-app" followed by "npm run dev", an error occurs stating that there

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

Animation of disappearing blocks covering the entire screen

Tips on removing either the date or time when input type date and input type time share the same ng-model

Soundex and Metaphone implementation for Phonegap application development on the Android platform

Using JavaScript to invoke Applescript commands

Sudden slowdown due to Jquery error

Executing a function when a user chooses to exit a webpage using the @HostListener('window:beforeunload') method