How to get started with Framework7, VueJS and Webpack

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.

Video tutorial

21 thoughts on “How to get started with Framework7, VueJS and Webpack

  1. Hugh says:

    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?

  2. Thanks, you’re very welcome @Jelle :-)
    Glad that you like the tutorial. If you have ideas/requests for other topics, please let me know.

  3. Jelle says:

    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.

  4. 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,

  5. 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,

  6. 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,

  7. 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

  8. 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,

  9. Kevin Boger says:

    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

  10. Carlos Oliveira says:

    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 ?

  11. Carlos Oliveira says:

    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

Leave a Reply