TL;DR
$ npm install -g vue-cli
$ vue init valnub/vue-framework7-webpack-template my-project
$ cd my-project
$ npm install
$ npm run dev
Note: Replace my-project with the name of your project.
Check out my Github repo for template source code:
https://github.com/valnub/vue-framework7-webpack-template
In the following video I explain how to get started quick and easily with this Framework7 and VueJS template.
That’s awesome! I still have a problem! I build the JS file and add it to my Cordova project, it works fine on the browser however not the emulator! Did I miss something?
Brilliant! Nice work. Thanks Timo.
@Hugh Hi, Hugh. Can you share your code? E.g. via github or a link to a zip.
You might have to do a binding to deviceready event first before you init your code: https://cordova.apache.org/docs/en/4.0.0/cordova/events/events.deviceready.html
Thanks, you’re very welcome @Jelle :-)
Glad that you like the tutorial. If you have ideas/requests for other topics, please let me know.
A tut on the best wat to share/sync data between pages would be nice. I just started learning Vue so I’m not up to date om hoor top do that.
Thanks, Jelle. I’ll see what I can do :-)
Hi,
I’m a big fan of your tutorials, i recently started hybrid app development by using your tutorial support. A big thanks to you for kick start on F7+VueJs.
According to your suggestion i started earlier Hybrid IOS app with F7+VueJs.
Can you please help on how to use routing?
I have a method in app.vue which will fire when user clicks login button, It has to redirect the user to welcome.vue when successful sign in.
onSignIn : function (username, password) {
},
How should i route the app to ‘/welcome/’ page?
Thanks & Regards,
@kiranrajujakka Hi, glad that my tutorials were helpful for you. Did you check the docs about routing? http://framework7.io/vue/navigation-router.html
Probably you just have to map /welcome/ to welcome.vue like in this example: https://github.com/valnub/Twitvue04/blob/master/src/routes.js
To load a page via JavaScript use $router.load(), see http://framework7.io/vue/navigation-router.html#router-api and http://framework7.io/docs/router-api.html
I already created welcome.vue and i configured in router.js, Now i’m trying to call that in app.vue script when signin button clicked.
I wrote like this,
if(successful login){
window.f7.$router.load(‘/welcome/’) — not working
$router.load({url: ‘/about/’}); — not working
}
Regards,
@kiranrajujakka Very weird. I suggest you create a runnable example of your code on codepen and then post it to http://forum.framework7.io
Hi,
I’m working with F7 + Vue.
Can we create different side panel when we gone to another page?
I have one left side panel when user opens the app. When he logged in i need another left side panel which is having different content than the previous.
Where should i have to create that second panel code and how to call that?
When i try to create that panel at logged in page no where it is accepting.
Thanks & Regards,
Hi,
It is too frustrating to go with vue elements provided by the framework7.
Is it any problem when i go with normal F7 elements instead of vue element?
Thanks & Regards
@kiranrajujakka
Sure, you can use regular Framework7 without VueJS. It’s very simple to use with jQuery/Dom7 and Template7 (if you want). See these Links:
Dom7 http://framework7.io/docs/dom.html
Template7 http://framework7.io/docs/template7.html
Hi,
F7+Vuejs + I’m doing login API call in my app, when successful login happens i’m storing key in localStorage, Now i have key.
Normally my aim is to load the welcome.vue(‘/welcome/’) when user logged in.
How can i achieve this by using stored key?
Where should i have to call the routing now?
Normally i use “this.$router.load(‘/welcome/)” to call welcome screen when successfully login happens.
I tried to do that in main.js, there routing not working.
Please suggest me an idea on how to do this!
Thanks & Regards,
Hi there. I’ve walked through the install instructions, but keep getting an error when I npm run dev. Gives empty response. localhost/ Failed to load resource: net::ERR_EMPTY_RESPONSE in the console. im running npm version 5.0.0
@Kevin Mh, just tried with NPM 5.3 and Node 8.2.1 – Worked fine. What OS are you running on?
Hi Timo,
I’m starting to build my environment to develop phonegap applications for android and IOS, for now just Android since I’m running it under windows. My problem is that I’ve decided to go (thanks to your tutorials btw!) for this framework “Framework7, VueJS and Webpack” since I understand it more or less and seems the right way to go. But if I set this up, and run it in a webbrowser with npm run dev all is ok ,unfortunately ( or fortunately) my applications need native plugins like camera and Bluethoot access and this is a little bit difficult to run since I dont know how integrate this webpack build with “phonegap serve” command. what is your opinion in what I should do to have this running with the real device at the same time I’m using the npm run dev ?
@Carlos Hi, if you want a native app, it is better to use this template which has integrated support for Cordova/PhoneGap.
Then, you can install plugins for Bluetooth/Camera support.
Hi Timo, thanks for your reply , I’ve used already that template but it works in a very unstable way (at least for Android the one I’m using) and everytime I make a change need a build–> deploy > and this a long time even with a real device .
After checking all you videos I decided to use your hybrid solution ;).
1st develop all the UI , webpack+vue+F7 (that is not dependent on any device plugin) after when all is ready I make the “npm run pg” similar to your instructions , I made the same scripts that you used for MAC but for windows OS , copying all folders and dependencies to pg/www and all changes in my code about the event deviceready. Then I can add my plugins and work (more slowly ) on the final implementation . ( discovered that in Android the plugin WhiteList must be added to phonegap otherwise it will show always the 404 in any rest get even with config.xml with correct access option to ‘*’. Hope this helps others because was hard to spot it)
Do you see any inconvenience on this procedure , should it work ok or I will have problems that I’m didn’t foreseen ?
BR
Carlos
@Carlos Hi, I don’t know exactly how your setup looks like, so I can’t say much about it. It sounds a bit complicated though. You might want to try to create an empty PhoneGap/Cordova app and then just copy a static version of the F7 template (without npm/webpack) into the www directory. Then, you can work from there just with the PhoneGap/Cordova CLI.