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">
</div>

CSS

.swiper-container {
  height: 300px;
}

JavaScript

Framework7.use(Framework7Vue);

Vue.component('App', {
      data() {
      return {
        // app params
        f7params: {
          name: 'My App',
          id: 'com.myapp.test',
          // specify routes for app
          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>`,
            },
          ],
        }
      };
    },
  template: `
  <f7-app :params="f7params">
    <!-- Current View/Router, initial page will be loaded from home.vue component -->
    <f7-view main url="/"></f7-view>
  </f7-app>
  `
})

debugger
new Vue({
  el: '#app'
});

/*
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:...