Framework7-Vue Starter

by zoomieos

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/[email protected]/dist/framework7-vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <!-- Main View -->
  <f7-view id="main-view" main url="/home/"></f7-view>
  
</div>

<!-- Home Page Template -->
<template>
    <f7-page id="page-home" class="style__test">
        <f7-navbar>
            <f7-nav-left>
                <f7-link icon="icon-bars" panel-open="left">
                    <img :src="dropdown">
                </f7-link>
            </f7-nav-left>
            <f7-nav-title style="color: white" large>
                Fuel
            </f7-nav-title>
            <f7-nav-right>
                <f7-link>
                    <img :src="headerCar">
                </f7-link>
                <f7-link>
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 511.746 511.746" style="fill: white; enable-background:new 0 0 511.746 511.746;" xml:space="preserve" width="20" height="20">
<g>
	<path d="M421.74,39.391V9.388h-30v30.003H120.006V9.388h-30v30.003H0v462.967h511.746V39.391H421.74z M90.006,69.391v30.003h30   V69.391H391.74v30.003h30V69.391h60.006v60.005H30V69.391H90.006z M30,472.358V159.396h451.746v312.962H30z"/>
    <rect x="79.393" y="199.401" width="52.941" height="52.941"/>
    <rect x="179.398" y="199.401" width="52.942" height="52.941"/>
    <rect x="279.405" y="199.401" width="52.941" height="52.941"/>
    <rect x="379.411" y="199.401" width="52.942" height="52.941"/>
    <rect x="79.393" y="289.406" width="52.941" height="52.941"/>
    <rect x="179.398" y="289.406" width="52.942" height="52.941"/>
    <rect x="279.405" y="289.406" width="52.941" height="52.941"/>
   ...

JavaScript

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

// Init Page Components
Vue.component('page-home', {
  template: '#page-home'
});


// 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: '/home/',
        component: 'page-home',       
      },
    ],
  },
    methods: {
    
      openm () {
            
            var app = this.$f7; 
            app.smartSelect.open(".ss-1 .smart-select")        
      }, 
      
      openm2 () {
            
            var app = this.$f7; 
            app.smartSelect.open(".ss-2")        
      },       
      
    }  

});