Framework7-Vue Starter

by Maiki Nahara

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<script src="https://unpkg.com/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>
    
    <f7-panel left reveal theme-dark>
      <f7-view id="left-panel-view">
        <component :is='panelToUse'></component>
      </f7-view>
    </f7-panel>
    
    <!-- Main View -->
    <f7-view id="main-view" main url='/'>
    </f7-view>



    <!-- Page Not Found Template -->
    <template id="page-not-found">
  <f7-page>
    <f7-navbar title="Not found" back-link="Back"></f7-navbar>
    <f7-block strong>
      <p>Sorry</p>
      <p>Requested content not found.</p>
    </f7-block>
  </f7-page>
</template>

JavaScript

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

Vue.component('page-not-found', {
  template: '#page-not-found'
});

Vue.component('toolbar-bkp', {
  template: `
        <f7-toolbar bottom>
          <f7-link>Left Link</f7-link>
          <f7-link>Right Link</f7-link>
        </f7-toolbar>
`
})

Vue.component('my-panel-1', {
  template: `
        <f7-page>
          <f7-navbar title="Left Panel 1"></f7-navbar>
          <f7-block strong>
            <p>Left panel content goes here</p>
          </f7-block>
          <f7-block-title>Load page in panel</f7-block-title>
          <f7-list>
            <f7-list-item link="/about/" title="About"></f7-list-item>
            <f7-list-item link="/form/" title="Form"></f7-list-item>
          </f7-list>
          <f7-block-title>Load page in main view</f7-block-title>
          <f7-list>
            <f7-list-item link="/about/" title="About" view="#main-view" panel-close></f7-list-item>
            <f7-list-item link="/form/" title="Form" view="#main-view" panel-close></f7-list-item>
          </f7-list>
        </f7-page>
`
})

Vue.component('my-panel-2', {
  template: `
        <f7-page>
          <f7-navbar title="Left Panel 2"></f7-navbar>
          <f7-block strong>
            <p>Left panel content goes here</p>
          </f7-block>
          <f7-block-title>Load page in panel</f7-block-title>
          <f7-list>
            <f7-list-item link="/about/" title="About"></f7-list-item>
            <f7-list-item link="/form/" title="Form"></f7-list-item>
          </f7-list>
          <f7-block-title>Load page in main view</f7-block-title>
          <f7-list>
            <f7-list-item link="/about/" title="About" view="#main-view" panel-close></f7-list-item>
            <f7-list-item link="/form/" title="Form" view="#main-view" panel-close></f7-list-item>
          </f7-list>
        </f7-page>
`
})

Vue.component('my-toolbar', {
  template: `
 <f7-toolbar tabbar labels class="toolbar-bottom-md bg-color-cyan-9">
 ...