Framework7-Vue Starter

by Maiki Nahara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.8/js/framework7.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.8/css/framework7.min.css">
<script src="https://unpkg.com/framework7-vue@2.0.7/dist/framework7-vue.min.js"></script>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<div id="app">
  <!-- Main View -->
  <f7-view id="main-view" main url="/home/"></f7-view>
</div>

<!-- Home Page Template -->
<template id="page-home">
  <f7-page>
    <f7-link href="/about/">About</f7-link>
      <div class="list">
  <ul>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Item 1</div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Item 2</div>
      </div>
    </li>
  </ul>
</div>
  </f7-page>
</template>

<template id="page-about">
  <f7-page color-theme="orange" theme-dark>
    <f7-link href="/home/">Home</f7-link>
      <div class="list">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 1</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 2</div>
            </div>
          </li>
        </ul>
      </div>
  </f7-page>
</template>

JavaScript

// Init F7 Vue Plugin
Vue.use(Framework7Vue, Framework7)

// Init Page Components
Vue.component('page-home', {
  template: '#page-home'
});
Vue.component('page-about', {
  template: '#page-about'
});

// Init App
new Vue({
  el: '#app',
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app', // App root element
    id: 'io.framework7.testapp', // App bundle ID
    name: 'Framework7', // App name
    theme: 'ios', // Automatic theme detection
    // App routes
    routes: [{
        path: '/home/',
        component: 'page-home',
      },
      {
        path: '/about/',
        component: 'page-about',
      },
    ],
  }
});