I have faced fw7 problems

Questions
1

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

2

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

https://framework7.io/docs/router-component.html

3

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

4

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

5

exactly as the doc says;

FIRST
read Framework-7 Doc!

https://framework7.io/docs

  1. create you r app with f7-cli and choose webpack
    https://framework7.io/cli/
  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
    https://framework7.io/docs/request.html

  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>
          </div>
          <div class="page-content">
            <a @click="openAlert" class="red-link">Open Alert</a>
            <div class="list simple-list">
              <ul>
                {{#each names}}
                  <li>{{this}}</li>
                {{/each}}
              </ul>
            </div>
          </div>
        </div>
      `,
      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
        },
      }
    },
  },
  // ...
]