Framework7-Vue Starter

by wenjm

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>
    <f7-page>
      <f7-navbar title="Action Sheet not working"></f7-navbar>
      <p class="row">
        <!-- One group, open by direct accessing instance .open() method -->
        <f7-button class="col" raised @click="$refs.actionsOneGroup.f7Actions.open()">Working</f7-button>
        <!-- Two groups, open by "actions-open" attribute -->
        <f7-button class="col" raised actions-open="#actions-two-groups">Not working</f7-button>
      </p>
           <!-- One Group -->
    <f7-actions ref="actionsOneGroup">
      <f7-actions-group>
        <f7-actions-label>Do something</f7-actions-label>
        <f7-actions-button bold>Button 1</f7-actions-button>
        <f7-actions-button>Button 2</f7-actions-button>
        <f7-actions-button color="red">Cancel</f7-actions-button>
      </f7-actions-group>
    </f7-actions>
    <!-- Two Groups -->
    <f7-actions id="actions-two-groups">
      <f7-actions-group>
        <f7-actions-label>Do something</f7-actions-label>
        <f7-actions-button bold>Button 1</f7-actions-button>
        <f7-actions-button>Button 2</f7-actions-button>
      </f7-actions-group>
      <f7-actions-group>
        <f7-actions-button color="red">Cancel</f7-actions-button>
      </f7-actions-group>
    </f7-actions>
    </f7-page>
  </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
Vue.use(Framework7Vue, Framework7)

// Init Page Components
Vue.component('page-about', {
  template: '#page-about'
});
Vue.component('page-form', {
  template: '#page-form'
});
Vue.component('page-dynamic-routing', {
  template: '#page-dynamic-routing'
});
Vue.component('page-not-found', {
  template: '#page-not-found'
});

// 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: '(.*)',
        component: 'page-not-found',
      },
    ],
  }
});