Vuetify: Add Cordova Template

[MohammedAl-Mahdawi]

I see that Vuetify has 8 pre-made Vue CLI templates, why not add another one that uses Webpack advanced template with Cordova for cross-platform mobile development?

• What will it allow you to do that you can't do today?
  Cant use Vuetify pre-made Vue CLI templates with Cordova.
• How will it make current work-arounds straightforward?
  I was not able to find any work-arounds.
• What potential bugs and edge cases does it help to avoid?
  I see Vue users use other Vue UI mobile templates/frameworks that specialized in mobile development just because they make using Cordova out-of-the-box and I see Vuetify looks better than those on the mobile screen.

[maurop123]

Hm... Could be a good idea. I don't have much experience with Cordova myself, but I did find this repo:
https://github.com/OnsenUI/vue-cordova-webpack

@MohammedAl-Mahdawi would you be open to trying that repo out and sharing your experience with it? If all is well then we can probably support it.

[MohammedAl-Mahdawi]

@maurop123 Sure, I'll test that repo and will tell you about the result.

[MohammedAl-Mahdawi]

@maurop123 I tested Quasar Cordova implementation and it is worked for me.
http://quasar-framework.org/guide/cordova-wrapper.html
I think it is better than OsenUI Cordova template because it makes the source code available for all platforms at the same time then adds Cordova as a wrapper.

[maurop123]

@MohammedAl-Mahdawi Thank you for sharing. I started reading through the cordova-wrapper link. It'll take me some time to grok it, but it's on my radar. In the meantime, I'm open to any implementations you may have to share :smile:

[beerett]

I tested the webpack-advanced template with cordova -- works fine on mobile . After you create a cordova directory (cordova create appname) move it to your Vuetify folder. Then make a symlink to the ../dist folder.

Assuming your structure is like this:

Vuetify>
...src >
...dist>
...etc >
...cordova>
   ...hooks>
   ...plugins>
   ...www>  sym-link this folder to ../dist

You also need to change the paths in dist/index.html to remove the leading / in static for all script files. I'm assuming pathing is closely related as to why the main picture won't load in the center of the page (a leading / is being added to /static/v.png). I'm not really familiar with webpack and the config -- I realize this isn't ideal, just giving you a heads up on what I've found ..

Edit Edit Edit: I'm an idiot, the source had a leading / added to the PNG.. everything works. If you change the following line in config\index.js it will fix the build path for the script files. There's two parts to change, one for dev and one for production.

config\index.js
  assetsPublicPath: ''   

Again, this is just me messing around with the source -- I've really only tested the main page with the toolbars and everything seems to work. Going to try porting over some code from a Quasar project I've been working on -- anxious to try out a new framework

I'm using Oreo on the AVD with a simulated 10" tablet and on my Nexus 5x with Oreo as well.

[maurop123]

@beerett thank you so much for the step by step instructions. I'll try them out today/tomorrow and report back. If all is well, I'll try adding the template.

[T-Zahil]

Hi @maurop123, have you tried? I hesitate a lot between quasar and vuetify for my next project, and the fact that I can easily have an android application tilts the balance towards quasar... Too bad because I like vuetify a lot!

[KaelWD]

@T-Zahil If you only care about android, a PWA is also an option.

[T-Zahil]

@KaelWD Yes, I thought about it (I don't need an IOS version), but putting its application on the play store still gives it more visibility :/.

[KaelWD]

You could have a mobile app that just tells you to use the website, it'd be a nice change from the websites that force you to use their app 😄

[beerett]

@T-Zahil , it's fairly easy to add cordova to an existing project

[FabianSilva]

@beerett thanks for the info !!! that was very usefull
I used the "quasar wrap cordova" from cli of quasar framework over vuetify project and it creates the cordova folder with a symbolic link to dist folder
make npm run build to apply source code to dist, then changed "/static/" to "static/..." on source code and router mode from "history" to "hash" and it seems to work well....

seems that can be possible in a future that vuetify have a cordova template or use same technique like quasar and do something like "npm cordova wrap" or something like that be available... in the meantime with quasar wrapper it seems to works well :)

update/note: as you say in a post, not have to edit manually dist folder... have to change config\index.js (set assetsPublicPath: '')

[kevinqqnj]

You can simply run this phonegap command to build a scaffold:

phonegap create <project_create_dir> --template cordova-template-vuetify-webpack
cd <project_create_dir>
npm i
phonegap platform add browser
phonegap run browser -- --lr

https://github.com/kevinqqnj/cordova-template-vuetify-webpack
Thanks to @centrual !

[KaelWD]

https://github.com/vuetifyjs/cordova