[SOLVED] Best way to work with cordova and f7 in dev mode


I am working a project well set from the CLI and yeah, all is good. I have a quite number of cordova plugins I am using which are not accessible from the window.plugins global object, and I can only access them via the usual cordova.plugins. However, my vue app won’t work on npm start in the browser, it constantly throws the annoying cordova is not defined error in the console. I fully understand this but I mean the plugins are many and I can’t build every two seconds. I would love to work as I see how routing, and appearances will work from my browser. I understand if these plugins can’t work from there but is there a recommended way to write my plugin code and still get my app to show in the browser? Or is there a way I can add plugins to the window.plugin scope?
How do you go about this?
I added abrowser platform but I have to build a production bundle every now and again. It is time consuming.


Did you try to use Webpack?

1 Like

Yes of course… @Overman. Webpack comes pre-configured in the project set up by the cli. Hot reloading works but as long as i put code like : cordova.plugins. … anywhere, the app will never show because cordova is not defined. I know the plugins wont work in the browser but when I build but i want to still view my ui and routing before building to test plugins.

On my project i use this template, cordova work fine :wink:

1 Like

Thanks @Overman. I have considered this but I have set up a project already with the CLI. I would love to probably know how to configure my webpack to start reading from the cordova folder… You think this can be possible?

You may take webpack plugins + part webpack.config from template and integrate in your project. Theoretically work, you have to try

1 Like

Let me try this actually… @Overman. Thanks so much. I will revert…

Not really successful… @Overman

Hullo Vlad… @nolimits4web, I would like you to kindly advise me here… Thanks in advance

You shouldn’t expect any of cordova APIs will work in browser and you shouldn’t rely on it. Just wrap any cordova related calls and code with if (window.cordova) { ... }


Awesome, god of Javascript…haha…:grin: thanks @nolimits4web!

Not really. There are plugins which working in browser and without support them in browser you cant really move ahead: bitpay/cordova-plugin-qrscanner and cordova-plugin-barcodescanner. They have different states and callbacks.

This is a little bit of problem when you generate project by F7-CLI + Cordova - you cannot run cordova run browser with HMR mode. This is one of those issues why I don’t use F7-CLI :frowning: Typescript is second one, btw.


dont work for me

Instead there is a cordovaApp which does not have any plugins as an option.

every Cordova plugin has its own API

I just want access the plugins, but it does not work.