How to get started with Framework7, VueJS and Webpack


$ 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:

In the following video I explain how to get started quick and easily with this Framework7 and VueJS template.

Video tutorial

15 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


  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,

Leave a Reply