I have faced fw7 problems

I have few problems that huge for me. I was working on reactnative i switched to fw7 becouse of easy. I didnt want to waste time for adapting to their own components and structure of html. Web eccosystem are very good.

But when i make with Framework7 that documentation tell less thing for learn. Its say fw7 native javascript but i cant import any library and npm module like firebase.
And than when i use api and make any request page is loading as late. When i change the tab all information is lose. I dont find correct usage anywhere.
I spending my valuable time with easy and unnecessarilythings

Final problem is index.html file i cant include any page and i cant make any loop becouse {{#each loops}} template engine is doesnt work on there. How i call this loop. I familiar component architecture but this is different and i cant emit too.
Can you show me right usage, i will very appreciate

i think you should read the doc. if you want to use you must use router components


I look at that but can you say me please how i can include in index.html from any other components/pages

How i can import js lbraries
And how i can prevent to create my arrays that came from api again and again. When i changed tab its refreshed and also i cant print on homepage anything i trying write hardcode mostly

exactly as the doc says;

read Framework-7 Doc!


  1. create you r app with f7-cli and choose webpack
  2. import every library you need in main.js or where you need it
import { mapActions, mapGetters } from 'vuex'
  1. just use f7-request library to call your backend

  2. build your app
    your first component:

routes = [
  // ...
    path: '/some-page/',
    // Component Object
    component: {
      template: `
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">{{title}}</div>
          <div class="page-content">
            <a @click="openAlert" class="red-link">Open Alert</a>
            <div class="list simple-list">
                {{#each names}}
      style: `
        .red-link {
          color: red;
      data: function () {
        return {
          title: 'Component Page',
          names: ['John', 'Vladimir', 'Timo'],
      methods: {
        openAlert: function () {
          var self = this;
          self.$app.dialog.alert('Hello world!');
      on: {
        pageInit: function (e, page) {
          // do something on page init
        pageAfterOut: function (e, page) {
          // page has left the view
  // ...