Framework7-Vue Starter

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<script src="https://unpkg.com/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>



    <!-- Main View -->
    <f7-view id="main-view" main>
      <f7-page>
        <f7-navbar>
          <f7-nav-title>My App</f7-nav-title>
        </f7-navbar>
        <f7-list>
          <f7-list-item title="Car" smart-select :smart-select-params="{openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search car', on: { open: onSmartSelectOpen }}">
            <select name="car" multiple>
              <optgroup label="Japanese">
                <option value="honda" selected>Honda</option>
                <option value="lexus">Lexus</option>
                <option value="mazda">Mazda</option>
                <option value="nissan">Nissan</option>
                <option value="toyota">Toyota</option>
              </optgroup>
              <optgroup label="German">
                <option value="audi" selected>Audi</option>
                <option value="bmw">BMW</option>
                <option value="mercedes">Mercedes</option>
                <option value="vw">Volkswagen</option>
                <option value="volvo">Volvo</option>
              </optgroup>
              <optgroup label="American">
                <option value="cadillac">Cadillac</option>
                <option value="chrysler">Chrysler</option>
                <option value="dodge">Dodge</option>
                <option value="ford" selected>Ford</option>
              </optgroup>
            </select>
          </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 {
		  // 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
        // App routes
      }
    }
  },
  methods: {
    onSmartSelectOpen(ss) {
      ss.$containerEl.find('.list').addClass('sortable');
      ss.$containerEl.find('li:not(.item-divider)').append('<div class="sortable-handler"></div>');
    	this.$f7.sortable.enable(ss.$containerEl.find('.list'))
    },
  },
});