v7.1.1
Support Framework7
logo_github stars forks
SponsorsBecome a sponsor
Improve this Doc

App Layout

First thing we should do for our App is to create index.html file with app's skeleton. Framework7 Vue intended to be used with bundlers like webpack, so the index.html styles and scripts should be auto injected/generated.

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar (Android only) -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Framework7 styles -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- App Root Element -->
    <div id="app"></div>

    <!-- Scripts will be auto injected -->
  </body>
</html>

The <div id="app"></div> is where your main app skeleton should be. You can mount its content as a component or (just for example) we can start to write app skeleton right inside of this div:

Basic Layout

Let's look at the very basic app component layout:

<template>
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app v-bind="{ theme: 'auto', name: 'My App', id: 'com.demoapp.test' }">
    <!-- Your main view, should have "main" prop -->
    <f7-view main>
      <!-- Initial Page -->
      <f7-page>
        <!-- Top Navbar-->
        <f7-navbar title="Awesome App"></f7-navbar>
        <!-- Toolbar-->
        <f7-toolbar bottom>
          <f7-link>Link 1</f7-link>
          <f7-link>Link 2</f7-link>
        </f7-toolbar>
        <!-- Page Content -->
        <p>Page content goes here</p>
        <f7-link href="/about/">About App</f7-link>
      </f7-page>
    </f7-view>
  </f7-app>
</template>

Advanced Layout

Now, let's look on more advanced layout where we will also add side panels with views and popup

<template>
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app v-bind="{ theme: 'auto', name: 'My App', id: 'com.demoapp.test' }">

    <!-- Left Panel with "cover" effect -->
    <f7-panel left cover>
      <f7-view>
        <f7-page>
          <f7-navbar title="Left Panel"></f7-navbar>
          <f7-block>
            <p>Here comes the left panel text</p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>

    <!-- Right Panel with "reveal" effect -->
    <f7-panel right reveal>
      <f7-view>
        <f7-page>
          <f7-navbar title="Right Panel"></f7-navbar>
          <f7-block>
            <p>Here comes the right panel text</p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>

    <!-- Main view-->
    <f7-view main>
      <f7-page>
        <f7-navbar title="Awesome App"></f7-navbar>
        <!-- Page content -->
        <f7-block>
          <p>Here comes main view page text</p>
        </f7-block>
        <!-- Buttons to open panels -->
        <f7-row>
          <f7-col>
            <f7-button panel-open="left">Left Panel</f7-button>
          </f7-col>
          <f7-col>
            <f7-button panel-open="right">Right Panel</f7-button>
          </f7-col>
        </f7-row>
        <!-- Button to open popup -->
        <f7-button popup-open="#my-popup">Open Popup</f7-button>
      </f7-page>
    </f7-view>

    <!-- Popup. All modals should be outside of Views -->
    <f7-popup id="my-popup">
      <f7-view>
        <f7-page>
          <f7-navbar title="Popup">
            <!-- Link to close popup -->
            <f7-nav-right>
              <f7-link popup-close>Close</f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-block>
            <p>Here comes popup text</p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-popup>
  </f7-app>
</template>

You can read more about views, navbar, toolbar, pages, panels and other components in appropriate sections.

Initialize App

Now when we have basic template, we need to initialize our app in (for example) my-app.js