Framework7-Vue Starter

by Echo Chen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.2.5/js/framework7.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/framework7@2.2.5/dist/css/framework7.min.css">
<script src="https://unpkg.com/framework7-vue@2.2.5/dist/framework7-vue.min.js"></script>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
<div id="app">

    <!-- Main View -->
    <f7-view id="main-view" main>
      <f7-page>
        <page-home></page-home>
      </f7-page>
    </f7-view>


  <template id="page-home">
    <f7-page>
      <f7-list inline-labels>
        <f7-list-item>
          <f7-label>Name</f7-label>
          <f7-input type="text" placeholder="Please input your name"
            maxlength="11" :value="name" clear-button
            @input="name = $event.target.value"
            @change="vu('name')"></f7-input>
        </f7-list-item>
      </f7-list>
      <p>
      {{name}}
      </p>
    </f7-page>
  </template>

JavaScript

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


Vue.component('page-home', {
  template: '#page-home',
  data() {
  	return {
    	name: '',
    };
  },
});
// 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: 'auto', // Automatic theme detection
    // App routes
    routes: [
      {
        path: '/home/',
        component: 'page-home'
      },
    ],
  }
});