Framework7-Vue Starter

by Silver775

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/framework7@5.1.1/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@5.1.1/css/framework7.bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/framework7-vue@5.1.1/framework7-vue.bundle.min.js"></script>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>


<div id="app">
  <f7-app :params="f7params">
    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-view id="main-view" main>
      <f7-page>
        <f7-navbar title="Test">
        </f7-navbar>
        
<f7-block-title>Something more simple</f7-block-title>
<f7-list media-list>
  <f7-list-item
    title="Yellow Submarine"
    subtitle="Beatles">
    <f7-icon material="home" slot="media"></f7-icon>
  </f7-list-item>
  <f7-list-item
    link="#"
    title="Don't Stop Me Now"
    subtitle="Queen">
    <f7-icon material="public" slot="media"></f7-icon>
  </f7-list-item>
  <f7-list-item
    title="Billie Jean"
    subtitle="Michael Jackson">
    <f7-icon material="person" slot="media"></f7-icon>
  </f7-list-item>
</f7-list>
                
        
      </f7-page>
    </f7-view>

  </f7-app>
</div>

JavaScript

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

// Init App
new Vue({
  el: '#app',
  data() {
    return {
      photos: [
      	'https://placekitten.com/300/300',
        'https://placekitten.com/200/300',
        'https://placekitten.com/400/300',
      ],
      // Framework7 params here
      f7params: {
        root: '#app', // App root element
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
        routes: [],
      }
    }
  },
});