Framework7 + Vue Starter

by Maiki Nahara

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/framework7.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/framework7-vue/framework7-vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/framework7.min.js"></script>
<div id="app">
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app :params="{ theme: 'auto', name: 'My App', id: 'com.demoapp.test' }">
    <!-- 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-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 url="/"></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>
</div>

CSS

.swiper-container {
  height: 300px;
}

JavaScript

Framework7.use(Framework7Vue);

Vue.component('app', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

/*
var app = new Vue({
  el: '#app',
  data() {
    return {
      f7params: {
        theme: 'ios',
        routes: [{
            path: '/',
            content: `
              <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>`
          },
          {
            path: '/page1/',
            content: `
            <div class="page">
              <div class="navbar">
                <div class="navbar-inner sliding">
                  <div class="left">
                    <a href="#" class="link back">
                      <i class="icon icon-back"></i>
                      <span class="ios-only">Back</span>
                    </a>
                  </div>
                  <div class="title">Page 1</div>
                </div>
              </div>
              <div class="toolbar">
                <div class="toolbar-inner">
                  <a href="/" class="link">To Home</a>
                  <a href="/page1/" class="link">To Page 1</a>
                  <a href="/page2/" class="link">To Page 2</a>
                </div>
              </div>
              <div class="page-content">
                Page 1
              </div>
            </div>
          `
          }
        ],
        name: 'My App',
        id:...