First thing we should do for our App is to create index.html file with app's skeleton.
<!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, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Your app title -->
<title>My App</title>
<!-- Path to Framework7 Library CSS, iOS Theme -->
<link rel="stylesheet" href="path/to/framework7.ios.min.css">
<!-- Path to Framework7 color related styles, iOS Theme -->
<link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="path/to/my-app.css">
</head>
<body>
<!-- App Root Element -->
<div id="app"></div>
<!-- Path to Vue js -->
<script type="text/javascript" src="path/to/vue.min.js"></script>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="path/to/framework7.min.js"></script>
<!-- Path to Framework7 Vue Plugin -->
<script type="text/javascript" src="path/to/framework7-vue.min.js"></script>
<!-- Path to your app js where you init your app-->
<script type="text/javascript" src="path/to/my-app.js"></script>
</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:
Let's look at the very basic app layout:
<!DOCTYPE html>
<html>
<head>
<!-- ... metas and styles ... -->
</head>
<body>
<!-- App Root Element -->
<div id="app">
<!-- Status bar overlay for full screen mode (Cordova or PhoneGap) -->
<f7-statusbar></f7-statusbar>
<!-- Views -->
<f7-views>
<!-- Your main view, should have "main" prop -->
<f7-view main>
<!-- Pages container, because we use fixed navbar and toolbar, it has additional appropriate props -->
<f7-pages navbar-fixed toolbar-fixed>
<!-- Initial Page -->
<f7-page>
<!-- Top Navbar-->
<f7-navbar title="Awesome App"></f7-navbar>
<!-- Toolbar-->
<f7-toolbar>
<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-pages>
</f7-view>
</f7-views>
</div>
<!-- ... scripts ... -->
</body>
</html>Now, let's look on more advanced layout where we will also add side panels with views, popup and will use different Navbar/Toolbar Layout types for iOS and Material themes.
<!DOCTYPE html>
<html>
<head>
<!-- ... metas and styles ... -->
</head>
<body>
<!-- App Root Element -->
<div id="app">
<!-- Status bar overlay for full screen mode (Cordova or PhoneGap) -->
<f7-statusbar></f7-statusbar>
<!-- Left Panel with "cover" effect -->
<f7-panel left cover>
<f7-view>
<f7-pages navbar-fixed>
<f7-page>
<f7-navbar title="Left Panel"></f7-navbar>
<f7-block>
<p>Here comes the left panel text</p>
</f7-block>
</f7-page>
</f7-pages>
</f7-view>
</f7-panel>
<!-- Right Panel with "reveal" effect -->
<f7-panel right reveal>
<f7-view>
<f7-pages navbar-fixed>
<f7-page>
<f7-navbar title="Right Panel"></f7-navbar>
<f7-block>
<p>Here comes the right panel text</p>
</f7-block>
</f7-page>
</f7-pages>
</f7-view>
</f7-panel>
<!-- Views -->
<f7-views>
<!-- Main view-->
<f7-view main navbar-through toolbar-fixed>
<!-- For iOS theme we use navbar-through layout so the navbar should be a child of the View -->
<f7-navbar v-if="$theme.ios" title="Awesome App"></f7-navbar>
<f7-pages navbar-fixed toolbar-fixed>
<f7-page>
<!-- For Material theme we use navbar-fixed layout so the navbar should be a child of the Page -->
<f7-navbar v-if="$theme.material" title="Awesome App"></f7-navbar>
<!-- Page content -->
<f7-block>
<p>Here comes main view page text</p>
</f7-block>
<!-- Buttons to open panels -->
<f7-grid>
<f7-col>
<f7-button open-panel="left">Left Panel</f7-button>
</f7-col>
<f7-col>
<f7-button open-panel="right">Right Panel</f7-button>
</f7-col>
</f7-grid>
<!-- Button to open popup -->
<f7-button open-popup="#my-popup">Open Popup</f7-button>
</f7-page>
</f7-pages>
</f7-view>
</f7-views>
<!-- Popup. All modals should be outside of Views -->
<f7-popup id="my-popup">
<f7-view>
<f7-pages navbar-fixed>
<f7-page>
<f7-navbar title="Popup">
<!-- Link to close popup -->
<f7-nav-right>
<f7-link close-popup>Close</f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block>
<p>Here comes popup text</p>
</f7-block>
</f7-page>
</f7-pages>
</f7-view>
</f7-popup>
</div>
<!-- ... scripts ... -->
</body>
</html>You can read more about statusbar overlay, views, navbar, toolbar, pages, panels and other components in appropriate sections.
Now when we have basic template, we need to initialize our app in (for example) my-app.js