nolimits4web

<template>
  <div class="page">
    <ul>
      <!-- getter has value in ".value" property -->
      ${users.value.map((user) => $h`
        <li>${user.name}</li>
      `)}
    </ul>
  </div>
</template>

nolimits4web

import Framework7 from 'framework7';
import store from 'path/to/store.js';

const app = new Framework7({
  // pass store instance
  store,
  // ...
})

nolimits4web

import { createStore } from 'framework7';

// create store
const store = createStore({
  // start with the state (store data)
  state: {
    users: [],
    // ...
  },

nolimits4web

export default (props, { $f7, $on, $update }) => {
  let foo = 'bar';
  const items = [
    {
      title: 'Item 1'
    },
    {
      title: 'Item 2'
    },
  ];

nolimits4web

<template>
  <div class="page">
    <p>Value is: ${foo}</p>
    <p>
      <a href="#" @click=${changeValue}>Change value</a>
    </p>
    <ul>
      ${items.map((item) => $h`
      <li>${item.title}</li>
      `)}

nolimits4web

<template>
  <div class="page">
    <p>Value is: {{foo}}</p>
    <p>
      <a href="#" @click="changeValue">Change value</a>
    </p>
    <ul>
      {{each items}}
      <li>{{title}}</li>
      {{/each}}

nolimits4web

<App { params }>
  <View main url="/" />
</App>

<script>
  import { App, View } from 'framework7-svelte';
  import Home from './pages/home.svelte';

  const params = {
    // ...

nolimits4web

<App>
  <Panel left cover swipe visibleBreakpoint={768}>...</Panel>
  <Panel right cover visibleBreakpoint={1024}>...</Panel>
  ...
</App>

nolimits4web

<div class="list">
  <ul>
    <my-list-item id="item-1"></my-list-item>
  </ul>
</div>

nolimits4web

import { Component } from 'famework7';

export default class extends Component {
  data() {
    return { foo: 'bar' }
  }
  mounted() {
    console.log('mounted');
    this.onMounted(); // call method
  }