From 1ef505f3e2a1d8cac0d04a9b413f7e6a5247f43c Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.ir>
Date: Sun, 14 Jan 2018 15:08:20 +0330
Subject: [PATCH] misc: update kitchen-sink examples to framework7-vue 2.0.0

---
 examples/kitchen-sink/pages/action-sheet.vue  | 232 +++--
 examples/kitchen-sink/pages/autocomplete.vue  | 259 +++--
 examples/kitchen-sink/pages/badge.vue         |  54 +-
 examples/kitchen-sink/pages/calendar-page.vue | 123 +++
 examples/kitchen-sink/pages/calendar.vue      | 185 ++++
 examples/kitchen-sink/pages/chips.vue         | 177 ++--
 examples/kitchen-sink/pages/color-themes.vue  |  81 +-
 examples/kitchen-sink/pages/contacts-list.vue | 224 +----
 examples/kitchen-sink/pages/content-block.vue |  67 +-
 examples/kitchen-sink/pages/data-table.vue    |  68 +-
 examples/kitchen-sink/pages/dialog.vue        | 143 +--
 examples/kitchen-sink/pages/fab-morph.vue     | 138 +--
 examples/kitchen-sink/pages/fab.vue           | 166 ++--
 examples/kitchen-sink/pages/form-storage.vue  |  13 +-
 examples/kitchen-sink/pages/grid.vue          | 273 +++---
 examples/kitchen-sink/pages/home.vue          | 233 +++--
 examples/kitchen-sink/pages/icons.vue         |  58 +-
 .../kitchen-sink/pages/infinite-scroll.vue    |  72 +-
 examples/kitchen-sink/pages/lazy-load.vue     |  74 +-
 examples/kitchen-sink/pages/list.vue          | 886 ++++++------------
 .../kitchen-sink/pages/login-screen-page.vue  |  88 +-
 examples/kitchen-sink/pages/login-screen.vue  | 124 +--
 .../kitchen-sink/pages/navbar-hide-scroll.vue |  26 +-
 examples/kitchen-sink/pages/navbar.vue        |  51 +-
 examples/kitchen-sink/pages/photo-browser.vue | 144 +--
 examples/kitchen-sink/pages/picker.vue        | 279 ++++++
 examples/kitchen-sink/pages/popover.vue       |  70 +-
 examples/kitchen-sink/pages/popup.vue         | 102 +-
 examples/kitchen-sink/pages/preloader.vue     | 116 ++-
 examples/kitchen-sink/pages/progressbar.vue   | 107 +--
 .../kitchen-sink/pages/pull-to-refresh.vue    | 124 ++-
 .../pages/searchbar-expandable.vue            | 314 ++-----
 examples/kitchen-sink/pages/searchbar.vue     | 306 ++----
 examples/kitchen-sink/pages/sheet-modal.vue   | 120 ++-
 examples/kitchen-sink/pages/smart-select.vue  | 172 ++--
 examples/kitchen-sink/pages/sortable.vue      | 230 ++---
 examples/kitchen-sink/pages/statusbar.vue     |  29 +-
 .../kitchen-sink/pages/subnavbar-title.vue    |  40 +-
 examples/kitchen-sink/pages/subnavbar.vue     |  55 +-
 examples/kitchen-sink/pages/swipeout.vue      | 538 +++++------
 .../pages/swiper-3d-coverflow.vue             |  15 +-
 .../kitchen-sink/pages/swiper-3d-cube.vue     |  15 +-
 .../kitchen-sink/pages/swiper-3d-flip.vue     |  15 +-
 .../pages/swiper-custom-controls.vue          |  15 +-
 examples/kitchen-sink/pages/swiper-fade.vue   |  15 +-
 .../kitchen-sink/pages/swiper-gallery.vue     |  38 +-
 .../kitchen-sink/pages/swiper-horizontal.vue  |  15 +-
 examples/kitchen-sink/pages/swiper-lazy.vue   |  15 +-
 examples/kitchen-sink/pages/swiper-loop.vue   |  15 +-
 .../kitchen-sink/pages/swiper-multiple.vue    |  18 +-
 examples/kitchen-sink/pages/swiper-nested.vue |  15 +-
 .../pages/swiper-pagination-fraction.vue      |  15 +-
 .../pages/swiper-pagination-progress.vue      |  15 +-
 .../kitchen-sink/pages/swiper-parallax.vue    |  15 +-
 .../kitchen-sink/pages/swiper-scrollbar.vue   |  15 +-
 .../pages/swiper-space-between.vue            |  15 +-
 .../kitchen-sink/pages/swiper-vertical.vue    |  15 +-
 examples/kitchen-sink/pages/swiper-zoom.vue   |  15 +-
 examples/kitchen-sink/pages/swiper.vue        |  24 +-
 examples/kitchen-sink/pages/tabbar-labels.vue | 103 +-
 .../kitchen-sink/pages/tabbar-scrollable.vue  |  82 +-
 examples/kitchen-sink/pages/tabbar.vue        |  88 +-
 examples/kitchen-sink/pages/tabs-animated.vue |  56 +-
 examples/kitchen-sink/pages/tabs-routable.vue |  36 +-
 examples/kitchen-sink/pages/tabs-static.vue   | 112 +--
 .../kitchen-sink/pages/tabs-swipeable.vue     |  56 +-
 examples/kitchen-sink/pages/tabs.vue          |  57 +-
 .../pages/timeline-horizontal-calendar.vue    |  29 +-
 .../pages/timeline-horizontal.vue             |  29 +-
 .../kitchen-sink/pages/timeline-vertical.vue  |  12 +-
 examples/kitchen-sink/pages/timeline.vue      |  33 +-
 examples/kitchen-sink/pages/toast.vue         |  89 +-
 .../pages/toolbar-hide-scroll.vue             |  34 +-
 .../kitchen-sink/pages/toolbar-tabbar.vue     |  65 +-
 examples/kitchen-sink/pages/virtual-list.vue  | 128 ++-
 75 files changed, 3665 insertions(+), 4225 deletions(-)
 create mode 100644 examples/kitchen-sink/pages/calendar-page.vue
 create mode 100644 examples/kitchen-sink/pages/calendar.vue
 create mode 100644 examples/kitchen-sink/pages/picker.vue

diff --git a/examples/kitchen-sink/pages/action-sheet.vue b/examples/kitchen-sink/pages/action-sheet.vue
index 2e09a8e..646a499 100644
--- a/examples/kitchen-sink/pages/action-sheet.vue
+++ b/examples/kitchen-sink/pages/action-sheet.vue
@@ -1,27 +1,82 @@
 <template>
   <f7-page>
     <f7-navbar title="Action Sheet" back-link="Back"></f7-navbar>
-      <f7-block class="row">
-        <f7-col>
-          <f7-button raised @click="openDemo1">One group</f7-button>
-        </f7-col>
-        <f7-col>
-          <f7-button raised @click="openDemo2">Two groups</f7-button>
-        </f7-col>
-      </f7-block>
+    <f7-block strong>
+      <p class="row">
+        <!-- One group, open by direct accessing instance .open() method -->
+        <f7-button class="col" raised @click="$refs.actionsOneGroup.f7Actions.open()">One group</f7-button>
+        <!-- Two groups, open by "actions-open" attribute -->
+        <f7-button class="col" raised actions-open="#actions-two-groups">Two groups</f7-button>
+      </p>
+      <p>
+        <!-- Actions Grid, open by changing actionGridOpened prop -->
+        <f7-button raised @click="actionGridOpened = true">Action Grid</f7-button>
+      </p>
+    </f7-block>
 
-      <f7-block>
-        <f7-button raised @click="openGrid">Action Grid</f7-button>
-      </f7-block>
+    <f7-block-title>Action Sheet To Popover</f7-block-title>
+    <f7-block strong>
+      <p>Action Sheet can be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones: <f7-button style="display:inline-block" class="button-to-popover" @click="openActionsPopover">Actions</f7-button></p>
+    </f7-block>
+
+    <!-- One Group -->
+    <f7-actions ref="actionsOneGroup">
+      <f7-actions-group>
+        <f7-actions-label>Do something</f7-actions-label>
+        <f7-actions-button bold>Button 1</f7-actions-button>
+        <f7-actions-button>Button 2</f7-actions-button>
+        <f7-actions-button color="red">Cancel</f7-actions-button>
+      </f7-actions-group>
+    </f7-actions>
+
+    <!-- Two Groups -->
+    <f7-actions id="actions-two-groups">
+      <f7-actions-group>
+        <f7-actions-label>Do something</f7-actions-label>
+        <f7-actions-button bold>Button 1</f7-actions-button>
+        <f7-actions-button>Button 2</f7-actions-button>
+      </f7-actions-group>
+      <f7-actions-group>
+        <f7-actions-button color="red">Cancel</f7-actions-button>
+      </f7-actions-group>
+    </f7-actions>
+
+    <!-- Grid -->
+    <f7-actions :grid="true" :opened="actionGridOpened" @actions:closed="actionGridOpened = false">
+      <f7-actions-group>
+        <f7-actions-button>
+          <img slot="media" src="http://lorempixel.com/96/96/people/1" width="48"/>
+          <span>Button 1</span>
+        </f7-actions-button>
+        <f7-actions-button>
+          <img slot="media" src="http://lorempixel.com/96/96/people/2" width="48"/>
+          <span>Button 2</span>
+        </f7-actions-button>
+        <f7-actions-button>
+          <img slot="media" src="http://lorempixel.com/96/96/people/3" width="48"/>
+          <span>Button 3</span>
+        </f7-actions-button>
+      </f7-actions-group>
+      <f7-actions-group>
+        <f7-actions-button>
+          <img slot="media" src="http://lorempixel.com/96/96/fashion/4" width="48"/>
+          <span>Button 4</span>
+        </f7-actions-button>
+        <f7-actions-button>
+          <img slot="media" src="http://lorempixel.com/96/96/fashion/5" width="48"/>
+          <span>Button 5</span>
+        </f7-actions-button>
+        <f7-actions-button>
+          <img slot="media" src="http://lorempixel.com/96/96/fashion/6" width="48"/>
+          <span>Button 6</span>
+        </f7-actions-button>
+      </f7-actions-group>
+    </f7-actions>
 
-      <f7-block-title>Action Sheet To Popover</f7-block-title>
-      <f7-block strong>
-        <p>Action Sheet can be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones: <f7-button style="display:inline-block" class="button-to-popover" @click="openActionsPopover">Actions</f7-button></p>
-      </f7-block>
   </f7-page>
 </template>
 <script>
-import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Col, f7Link, f7Button } from 'framework7-vue';
+import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Link, f7Button, f7Actions, f7ActionsGroup, f7ActionsLabel, f7ActionsButton } from 'framework7-vue';
 
 export default {
   components: {
@@ -29,125 +84,56 @@ export default {
     f7Navbar,
     f7BlockTitle,
     f7Block,
-    f7Col,
     f7Link,
     f7Button,
+    f7Actions,
+    f7ActionsGroup,
+    f7ActionsLabel,
+    f7ActionsButton,
+  },
+  data() {
+    return {
+      actionGridOpened: false,
+    };
   },
   methods: {
-    openDemo1() {
-      const self = this;
-      self.actions1.open();
-    },
-    openDemo2() {
-      const self = this;
-      self.actions2.open();
-    },
-    openGrid() {
-      const self = this;
-      self.actionsGrid.open();
-    },
     openActionsPopover() {
       const self = this;
+      const app = self.$f7;
+      if (!self.actionsToPopover) {
+        self.actionsToPopover = app.actions.create({
+          buttons: [
+            {
+              text: 'Do something',
+              label: true,
+            },
+            {
+              text: 'Button 1',
+              bold: true,
+            },
+            {
+              text: 'Button 2',
+            },
+            {
+              text: 'Cancel',
+              color: 'red',
+            },
+          ],
+          // Need to specify popover target
+          targetEl: self.$el.querySelector('.button-to-popover'),
+        });
+      }
+
+      // Open
       self.actionsToPopover.open();
     },
   },
   on: {
     pageBeforeRemove() {
       const self = this;
-      self.actions1.destroy();
-      self.actions2.destroy();
-      self.actionsGrid.destroy();
-      self.actionsToPopover.destroy();
-    },
-    pageInit() {
-      const self = this;
-
-      // 1 Group
-      const buttons1 = [
-        {
-          text: 'Do something',
-          label: true,
-        },
-        {
-          text: 'Button 1',
-          bold: true,
-        },
-        {
-          text: 'Button 2',
-        },
-        {
-          text: 'Cancel',
-          color: 'red',
-        },
-      ];
-
-      // 2 Groups
-      const buttons2 = [
-        // First Group
-        [
-          {
-            text: 'Do something',
-            label: true,
-          },
-          {
-            text: 'Button 1',
-            bold: true,
-          },
-          {
-            text: 'Button 2',
-          },
-        ],
-        // Second Group
-        [
-          {
-            text: 'Cancel',
-            color: 'red',
-          },
-        ],
-      ];
-
-      // Grid buttons with icons/images
-      const gridButtons = [
-        [
-          {
-            text: 'Button 1',
-            icon: '<img src="http://lorempixel.com/96/96/people/1" width="48"/>',
-          },
-          {
-            text: 'Button 2',
-            icon: '<img src="http://lorempixel.com/96/96/people/2" width="48">',
-          },
-          {
-            text: 'Button 3',
-            icon: '<img src="http://lorempixel.com/96/96/people/3" width="48">',
-          },
-        ],
-        [
-          {
-            text: 'Button 1',
-            icon: '<img src="http://lorempixel.com/96/96/fashion/4" width="48"/>',
-          },
-          {
-            text: 'Button 2',
-            icon: '<img src="http://lorempixel.com/96/96/fashion/5" width="48">',
-          },
-          {
-            text: 'Button 3',
-            icon: '<img src="http://lorempixel.com/96/96/fashion/6" width="48">',
-          },
-        ],
-      ];
-
-      self.actions1 = self.$f7.actions.create({ buttons: buttons1 });
-      self.actions2 = self.$f7.actions.create({ buttons: buttons2 });
-      self.actionsGrid = self.$f7.actions.create({ buttons: gridButtons, grid: true });
-
-      // Actions To Popover
-      self.actionsToPopover = self.$f7.actions.create({
-        buttons: buttons1,
-        // Need to specify popover target
-        targetEl: self.$el.querySelector('.button-to-popover'),
-      });
+      if (self.actionsToPopover) {
+        self.actionsToPopover.destroy();
+      }
     },
   },
 };
diff --git a/examples/kitchen-sink/pages/autocomplete.vue b/examples/kitchen-sink/pages/autocomplete.vue
index 0c03bf4..8c82c8e 100644
--- a/examples/kitchen-sink/pages/autocomplete.vue
+++ b/examples/kitchen-sink/pages/autocomplete.vue
@@ -1,28 +1,20 @@
 <template>
   <f7-page>
-    <div class="navbar">
-      <div class="navbar-inner sliding">
-        <div class="left">
-          <a href="#" class="link back">
-            <i class="icon icon-back"></i>
-            <span class="ios-only">Back</span>
-          </a>
-        </div>
-        <div class="title">Autocomplete</div>
-        <div class="subnavbar">
-          <form class="searchbar" id="searchbar-autocomplete">
-            <div class="searchbar-inner">
-              <div class="searchbar-input-wrap">
-                <input type="search" placeholder="Search"/>
-                <i class="searchbar-icon"></i>
-                <span class="input-clear-button"></span>
-              </div>
-              <span class="searchbar-disable-button">Cancel</span>
+    <f7-navbar title="Autocomplete" back-link="Back">
+      <div class="subnavbar">
+        <form class="searchbar" id="searchbar-autocomplete">
+          <div class="searchbar-inner">
+            <div class="searchbar-input-wrap">
+              <input type="search" placeholder="Search"/>
+              <i class="searchbar-icon"></i>
+              <span class="input-clear-button"></span>
             </div>
-          </form>
-        </div>
+            <span class="searchbar-disable-button">Cancel</span>
+          </div>
+        </form>
       </div>
-    </div>
+    </f7-navbar>
+
     <f7-block-title>Dropdown Autocomplete</f7-block-title>
     <div class="block">
       <p>Dropdown autocomplete is good to use as a quick and simple solution to provide more options in addition to free-type value.</p>
@@ -189,14 +181,14 @@
       f7Navbar,
       f7BlockTitle,
     },
-    data: function () {
+    data() {
       return {
         fruits: 'Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple'.split(' '),
       };
     },
     on: {
       pageBeforeRemove() {
-        var self = this;
+        const self = this;
         // Destroy all autocompletes
         self.autocompleteDropdownSimple.destroy();
         self.autocompleteDropdownExpand.destroy();
@@ -210,29 +202,29 @@
         self.autocompleteStandaloneMultiple.destroy();
         self.autocompleteStandaloneAjax.destroy();
       },
-      pageInit: function () {
-        var self = this;
-        var app = self.$f7;
-        var fruits = self.fruits;
-        var $ = self.$$;
+      pageInit() {
+        const self = this;
+        const app = self.$f7;
+        const fruits = self.fruits;
+        const $ = self.$$;
 
         // Simple Dropdown
         self.autocompleteDropdownSimple = app.autocomplete.create({
           inputEl: '#autocomplete-dropdown',
           openIn: 'dropdown',
-          source: function (query, render) {
-            var results = [];
+          source(query, render) {
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
             }
             // Find matched items
-            for (var i = 0; i < fruits.length; i++) {
+            for (let i = 0; i < fruits.length; i += 1) {
               if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
             }
             // Render items by passing array with result items
             render(results);
-          }
+          },
         });
 
         // Dropdown with input expand
@@ -240,34 +232,34 @@
           inputEl: '#autocomplete-dropdown-expand',
           openIn: 'dropdown',
           expandInput: true, // expand input
-          source: function (query, render) {
-            var results = [];
+          source(query, render) {
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
             }
             // Find matched items
-            for (var i = 0; i < fruits.length; i++) {
+            for (let i = 0; i < fruits.length; i += 1) {
               if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
             }
             // Render items by passing array with result items
             render(results);
-          }
+          },
         });
 
         // Dropdown with all values
         self.autocompleteDropdownAll = app.autocomplete.create({
           inputEl: '#autocomplete-dropdown-all',
           openIn: 'dropdown',
-          source: function (query, render) {
-            var results = [];
+          source(query, render) {
+            const results = [];
             // Find matched items
-            for (var i = 0; i < fruits.length; i++) {
+            for (let i = 0; i < fruits.length; i += 1) {
               if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
             }
             // Render items by passing array with result items
             render(results);
-          }
+          },
         });
 
         // Dropdown with placeholder
@@ -275,19 +267,19 @@
           inputEl: '#autocomplete-dropdown-placeholder',
           openIn: 'dropdown',
           dropdownPlaceholderText: 'Try to type "Apple"',
-          source: function (query, render) {
-            var results = [];
+          source(query, render) {
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
             }
             // Find matched items
-            for (var i = 0; i < fruits.length; i++) {
+            for (let i = 0; i < fruits.length; i += 1) {
               if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
             }
             // Render items by passing array with result items
             render(results);
-          }
+          },
         });
 
         // Dropdown with typeahead
@@ -296,34 +288,34 @@
           openIn: 'dropdown',
           dropdownPlaceholderText: 'Try to type "Pineapple"',
           typeahead: true,
-          source: function (query, render) {
-            var results = [];
+          source(query, render) {
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
             }
             // Find matched items
-            for (var i = 0; i < fruits.length; i++) {
+            for (let i = 0; i < fruits.length; i += 1) {
               if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(fruits[i]);
             }
             // Render items by passing array with result items
             render(results);
-          }
+          },
         });
 
         // Dropdown with ajax data
         self.autocompleteDropdownAjax = app.autocomplete.create({
           inputEl: '#autocomplete-dropdown-ajax',
           openIn: 'dropdown',
-          preloader: true, //enable preloader
+          preloader: true, // enable preloader
           /* If we set valueProperty to "id" then input value on select will be set according to this property */
-          valueProperty: 'name', //object's "value" property name
-          textProperty: 'name', //object's "text" property name
-          limit: 20, //limit to 20 results
+          valueProperty: 'name', // object's "value" property name
+          textProperty: 'name', // object's "text" property name
+          limit: 20, // limit to 20 results
           dropdownPlaceholderText: 'Try "JavaScript"',
-          source: function (query, render) {
-            var autocomplete = this;
-            var results = [];
+          source(query, render) {
+            const autocomplete = this;
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
@@ -332,42 +324,42 @@
             autocomplete.preloaderShow();
 
             // Do Ajax request to Autocomplete data
-            $.ajax({
+            app.request({
               url: './js/autocomplete-languages.json',
               method: 'GET',
               dataType: 'json',
-              //send "query" to server. Useful in case you generate response dynamically
+              // send "query" to server. Useful in case you generate response dynamically
               data: {
-                query: query,
+                query,
               },
-              success: function (data) {
-                // Find matched items
-                for (var i = 0; i < data.length; i++) {
+              success(data) {
+              // Find matched items
+                for (let i = 0; i < data.length; i += 1) {
                   if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
                 }
                 // Hide Preoloader
                 autocomplete.preloaderHide();
                 // Render items by passing array with result items
                 render(results);
-              }
+              },
             });
-          }
+          },
         });
 
         // Dropdown with ajax data
         self.autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
           inputEl: '#autocomplete-dropdown-ajax-typeahead',
           openIn: 'dropdown',
-          preloader: true, //enable preloader
+          preloader: true, // enable preloader
           /* If we set valueProperty to "id" then input value on select will be set according to this property */
-          valueProperty: 'name', //object's "value" property name
-          textProperty: 'name', //object's "text" property name
-          limit: 20, //limit to 20 results
+          valueProperty: 'name', // object's "value" property name
+          textProperty: 'name', // object's "text" property name
+          limit: 20, // limit to 20 results
           typeahead: true,
           dropdownPlaceholderText: 'Try "JavaScript"',
-          source: function (query, render) {
-            var autocomplete = this;
-            var results = [];
+          source(query, render) {
+            const autocomplete = this;
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
@@ -376,48 +368,48 @@
             autocomplete.preloaderShow();
 
             // Do Ajax request to Autocomplete data
-            $.ajax({
+            app.request({
               url: './js/autocomplete-languages.json',
               method: 'GET',
               dataType: 'json',
-              //send "query" to server. Useful in case you generate response dynamically
+              // send "query" to server. Useful in case you generate response dynamically
               data: {
-                query: query,
+                query,
               },
-              success: function (data) {
-                // Find matched items
-                for (var i = 0; i < data.length; i++) {
+              success(data) {
+              // Find matched items
+                for (let i = 0; i < data.length; i += 1) {
                   if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(data[i]);
                 }
                 // Hide Preoloader
                 autocomplete.preloaderHide();
                 // Render items by passing array with result items
                 render(results);
-              }
+              },
             });
-          }
+          },
         });
 
         // Simple Standalone
         self.autocompleteStandaloneSimple = app.autocomplete.create({
-          openIn: 'page', //open in page
-          openerEl: '#autocomplete-standalone', //link that opens autocomplete
-          closeOnSelect: true, //go back after we select something
-          source: function (query, render) {
-            var results = [];
+          openIn: 'page', // open in page
+          openerEl: '#autocomplete-standalone', // link that opens autocomplete
+          closeOnSelect: true, // go back after we select something
+          source(query, render) {
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
             }
             // Find matched items
-            for (var i = 0; i < fruits.length; i++) {
+            for (let i = 0; i < fruits.length; i += 1) {
               if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
             }
             // Render items by passing array with result items
             render(results);
           },
           on: {
-            change: function (value) {
+            change(value) {
               console.log(value);
               // Add item text value to item-after
               $('#autocomplete-standalone').find('.item-after').text(value[0]);
@@ -429,24 +421,24 @@
 
         // Standalone Popup
         self.autocompleteStandalonePopup = app.autocomplete.create({
-          openIn: 'popup', //open in page
-          openerEl: '#autocomplete-standalone-popup', //link that opens autocomplete
-          closeOnSelect: true, //go back after we select something
-          source: function (query, render) {
-            var results = [];
+          openIn: 'popup', // open in page
+          openerEl: '#autocomplete-standalone-popup', // link that opens autocomplete
+          closeOnSelect: true, // go back after we select something
+          source(query, render) {
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
             }
             // Find matched items
-            for (var i = 0; i < fruits.length; i++) {
+            for (let i = 0; i < fruits.length; i += 1) {
               if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
             }
             // Render items by passing array with result items
             render(results);
           },
           on: {
-            change: function (value) {
+            change(value) {
               // Add item text value to item-after
               $('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
               // Add item value to input value
@@ -457,45 +449,44 @@
 
         // Multiple Standalone
         self.autocompleteStandaloneMultiple = app.autocomplete.create({
-          openIn: 'page', //open in page
-          openerEl: '#autocomplete-standalone-multiple', //link that opens autocomplete
-          multiple: true, //allow multiple values
-          source: function (query, render) {
-            var autocomplete = this;
-            var results = [];
+          openIn: 'page', // open in page
+          openerEl: '#autocomplete-standalone-multiple', // link that opens autocomplete
+          multiple: true, // allow multiple values
+          source(query, render) {
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
             }
             // Find matched items
-            for (var i = 0; i < fruits.length; i++) {
+            for (let i = 0; i < fruits.length; i += 1) {
               if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
             }
             // Render items by passing array with result items
             render(results);
           },
           on: {
-            change: function (value) {
+            change(value) {
               // Add item text value to item-after
               $('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
               // Add item value to input value
               $('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
-            }
-          }
+            },
+          },
         });
 
         // Standalone With Ajax
         self.autocompleteStandaloneAjax = app.autocomplete.create({
-          openIn: 'page', //open in page
-          openerEl: '#autocomplete-standalone-ajax', //link that opens autocomplete
-          multiple: true, //allow multiple values
-          valueProperty: 'id', //object's "value" property name
-          textProperty: 'name', //object's "text" property name
+          openIn: 'page', // open in page
+          openerEl: '#autocomplete-standalone-ajax', // link that opens autocomplete
+          multiple: true, // allow multiple values
+          valueProperty: 'id', // object's "value" property name
+          textProperty: 'name', // object's "text" property name
           limit: 50,
-          preloader: true, //enable preloader
-          source: function (query, render) {
-            var autocomplete = this;
-            var results = [];
+          preloader: true, // enable preloader
+          source(query, render) {
+            const autocomplete = this;
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
@@ -503,31 +494,31 @@
             // Show Preloader
             autocomplete.preloaderShow();
             // Do Ajax request to Autocomplete data
-            $.ajax({
+            app.request({
               url: './js/autocomplete-languages.json',
               method: 'GET',
               dataType: 'json',
-              //send "query" to server. Useful in case you generate response dynamically
+              // send "query" to server. Useful in case you generate response dynamically
               data: {
-                query: query
+                query,
               },
-              success: function (data) {
-                // Find matched items
-                for (var i = 0; i < data.length; i++) {
+              success(data) {
+              // Find matched items
+                for (let i = 0; i < data.length; i += 1) {
                   if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
                 }
                 // Hide Preoloader
                 autocomplete.preloaderHide();
                 // Render items by passing array with result items
                 render(results);
-              }
+              },
             });
           },
           on: {
-            change: function (value) {
-              var itemText = [],
-                  inputValue = [];
-              for (var i = 0; i < value.length; i++) {
+            change(value) {
+              const itemText = [];
+              const inputValue = [];
+              for (let i = 0; i < value.length; i += 1) {
                 itemText.push(value[i].name);
                 inputValue.push(value[i].id);
               }
@@ -544,30 +535,30 @@
           openIn: 'dropdown',
           inputEl: '#searchbar-autocomplete input[type="search"]',
           dropdownPlaceholderText: 'Type "Apple"',
-          source: function (query, render) {
-            var results = [];
+          source(query, render) {
+            const results = [];
             if (query.length === 0) {
               render(results);
               return;
             }
             // Find matched items
-            for (var i = 0; i < fruits.length; i++) {
+            for (let i = 0; i < fruits.length; i += 1) {
               if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
             }
             // Render items by passing array with result items
             render(results);
-          }
-        })
+          },
+        });
         self.searchbar = app.searchbar.create({
           el: '#searchbar-autocomplete',
           customSearch: true,
           on: {
-            search: function (query) {
+            search(query) {
               console.log(query);
-            }
-          }
-        })
-      }
-    }
-  }
+            },
+          },
+        });
+      },
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/badge.vue b/examples/kitchen-sink/pages/badge.vue
index 90dc9b6..7b5d5dc 100644
--- a/examples/kitchen-sink/pages/badge.vue
+++ b/examples/kitchen-sink/pages/badge.vue
@@ -30,46 +30,20 @@
       </f7-link>
     </f7-toolbar>
 
-    <div class="list">
-      <ul>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">Foo Bar</div>
-              <div class="item-after"><span class="badge">0</span></div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">Ivan Petrov</div>
-              <div class="item-after"><span class="badge color-blue">CEO</span></div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">John Doe</div>
-              <div class="item-after"><span class="badge color-green">5</span></div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">Jane Doe</div>
-              <div class="item-after"><span class="badge color-orange">NEW</span></div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
+    <f7-list>
+      <f7-list-item title="Foo Bar" badge="0">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item title="Ivan Petrov" badge="CEO" badge-color="blue">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item title="John Doe" badge="5" badge-color="green">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item title="Jane Doe" badge="NEW" badge-color="orange">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+    </f7-list>
   </f7-page>
 </template>
 <script>
diff --git a/examples/kitchen-sink/pages/calendar-page.vue b/examples/kitchen-sink/pages/calendar-page.vue
new file mode 100644
index 0000000..c48bef1
--- /dev/null
+++ b/examples/kitchen-sink/pages/calendar-page.vue
@@ -0,0 +1,123 @@
+<template>
+  <f7-page :page-content="false">
+    <f7-navbar back-link="Back">
+      <f7-nav-title class="navbar-calendar-title"></f7-nav-title>
+    </f7-navbar>
+    <div class="page-content">
+      <div id="calendar" class="block block-strong no-padding no-margin no-hairline-top"></div>
+      <div id="calendar-events" class="list no-margin no-hairlines no-ios-left-edge">
+        <ul></ul>
+      </div>
+    </div>
+  </f7-page>
+</template>
+<script>
+  import { f7Navbar, f7Page, f7NavTitle } from 'framework7-vue';
+
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7NavTitle,
+    },
+    data() {
+      const date = new Date();
+      const year = date.getFullYear();
+      const month = date.getMonth();
+      const day = date.getDate();
+      return {
+        today: new Date(year, month, day),
+        events: [
+          {
+            date: new Date(year, month, day, 12, 30),
+            title: 'Meeting with Vladimir',
+          },
+          {
+            date: new Date(year, month, day, 18, 0),
+            title: 'Shopping',
+          },
+          {
+            date: new Date(year, month, day, 21, 0),
+            title: 'Gym',
+          },
+          {
+            date: new Date(year, month, day + 2, 16, 0),
+            title: 'Pay loan',
+          },
+          {
+            date: new Date(year, month, day + 2, 21, 0),
+            title: 'Gym',
+          },
+        ],
+      };
+    },
+    methods: {
+      renderEvents(calendar) {
+        const self = this;
+        const currentDate = calendar.value[0];
+        const currentEvents = self.events
+          .filter(event => (
+            event.date.getTime() >= currentDate.getTime() &&
+        event.date.getTime() < currentDate.getTime() + 24 * 60 * 60 * 1000
+          ));
+        let eventsHtml = '';
+        if (currentEvents.length) {
+          eventsHtml = currentEvents
+            .map((event) => {
+              const hours = event.date.getHours();
+              let minutes = event.date.getMinutes();
+              if (minutes < 10) minutes = `0${minutes}`;
+              return `${'<li class="item-content">' +
+                '<div class="item-inner">' +
+                  '<div class="item-title">'}${event.title}</div>` +
+                  `<div class="item-after">${hours}:${minutes}</div>` +
+                '</div>' +
+              '</li>';
+            })
+            .join('');
+        } else {
+          eventsHtml = '<li class="item-content">' +
+                      '<div class="item-inner">' +
+                        '<div class="item-title text-color-gray">No events for this day</div>' +
+                      '</div>' +
+                    '</li>';
+        }
+
+        self.$el.querySelector('.list ul').innerHTML = eventsHtml;
+      },
+    },
+    on: {
+      pageInit(e, page) {
+        const self = this;
+        const app = self.$f7;
+        const $ = self.$$;
+        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+        self.calendar = app.calendar.create({
+          containerEl: '#calendar',
+          toolbar: false,
+          value: [self.today],
+          events: self.events.map(event => new Date(event.date.getFullYear(), event.date.getMonth(), event.date.getDate())),
+          on: {
+            init(calendar) {
+              $('.navbar-calendar-title').text(`${monthNames[calendar.currentMonth]}, ${calendar.currentYear}`);
+              app.navbar.size(page.navbarEl);
+              calendar.$el.addClass('no-ios-right-edge');
+              self.renderEvents(calendar);
+            },
+            monthYearChangeStart(calendar) {
+              $('.navbar-calendar-title').text(`${monthNames[calendar.currentMonth]}, ${calendar.currentYear}`);
+              app.navbar.size(page.navbarEl);
+            },
+            change(calendar) {
+              self.renderEvents(calendar);
+            },
+          },
+        });
+      },
+      pageBeforeRemove() {
+        const self = this;
+        self.calendar.destroy();
+      },
+    },
+  };
+</script>
diff --git a/examples/kitchen-sink/pages/calendar.vue b/examples/kitchen-sink/pages/calendar.vue
new file mode 100644
index 0000000..b43ba8d
--- /dev/null
+++ b/examples/kitchen-sink/pages/calendar.vue
@@ -0,0 +1,185 @@
+<template>
+  <f7-page :page-content="false">
+    <f7-navbar title="Calendar" back-link="Back"></f7-navbar>
+    <div class="page-content">
+      <div class="block">
+        <p>Calendar is a touch optimized component that provides an easy way to handle dates.</p>
+        <p>Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Popover on tablets (iPad).</p>
+      </div>
+      <div class="block-title">Default setup</div>
+      <div class="list no-hairlines-md">
+        <ul>
+          <li>
+            <div class="item-content item-input">
+              <div class="item-inner">
+                <div class="item-input-wrap">
+                  <input type="text" placeholder="Your birth date" readonly="readonly" id="demo-calendar-default"/>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="block-title">Custom date format</div>
+      <div class="list no-hairlines-md">
+        <ul>
+          <li>
+            <div class="item-content item-input">
+              <div class="item-inner">
+                <div class="item-input-wrap">
+                  <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-date-format"/>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="block-title">Multiple Values</div>
+      <div class="list no-hairlines-md">
+        <ul>
+          <li>
+            <div class="item-content item-input">
+              <div class="item-inner">
+                <div class="item-input-wrap">
+                  <input type="text" placeholder="Select multiple dates" readonly="readonly" id="demo-calendar-multiple"/>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="block-title">Range Picker</div>
+      <div class="list no-hairlines-md">
+        <ul>
+          <li>
+            <div class="item-content item-input">
+              <div class="item-inner">
+                <div class="item-input-wrap">
+                  <input type="text" placeholder="Select date range" readonly="readonly" id="demo-calendar-range"/>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="block-title">Open in Mondal</div>
+      <div class="list no-hairlines-md">
+        <ul>
+          <li>
+            <div class="item-content item-input">
+              <div class="item-inner">
+                <div class="item-input-wrap">
+                  <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-modal"/>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="block-title">Calendar Page</div>
+      <div class="list">
+        <ul>
+          <li>
+            <a href="/calendar-page/" class="item-content item-link">
+              <div class="item-inner">
+                <div class="item-title">Open Calendar Page</div>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="block-title">Inline with custom toolbar</div>
+      <div class="block block-strong no-padding">
+        <div id="demo-calendar-inline-container"></div>
+      </div>
+    </div>
+  </f7-page>
+</template>
+<script>
+  import { f7Navbar, f7Page } from 'framework7-vue';
+
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+    on: {
+      pageInit(e) {
+        const self = this;
+        const app = self.$f7;
+        const $ = self.$$;
+        // Default
+        self.calendarDefault = app.calendar.create({
+          inputEl: '#demo-calendar-default',
+        });
+        // With custom date format
+        self.calendarDateFormat = app.calendar.create({
+          inputEl: '#demo-calendar-date-format',
+          dateFormat: 'DD, MM dd, yyyy',
+        });
+        // With multiple values
+        self.calendarMultiple = app.calendar.create({
+          inputEl: '#demo-calendar-multiple',
+          dateFormat: 'M dd yyyy',
+          multiple: true,
+        });
+        // Range Picker
+        self.calendarRange = app.calendar.create({
+          inputEl: '#demo-calendar-range',
+          dateFormat: 'M dd yyyy',
+          rangePicker: true,
+        });
+        // Custom modal
+        self.calendarModal = app.calendar.create({
+          inputEl: '#demo-calendar-modal',
+          openIn: 'customModal',
+          header: true,
+          footer: true,
+          dateFormat: 'MM dd yyyy',
+        });
+        // Inline with custom toolbar
+        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+        self.calendarInline = app.calendar.create({
+          containerEl: '#demo-calendar-inline-container',
+          value: [new Date()],
+          renderToolbar() {
+            return `${'<div class="toolbar calendar-custom-toolbar no-shadow">' +
+        '<div class="toolbar-inner">' +
+          '<div class="left">' +
+            '<a href="#" class="link icon-only"><i class="icon icon-back '}${self.$theme.md ? 'color-black' : ''}"></i></a>` +
+          '</div>' +
+          '<div class="center"></div>' +
+          '<div class="right">' +
+            `<a href="#" class="link icon-only"><i class="icon icon-forward ${self.$theme.md ? 'color-black' : ''}"></i></a>` +
+          '</div>' +
+        '</div>' +
+      '</div>';
+          },
+          on: {
+            init(c) {
+              $('.calendar-custom-toolbar .center').text(`${monthNames[c.currentMonth]}, ${c.currentYear}`);
+              $('.calendar-custom-toolbar .left .link').on('click', () => {
+                self.calendarInline.prevMonth();
+              });
+              $('.calendar-custom-toolbar .right .link').on('click', () => {
+                self.calendarInline.nextMonth();
+              });
+            },
+            monthYearChangeStart(c) {
+              $('.calendar-custom-toolbar .center').text(`${monthNames[c.currentMonth]}, ${c.currentYear}`);
+            },
+          },
+        });
+      },
+      pageBeforeRemove() {
+        const self = this;
+        self.calendarDefault.destroy();
+        self.calendarDateFormat.destroy();
+        self.calendarMultiple.destroy();
+        self.calendarRange.destroy();
+        self.calendarModal.destroy();
+        self.calendarInline.destroy();
+      },
+    },
+  };
+</script>
diff --git a/examples/kitchen-sink/pages/chips.vue b/examples/kitchen-sink/pages/chips.vue
index 757a7f2..6854b02 100644
--- a/examples/kitchen-sink/pages/chips.vue
+++ b/examples/kitchen-sink/pages/chips.vue
@@ -2,137 +2,84 @@
   <f7-page>
     <f7-navbar title="Chips" back-link="Back"></f7-navbar>
     <f7-block-title>Chips With Text</f7-block-title>
-    <div class="block block-strong">
-      <div class="chip">
-        <div class="chip-label">Example Chip</div>
-      </div>
-      <div class="chip">
-        <div class="chip-label">Another Chip</div>
-      </div>
-      <div class="chip">
-        <div class="chip-label">One More Chip</div>
-      </div>
-      <div class="chip">
-        <div class="chip-label">Fourth Chip</div>
-      </div>
-      <div class="chip">
-        <div class="chip-label">Last One</div>
-      </div>
-    </div>
+    <f7-block strong>
+      <f7-chip text="Example Chip"></f7-chip>
+      <f7-chip text="Another Chip"></f7-chip>
+      <f7-chip text="One More Chip"></f7-chip>
+      <f7-chip text="Fourth Chip"></f7-chip>
+      <f7-chip text="Last One"></f7-chip>
+    </f7-block>
     <f7-block-title>Icon Chips</f7-block-title>
-    <div class="block block-strong">
-      <div class="chip">
-        <div :class="{ 'bg-color-blue' : $theme.md }" class="chip-media">
-          <i class="icon f7-icons ios-only">add_round</i>
-          <i class="icon material-icons md-only">add_circle</i>
-        </div>
-        <div class="chip-label">Add Contact</div>
-      </div>
-      <div class="chip">
-        <div :class="{ 'bg-color-purple' : $theme.md }" class="chip-media">
-          <i class="icon f7-icons ios-only">compass</i>
-          <i class="icon material-icons md-only">location_on</i>
-        </div>
-        <div class="chip-label">London</div>
-      </div>
-      <div class="chip">
-        <div :class="{ 'bg-color-red' : $theme.md }" class="chip-media">
-          <i class="icon f7-icons ios-only">person</i>
-          <i class="icon material-icons md-only">person</i>
-        </div>
-        <div class="chip-label">John Doe</div>
-      </div>
-    </div>
+    <f7-block strong>
+      <f7-chip text="Add Contact" :media-bg-color="$theme.md ? 'blue' : undefined">
+        <f7-icon slot="media" if-ios="f7:add_round" if-md="material:add_circle"></f7-icon>
+      </f7-chip>
+      <f7-chip text="London" :media-bg-color="$theme.md ? 'green' : undefined">
+        <f7-icon slot="media" if-ios="f7:compass" if-md="material:location_on"></f7-icon>
+      </f7-chip>
+      <f7-chip text="John Doe" :media-bg-color="$theme.md ? 'red' : undefined">
+        <f7-icon slot="media" if-ios="f7:person" if-md="material:person"></f7-icon>
+      </f7-chip>
+    </f7-block>
     <f7-block-title>Contact Chips</f7-block-title>
-    <div class="block block-strong">
-      <div class="chip">
-        <div class="chip-media"><img src="http://lorempixel.com/100/100/people/9/"/></div>
-        <div class="chip-label">Jane Doe</div>
-      </div>
-      <div class="chip">
-        <div class="chip-media"><img src="http://lorempixel.com/100/100/people/3/"/></div>
-        <div class="chip-label">John Doe</div>
-      </div>
-      <div class="chip">
-        <div class="chip-media"><img src="http://lorempixel.com/100/100/people/7/"/></div>
-        <div class="chip-label">Adam Smith</div>
-      </div>
-      <div class="chip">
-        <div class="chip-media bg-color-pink">J</div>
-        <div class="chip-label">Jennifer</div>
-      </div>
-      <div class="chip">
-        <div class="chip-media bg-color-yellow text-color-black">C</div>
-        <div class="chip-label">Chris</div>
-      </div>
-      <div class="chip">
-        <div class="chip-media bg-color-red">K</div>
-        <div class="chip-label">Kate</div>
-      </div>
-    </div>
-    <div class="block-title">Deletable Chips / Tags</div>
-    <div class="block block-strong">
-      <div class="chip">
-        <div class="chip-label">Example Chip</div><a href="#" class="chip-delete" @click="deleteChip"></a>
-      </div>
-      <div class="chip">
-        <div class="chip-media bg-color-orange text-color-black">C</div>
-        <div class="chip-label">Chris</div><a href="#" class="chip-delete" @click="deleteChip"></a>
-      </div>
-      <div class="chip">
-        <div class="chip-media"><img src="http://lorempixel.com/100/100/people/9/"/></div>
-        <div class="chip-label">Jane Doe</div><a href="#" class="chip-delete" @click="deleteChip"></a>
-      </div>
-      <div class="chip">
-        <div class="chip-label">One More Chip</div><a href="#" class="chip-delete" @click="deleteChip"></a>
-      </div>
-      <div class="chip">
-        <div class="chip-media bg-color-pink">J</div>
-        <div class="chip-label">Jennifer</div><a href="#" class="chip-delete" @click="deleteChip"></a>
-      </div>
-      <div class="chip">
-        <div class="chip-media"><img src="http://lorempixel.com/100/100/people/7/"/></div>
-        <div class="chip-label">Adam Smith</div><a href="#" class="chip-delete" @click="deleteChip"></a>
-      </div>
-    </div>
+    <f7-block strong>
+      <f7-chip text="Jane Doe">
+        <img slot="media" src="http://lorempixel.com/100/100/people/9/"/>
+      </f7-chip>
+      <f7-chip text="John Doe">
+        <img slot="media" src="http://lorempixel.com/100/100/people/3/"/>
+      </f7-chip>
+      <f7-chip text="Adam Smith">
+        <img slot="media" src="http://lorempixel.com/100/100/people/7/"/>
+      </f7-chip>
+      <f7-chip text="Jennifer" media-bg-color="pink" media="J"></f7-chip>
+      <f7-chip text="Chris" media-bg-color="yellow" media-text-color="black" media="C"></f7-chip>
+      <f7-chip text="Kate" media-bg-color="red" media="K"></f7-chip>
+    </f7-block>
+    <f7-block-title>Deletable Chips / Tags</f7-block-title>
+    <f7-block strong>
+      <f7-chip text="Example Chip" deleteable @click="deleteChip"></f7-chip>
+      <f7-chip text="Chris" media="C" media-bg-color="orange" text-color="black" deleteable @click="deleteChip"></f7-chip>
+      <f7-chip text="Jane Doe" deleteable @click="deleteChip">
+        <img slot="media" src="http://lorempixel.com/100/100/people/9/"/>
+      </f7-chip>
+      <f7-chip text="One More Chip" deleteable @click="deleteChip"></f7-chip>
+      <f7-chip text="Jennifer" media-bg-color="pink" media="J" deleteable @click="deleteChip"></f7-chip>
+      <f7-chip text="Adam Smith" deleteable @click="deleteChip">
+        <img slot="media" src="http://lorempixel.com/100/100/people/7/"/>
+      </f7-chip>
+    </f7-block>
     <f7-block-title>Color Chips</f7-block-title>
-    <div class="block block-strong">
-      <div class="chip color-red">
-        <div class="chip-label">Red Chip</div>
-      </div>
-      <div class="chip color-green">
-        <div class="chip-label">Green Chip</div>
-      </div>
-      <div class="chip color-blue">
-        <div class="chip-label">Blue Chip</div>
-      </div>
-      <div class="chip color-orange">
-        <div class="chip-label">Orange Chip</div>
-      </div>
-      <div class="chip color-pink">
-        <div class="chip-label">Pink Chip</div>
-      </div>
+    <f7-block strong>
+      <f7-chip text="Red Chip" color="red"></f7-chip>
+      <f7-chip text="Green Chip" color="green"></f7-chip>
+      <f7-chip text="Blue Chip" color="blue"></f7-chip>
+      <f7-chip text="Orange Chip" color="orange"></f7-chip>
+      <f7-chip text="Pink Chip" color="pink"></f7-chip>
     </div>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7Chip, f7Block, f7Icon } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
+      f7Chip,
+      f7Block,
+      f7Icon,
     },
     methods: {
       deleteChip(e) {
-        var $ = this.$;
-        var app = this.$f7;
-        app.dialog.confirm('Do you want to delete this tiny demo Chip?', function () {
-          $(e.target).parents('.chip').remove();
+        const $$ = this.$$;
+        const app = this.$f7;
+        app.dialog.confirm('Do you want to delete this tiny demo Chip?', () => {
+          $$(e.target).parents('.chip').remove();
         });
-      }
-    }
-  }
+      },
+    },
+  };
 </script>
 
diff --git a/examples/kitchen-sink/pages/color-themes.vue b/examples/kitchen-sink/pages/color-themes.vue
index f9b1a9e..fa1bfec 100644
--- a/examples/kitchen-sink/pages/color-themes.vue
+++ b/examples/kitchen-sink/pages/color-themes.vue
@@ -1,69 +1,70 @@
 <template>
   <f7-page>
     <f7-navbar title="Color Themes" back-link="Back"></f7-navbar>
+    <f7-block-title>Layout Themes</f7-block-title>
+    <f7-block>
+      <p>Framework7 comes with 2 main layout themes: Light (default) and Dark:</p>
+      <f7-row>
+        <f7-col width="50" class="bg-color-white" @click.native="setLayoutTheme('light')" style="cursor: pointer; padding: 30px; border: 1px solid rgba(0,0,0,0.1)"></f7-col>
+        <f7-col width="50" class="bg-color-black" @click.native="setLayoutTheme('dark')" style="cursor: pointer; padding: 30px; border: 1px solid rgba(255,255,255,0.1)"></f7-col>
+      </f7-row>
+    </f7-block>
     <f7-block-title>Choose Color Theme</f7-block-title>
-    <div class="block">
+    <f7-block>
       <p>Framework7 comes with {{colorsAmount}} color themes set.</p>
-      <div class="row">
-        <div class="col-33" v-for="color in colors" :key="color">
-          <button class="button button-fill button-round button-raised" :class="`color-${color}`" @click="setColorTheme(color)">
+      <f7-row>
+        <f7-col width="33" v-for="color in colors" :key="color">
+          <f7-button style="margin-bottom:1em; text-transform: capitalize;" fill round raised :color="color" @click="setColorTheme(color)">
             {{ color }}
-          </button>
-        </div>
-      </div>
-    </div>
+          </f7-button>
+        </f7-col>
+        <f7-col width="33"></f7-col>
+      </f7-row>
+    </f7-block>
   </f7-page>
 </template>
-<style scoped>
-  .button {
-    margin-bottom: 1em;
-    text-transform: capitalize;
-  }
-</style>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7Button, f7Row, f7Col, f7Block } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
+      f7Button,
+      f7Row,
+      f7Col,
+      f7Block,
     },
-    data: function () {
-      var colors = [
+    data() {
+      const colors = [
         'red',
-        'pink',
-        'purple',
-        'deeppurple',
-        'indigo',
-        'blue',
-        'lightblue',
-        'cyan',
-        'teal',
         'green',
-        'lightgreen',
-        'lime',
+        'blue',
+        'pink',
         'yellow',
-        'amber',
         'orange',
-        'deeporange',
-        'brown',
         'gray',
-        'bluegray',
+        'black',
       ];
       return {
-        colors: colors,
+        colors,
         colorsAmount: colors.length,
       };
     },
     methods: {
-      setColorTheme: function (color) {
-        var self = this;
-        var app = self.$f7;
-        var currentColorClass = app.root[0].className.match(/color-theme-([a-z]*)/);
-        if (currentColorClass) app.root.removeClass(currentColorClass[0])
-          app.root.addClass('color-theme-' + color);
+      setLayoutTheme(theme) {
+        const self = this;
+        const app = self.$f7;
+        app.root.removeClass('theme-dark theme-light').addClass(`theme-${theme}`);
+      },
+      setColorTheme(color) {
+        const self = this;
+        const app = self.$f7;
+        const currentColorClass = app.root[0].className.match(/color-theme-([a-z]*)/);
+        if (currentColorClass) app.root.removeClass(currentColorClass[0]);
+        app.root.addClass(`color-theme-${color}`);
       },
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/contacts-list.vue b/examples/kitchen-sink/pages/contacts-list.vue
index 8701859..505ddf7 100644
--- a/examples/kitchen-sink/pages/contacts-list.vue
+++ b/examples/kitchen-sink/pages/contacts-list.vue
@@ -1,186 +1,54 @@
 <template>
   <f7-page>
     <f7-navbar title="Contacts List" back-link="Back"></f7-navbar>
-    <div class="list contacts-list">
-      <div class="list-group">
-        <ul>
-          <li class="list-group-title">A</li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Aaron </div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Abbie</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Adam</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Adele</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Agatha</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Agnes</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Albert</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Alexander</div>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="list-group">
-        <ul>
-          <li class="list-group-title">B</li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Bailey</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Barclay</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Bartolo</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Bellamy</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Belle</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Benjamin</div>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="list-group">
-        <ul>
-          <li class="list-group-title">C</li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Caiden</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Calvin</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Candy</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Carl</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Cherilyn</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Chester</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Chloe</div>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="list-group">
-        <ul>
-          <li class="list-group-title">V</li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Vladimir</div>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
+    <f7-list contacts-list>
+      <f7-list-group>
+        <f7-list-item title="A" group-title></f7-list-item>
+        <f7-list-item title="Aaron "></f7-list-item>
+        <f7-list-item title="Abbie"></f7-list-item>
+        <f7-list-item title="Adam"></f7-list-item>
+        <f7-list-item title="Adele"></f7-list-item>
+        <f7-list-item title="Agatha"></f7-list-item>
+        <f7-list-item title="Agnes"></f7-list-item>
+        <f7-list-item title="Albert"></f7-list-item>
+        <f7-list-item title="Alexander"></f7-list-item>
+      </f7-list-group>
+      <f7-list-group>
+        <f7-list-item title="B" group-title></f7-list-item>
+        <f7-list-item title="Bailey"></f7-list-item>
+        <f7-list-item title="Barclay"></f7-list-item>
+        <f7-list-item title="Bartolo"></f7-list-item>
+        <f7-list-item title="Bellamy"></f7-list-item>
+        <f7-list-item title="Belle"></f7-list-item>
+        <f7-list-item title="Benjamin"></f7-list-item>
+      </f7-list-group>
+      <f7-list-group>
+        <f7-list-item title="C" group-title></f7-list-item>
+        <f7-list-item title="Caiden"></f7-list-item>
+        <f7-list-item title="Calvin"></f7-list-item>
+        <f7-list-item title="Candy"></f7-list-item>
+        <f7-list-item title="Carl"></f7-list-item>
+        <f7-list-item title="Cherilyn"></f7-list-item>
+        <f7-list-item title="Chester"></f7-list-item>
+        <f7-list-item title="Chloe"></f7-list-item>
+      </f7-list-group>
+      <f7-list-group>
+        <f7-list-item title="V" group-title></f7-list-item>
+        <f7-list-item title="Vladimir"></f7-list-item>
+      </f7-list-group>
+    </f7-list>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7List, f7ListGroup, f7ListItem } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7List,
+      f7ListGroup,
+      f7ListItem,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/content-block.vue b/examples/kitchen-sink/pages/content-block.vue
index 3bc3da6..2420520 100644
--- a/examples/kitchen-sink/pages/content-block.vue
+++ b/examples/kitchen-sink/pages/content-block.vue
@@ -3,68 +3,71 @@
     <f7-navbar title="Content Block" back-link="Back"></f7-navbar>
     <p>This paragraph is outside of content block. Not cool, but useful for any custom elements with custom styling.</p>
 
-    <div class="block">
+    <f7-block>
       <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
-    </div>
+    </f7-block>
 
-    <div class="block block-strong">
+    <f7-block strong>
       <p>Here comes another text block with additional "block-strong" class. Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. Integer blandit varius nisi quis consectetur. </p>
-    </div>
+    </f7-block>
 
     <f7-block-title>Block title</f7-block-title>
-    <div class="block">
+    <f7-block>
       <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
-    </div>
+    </f7-block>
 
     <f7-block-title>Another ultra long content block title</f7-block-title>
-    <div class="block block-strong">
+    <f7-block strong>
       <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
-    </div>
+    </f7-block>
 
     <f7-block-title>Inset</f7-block-title>
-    <div class="block block-strong inset">
+    <f7-block strong inset>
       <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
-    </div>
+    </f7-block>
 
     <f7-block-title>Tablet Inset</f7-block-title>
-    <div class="block block-strong tablet-inset">
+    <f7-block strong tablet-inset>
       <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
-    </div>
+    </f7-block>
 
-    <div class="block-title">With Header & Footer</div>
-    <div class="block">
-      <div class="block-header">Block Header</div>
+    <f7-block-title>With Header & Footer</f7-block-title>
+    <f7-block>
+      <f7-block-header>Block Header</f7-block-header>
       <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
-      <div class="block-footer">Block Footer</div>
-    </div>
+      <f7-block-footer>Block Footer</f7-block-footer>
+    </f7-block>
 
-    <div class="block-header">Block Header</div>
-    <div class="block">
+    <f7-block-header>Block Header</f7-block-header>
+    <f7-block>
       <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
-    </div>
-    <div class="block-footer">Block Footer</div>
+    </f7-block>
+    <f7-block-footer>Block Footer</f7-block-footer>
 
-    <div class="block block-strong">
-      <div class="block-header">Block Header</div>
+    <f7-block strong>
+      <f7-block-header>Block Header</f7-block-header>
       <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
-      <div class="block-footer">Block Footer</div>
-    </div>
+      <f7-block-footer>Block Footer</f7-block-footer>
+    </f7-block>
 
-    <div class="block-header">Block Header</div>
-    <div class="block block-strong">
+    <f7-block-header>Block Header</f7-block-header>
+    <f7-block strong>
       <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
-    </div>
-    <div class="block-footer">Block Footer</div>
+    </f7-block>
+    <f7-block-footer>Block Footer</f7-block-footer>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7BlockHeader, f7BlockFooter } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
-    }
-  }
+      f7Block,
+      f7BlockHeader,
+      f7BlockFooter,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/data-table.vue b/examples/kitchen-sink/pages/data-table.vue
index a9cbdc7..2efa9dc 100644
--- a/examples/kitchen-sink/pages/data-table.vue
+++ b/examples/kitchen-sink/pages/data-table.vue
@@ -194,7 +194,7 @@
         </tbody>
       </table>
     </div>
-    <div class="block-title">Tablet-only columns</div>
+    <f7-block-title>Tablet-only columns</f7-block-title>
     <div class="block-header">
       <p>"Comments" column will be visible only on large screen devices (tablets)</p>
     </div>
@@ -213,7 +213,7 @@
             <th class="numeric-cell">Fat (g)</th>
             <th class="numeric-cell">Carbs</th>
             <th class="numeric-cell">Protein (g)</th>
-            <th class="tablet-only"><span v-html="commentsIcon"></span> Comments</th>
+            <th class="tablet-only"><f7-icon if-ios="f7:chat_fill" if-md="material:message"></f7-icon> Comments</th>
           </tr>
         </thead>
         <tbody>
@@ -281,8 +281,8 @@
       <div class="card-header">
         <div class="data-table-title">Nutrition</div>
         <div class="data-table-actions">
-          <a class="link icon-only" v-html="sortIcon"></a>
-          <a class="link icon-only" v-html="moreIcon"></a>
+          <f7-link icon-if-ios="f7:sort" icon-if-md="material:sort"></f7-link>
+          <f7-link icon-if-ios="f7:more_vertical_round" icon-if-md="material:more_vert"></f7-link>
         </div>
       </div>
       <div class="card-content">
@@ -300,7 +300,7 @@
               <th class="numeric-cell">Fat (g)</th>
               <th class="numeric-cell">Carbs</th>
               <th class="numeric-cell">Protein (g)</th>
-              <th class="tablet-only"><span v-html="commentsIcon"></span> Comments</th>
+              <th class="tablet-only"><f7-icon if-ios="f7:chat_fill" if-md="material:message"></f7-icon> Comments</th>
             </tr>
           </thead>
           <tbody>
@@ -369,8 +369,8 @@
       <div class="card-header">
         <div class="data-table-title">Nutrition</div>
         <div class="data-table-actions">
-          <a class="link icon-only" v-html="sortIcon"></a>
-          <a class="link icon-only" v-html="moreIcon"></a>
+          <f7-link icon-if-ios="f7:sort" icon-if-md="material:sort"></f7-link>
+          <f7-link icon-if-ios="f7:more_vertical_round" icon-if-md="material:more_vert"></f7-link>
         </div>
       </div>
       <div class="card-content">
@@ -388,7 +388,7 @@
               <th class="numeric-cell sortable-cell">Fat (g)</th>
               <th class="numeric-cell sortable-cell">Carbs</th>
               <th class="numeric-cell sortable-cell">Protein (g)</th>
-              <th class="tablet-only"><span v-html="commentsIcon"></span> Comments</th>
+              <th class="tablet-only"><f7-icon if-ios="f7:chat_fill" if-md="material:message"></f7-icon> Comments</th>
             </tr>
           </thead>
           <tbody>
@@ -458,15 +458,15 @@
         <div class="data-table-header">
           <div class="data-table-title">Nutrition</div>
           <div class="data-table-actions">
-            <a class="link icon-only" v-html="sortIcon"></a>
-            <a class="link icon-only" v-html="moreIcon"></a>
+            <f7-link icon-if-ios="f7:sort" icon-if-md="material:sort"></f7-link>
+            <f7-link icon-if-ios="f7:more_vertical_round" icon-if-md="material:more_vert"></f7-link>
           </div>
         </div>
         <div class="data-table-header-selected">
           <div class="data-table-title-selected"><span class="data-table-selected-count"></span> items selected</div>
           <div class="data-table-actions">
-            <a class="link icon-only" v-html="trashIcon"></a>
-            <a class="link icon-only" v-html="moreIcon"></a>
+            <f7-link icon-if-ios="f7:trash" icon-if-md="material:delete"></f7-link>
+            <f7-link icon-if-ios="f7:more_vertical_round" icon-if-md="material:more_vert"></f7-link>
           </div>
         </div>
       </div>
@@ -485,7 +485,7 @@
               <th class="numeric-cell">Fat (g)</th>
               <th class="numeric-cell">Carbs</th>
               <th class="numeric-cell">Protein (g)</th>
-              <th class="tablet-only"><span v-html="commentsIcon"></span> Comments</th>
+              <th class="tablet-only"><f7-icon if-ios="f7:chat_fill" if-md="material:message"></f7-icon> Comments</th>
             </tr>
           </thead>
           <tbody>
@@ -554,8 +554,8 @@
       <div class="card-header">
         <div class="data-table-links"><a class="link">Add</a><a class="link">Remove</a></div>
         <div class="data-table-actions">
-          <a class="link icon-only" v-html="sortIcon"></a>
-          <a class="link icon-only" v-html="moreIcon"></a>
+          <f7-link icon-if-ios="f7:sort" icon-if-md="material:sort"></f7-link>
+          <f7-link icon-if-ios="f7:more_vertical_round" icon-if-md="material:more_vert"></f7-link>
         </div>
       </div>
       <div class="card-content">
@@ -573,7 +573,7 @@
               <th class="numeric-cell">Fat (g)</th>
               <th class="numeric-cell">Carbs</th>
               <th class="numeric-cell">Protein (g)</th>
-              <th class="tablet-only"><span v-html="commentsIcon"></span> Comments</th>
+              <th class="tablet-only"><f7-icon if-ios="f7:chat_fill" if-md="material:message"></f7-icon> Comments</th>
               <th></th>
             </tr>
           </thead>
@@ -592,8 +592,8 @@
               <td class="numeric-cell">4.0</td>
               <td class="tablet-only">I like frozen yogurt</td>
               <td class="actions-cell">
-                <a class="link icon-only" v-html="composeIcon"></a>
-                <a class="link icon-only" v-html="trashIcon"></a>
+                <f7-link icon-if-ios="f7:compose" icon-if-md="material:edit"></f7-link>
+                <f7-link icon-if-ios="f7:trash" icon-if-md="material:delete"></f7-link>
               </td>
             </tr>
             <tr>
@@ -610,8 +610,8 @@
               <td class="numeric-cell">4.4</td>
               <td class="tablet-only">But like ice cream more</td>
               <td class="actions-cell">
-                <a class="link icon-only" v-html="composeIcon"></a>
-                <a class="link icon-only" v-html="trashIcon"></a>
+                <f7-link icon-if-ios="f7:compose" icon-if-md="material:edit"></f7-link>
+                <f7-link icon-if-ios="f7:trash" icon-if-md="material:delete"></f7-link>
               </td>
             </tr>
             <tr>
@@ -628,8 +628,8 @@
               <td class="numeric-cell">6.0</td>
               <td class="tablet-only">Super tasty</td>
               <td class="actions-cell">
-                <a class="link icon-only" v-html="composeIcon"></a>
-                <a class="link icon-only" v-html="trashIcon"></a>
+                <f7-link icon-if-ios="f7:compose" icon-if-md="material:edit"></f7-link>
+                <f7-link icon-if-ios="f7:trash" icon-if-md="material:delete"></f7-link>
               </td>
             </tr>
             <tr>
@@ -646,8 +646,8 @@
               <td class="numeric-cell">4.3</td>
               <td class="tablet-only">Don't like it</td>
               <td class="actions-cell">
-                <a class="link icon-only" v-html="composeIcon"></a>
-                <a class="link icon-only" v-html="trashIcon"></a>
+                <f7-link icon-if-ios="f7:compose" icon-if-md="material:edit"></f7-link>
+                <f7-link icon-if-ios="f7:trash" icon-if-md="material:delete"></f7-link>
               </td>
             </tr>
           </tbody>
@@ -662,8 +662,8 @@
       <div class="card-header">
         <div class="data-table-title">Nutrition</div>
         <div class="data-table-actions">
-          <a class="link icon-only" v-html="sortIcon"></a>
-          <a class="link icon-only" v-html="moreIcon"></a>
+          <f7-link icon-if-ios="f7:sort" icon-if-md="material:sort"></f7-link>
+          <f7-link icon-if-ios="f7:more_vertical_round" icon-if-md="material:more_vert"></f7-link>
         </div>
       </div>
       <div class="card-content">
@@ -713,23 +713,15 @@
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7Link, f7Icon } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
+      f7Link,
+      f7Icon,
     },
-    data() {
-      var ios = this.$theme.ios;
-      return {
-        commentsIcon: ios ? '<i class="icon f7-icons">chat_fill</i>' : '<i class="icon material-icons">message</i>',
-        sortIcon: ios ? '<i class="icon f7-icons">sort</i>' : '<i class="icon material-icons">sort</i>',
-        moreIcon: ios ? '<i class="icon f7-icons">more_vertical_round</i>' : '<i class="icon material-icons">more_vert</i>',
-        trashIcon: ios ? '<i class="icon f7-icons">trash</i>' : '<i class="icon material-icons">delete</i>',
-        composeIcon: ios ? '<i class="icon f7-icons">compose</i>' : '<i class="icon material-icons">edit</i>'
-      }
-    }
-  }
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/dialog.vue b/examples/kitchen-sink/pages/dialog.vue
index a13323c..d3dbcca 100644
--- a/examples/kitchen-sink/pages/dialog.vue
+++ b/examples/kitchen-sink/pages/dialog.vue
@@ -1,97 +1,100 @@
 <template>
   <f7-page>
     <f7-navbar title="Dialog" back-link="Back"></f7-navbar>
-    <div class="block block-strong">
+    <f7-block strong>
       <p>There are 1:1 replacements of native Alert, Prompt and Confirm modals. They support callbacks, have very easy api and can be combined with each other. Check these examples:</p>
-      <p class="row">
-        <button class="col button button-raised" @click="openAlert">Alert</button>
-        <button class="col button button-raised" @click="openConfirm">Confirm</button>
-        <button class="col button button-raised" @click="openPrompt">Prompt</button>
-      </p>
-      <p class="row">
-        <button class="col button button-raised" @click="openLogin">Login</button>
-        <button class="col button button-raised" @click="openPassword">Password</button>
-      </p>
-    </div>
+      <f7-row tag="p">
+        <f7-button raised class="col" @click="openAlert">Alert</f7-button>
+        <f7-button raised class="col" @click="openConfirm">Confirm</f7-button>
+        <f7-button raised class="col" @click="openPrompt">Prompt</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button raised class="col" @click="openLogin">Login</f7-button>
+        <f7-button raised class="col" @click="openPassword">Password</f7-button>
+      </f7-row>
+    </f7-block>
     <f7-block-title>Vertical Buttons</f7-block-title>
-    <div class="block block-strong">
+    <f7-block strong>
       <p>
-        <button class="button button-raised" @click="openVerticalButtons">Vertical Buttons</button>
+        <f7-button raised @click="openVerticalButtons">Vertical Buttons</f7-button>
       </p>
-    </div>
+    </f7-block>
     <f7-block-title>Preloader Dialog</f7-block-title>
-    <div class="block block-strong">
-      <p class="row">
-        <button class="col button button-raised" @click="openPreloader">Preloader</button>
-        <button class="col button button-raised" @click="openCustomPreloader">Custom Text</button>
-      </p>
-    </div>
+    <f7-block strong>
+      <f7-row tag="p">
+        <f7-button raised class="col" @click="openPreloader">Preloader</f7-button>
+        <f7-button raised class="col" @click="openCustomPreloader">Custom Text</f7-button>
+      </f7-row>
+    </f7-block>
     <f7-block-title>Progress Dialog</f7-block-title>
-    <div class="block block-strong">
-      <p class="row">
-        <button class="col button button-raised" @click="openInfiniteProgress">Infinite</button>
-        <button class="col button button-raised" @click="openDeterminedProgress">Determined</button>
-      </p>
-    </div>
+    <f7-block strong>
+      <f7-row tag="p">
+        <f7-button raised class="col" @click="openInfiniteProgress">Infinite</f7-button>
+        <f7-button raised class="col" @click="openDeterminedProgress">Determined</f7-button>
+      </f7-row>
+    </f7-block>
     <f7-block-title>Dialogs Stack</f7-block-title>
-    <div class="block block-strong">
+    <f7-block strong>
       <p>This feature doesn't allow to open multiple dialogs at the same time, and will automatically open next dialog when you close the current one. Such behavior is similar to browser native dialogs: </p>
       <p>
-        <button class="button button-raised" @click="openAlerts">Open Multiple Alerts</button>
+        <f7-button raised @click="openAlerts">Open Multiple Alerts</f7-button>
       </p>
-    </div>
+    </f7-block>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Button, f7Row } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
+      f7Block,
+      f7Button,
+      f7Row,
     },
     methods: {
-      openAlert: function () {
-        var app = this.$f7;
+      openAlert() {
+        const app = this.$f7;
         app.dialog.alert('Hello!');
       },
-      openConfirm: function () {
-        var app = this.$f7;
-        app.dialog.confirm('Are you feel good today?', function () {
+      openConfirm() {
+        const app = this.$f7;
+        app.dialog.confirm('Are you feel good today?', () => {
           app.dialog.alert('Great!');
         });
       },
-      openPrompt: function () {
-        var app = this.$f7;
-        app.dialog.prompt('What is your name?', function (name) {
-          app.dialog.confirm('Are you sure that your name is ' + name + '?', function () {
-            app.dialog.alert('Ok, your name is ' + name);
+      openPrompt() {
+        const app = this.$f7;
+        app.dialog.prompt('What is your name?', (name) => {
+          app.dialog.confirm(`Are you sure that your name is ${name}?`, () => {
+            app.dialog.alert(`Ok, your name is ${name}`);
           });
         });
       },
-      openLogin: function () {
-        var app = this.$f7;
-        app.dialog.login('Enter your username and password', function (username, password) {
-          app.dialog.alert('Thank you!<br>Username:' + username + '<br>Password:' + password);
+      openLogin() {
+        const app = this.$f7;
+        app.dialog.login('Enter your username and password', (username, password) => {
+          app.dialog.alert(`Thank you!<br>Username:${username}<br>Password:${password}`);
         });
       },
-      openPassword: function () {
-        var app = this.$f7;
-        app.dialog.password('Enter your username and password', function (password) {
-          app.dialog.alert('Thank you!<br>Password:' + password);
+      openPassword() {
+        const app = this.$f7;
+        app.dialog.password('Enter your username and password', (password) => {
+          app.dialog.alert(`Thank you!<br>Password:${password}`);
         });
       },
-      openAlerts: function () {
-        var app = this.$f7;
+      openAlerts() {
+        const app = this.$f7;
         app.dialog.alert('Alert 1');
         app.dialog.alert('Alert 2');
         app.dialog.alert('Alert 3');
         app.dialog.alert('Alert 4');
         app.dialog.alert('Alert 5');
       },
-      openVerticalButtons: function () {
-        var app = this.$f7;
+      openVerticalButtons() {
+        const app = this.$f7;
         app.dialog.create({
           title: 'Vertical Buttons',
           buttons: [
@@ -108,42 +111,42 @@
           verticalButtons: true,
         }).open();
       },
-      openPreloader: function () {
-        var app = this.$f7;
+      openPreloader() {
+        const app = this.$f7;
         app.dialog.preloader();
-        setTimeout(function () {
+        setTimeout(() => {
           app.dialog.close();
         }, 3000);
       },
-      openCustomPreloader: function () {
-        var app = this.$f7;
+      openCustomPreloader() {
+        const app = this.$f7;
         app.dialog.preloader('My text...');
-        setTimeout(function () {
+        setTimeout(() => {
           app.dialog.close();
         }, 3000);
       },
-      openInfiniteProgress: function () {
-        var app = this.$f7;
+      openInfiniteProgress() {
+        const app = this.$f7;
         app.dialog.progress();
-        setTimeout(function () {
+        setTimeout(() => {
           app.dialog.close();
         }, 3000);
       },
-      openDeterminedProgress: function () {
-        var app = this.$f7;
-        var progress = 0;
-        var dialog = app.dialog.progress('Loading assets', progress);
+      openDeterminedProgress() {
+        const app = this.$f7;
+        let progress = 0;
+        const dialog = app.dialog.progress('Loading assets', progress);
         dialog.setText('Image 1 of 10');
-        var interval = setInterval(function () {
+        const interval = setInterval(() => {
           progress += 10;
           dialog.setProgress(progress);
-          dialog.setText('Image ' + ((progress) / 10) + ' of 10');
+          dialog.setText(`Image ${(progress) / 10} of 10`);
           if (progress === 100) {
             clearInterval(interval);
             dialog.close();
           }
-        }, 300)
+        }, 300);
       },
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/fab-morph.vue b/examples/kitchen-sink/pages/fab-morph.vue
index d8352a1..6d5a565 100644
--- a/examples/kitchen-sink/pages/fab-morph.vue
+++ b/examples/kitchen-sink/pages/fab-morph.vue
@@ -1,57 +1,47 @@
 <template>
-<f7-page>
-  <f7-navbar title="Floating Action Button Morph" back-link="Back"></f7-navbar>
-  <div class="toolbar tabbar tabbar-labels toolbar-bottom-md fab-morph-target">
-    <div class="toolbar-inner">
-      <a class="tab-link tab-link-active">
-        <i class="icon f7-icons ios-only">email</i>
-        <i class="icon icon-fill f7-icons ios-only">email_fill</i>
-        <i class="icon material-icons md-only">email</i>
-        <span class="tabbar-label">Inbox</span>
+  <f7-page :page-content="false">
+    <f7-navbar title="Floating Action Button Morph" back-link="Back"></f7-navbar>
+    <div class="toolbar tabbar tabbar-labels toolbar-bottom-md fab-morph-target">
+      <div class="toolbar-inner">
+        <a class="tab-link tab-link-active">
+          <i class="icon f7-icons ios-only">email</i>
+          <i class="icon icon-fill f7-icons ios-only">email_fill</i>
+          <i class="icon material-icons md-only">email</i>
+          <span class="tabbar-label">Inbox</span>
+        </a>
+        <a class="tab-link">
+          <i class="icon f7-icons ios-only">today</i>
+          <i class="icon icon-fill f7-icons ios-only">today_fill</i>
+          <i class="icon material-icons md-only">today</i>
+          <span class="tabbar-label">Calendar</span>
+        </a>
+        <a class="tab-link">
+          <i class="icon f7-icons ios-only">cloud</i>
+          <i class="icon icon-fill f7-icons ios-only">cloud_fill</i>
+          <i class="icon material-icons md-only">file_upload</i>
+          <span class="tabbar-label">Upload</span>
+        </a>
+      </div>
+    </div>
+    <div class="fab fab-right-bottom fab-morph" data-morph-to=".toolbar.fab-morph-target">
+      <a href="#">
+        <i class="icon f7-icons ios-only">add</i>
+        <i class="icon material-icons md-only">add</i>
       </a>
-      <a class="tab-link">
-        <i class="icon f7-icons ios-only">today</i>
-        <i class="icon icon-fill f7-icons ios-only">today_fill</i>
-        <i class="icon material-icons md-only">today</i>
-        <span class="tabbar-label">Calendar</span>
+    </div>
+    <div class="fab fab-left-bottom fab-morph" data-morph-to=".demo-fab-sheet.fab-morph-target">
+      <a href="#">
+        <i class="icon f7-icons ios-only">add</i>
+        <i class="icon material-icons md-only">add</i>
       </a>
-      <a class="tab-link">
-        <i class="icon f7-icons ios-only">cloud</i>
-        <i class="icon icon-fill f7-icons ios-only">cloud_fill</i>
-        <i class="icon material-icons md-only">file_upload</i>
-        <span class="tabbar-label">Upload</span>
+    </div>
+    <div class="fab fab-center-bottom fab-morph" data-morph-to=".demo-fab-fullscreen-sheet.fab-morph-target">
+      <a href="#">
+        <i class="icon f7-icons ios-only">add</i>
+        <i class="icon material-icons md-only">add</i>
       </a>
     </div>
-  </div>
-  <div class="fab fab-right-bottom fab-morph" data-morph-to=".toolbar.fab-morph-target">
-    <a href="#">
-      <i class="icon f7-icons ios-only">add</i>
-      <i class="icon material-icons md-only">add</i>
-    </a>
-  </div>
-  <div class="fab fab-left-bottom fab-morph" data-morph-to=".demo-fab-sheet.fab-morph-target">
-    <a href="#">
-      <i class="icon f7-icons ios-only">add</i>
-      <i class="icon material-icons md-only">add</i>
-    </a>
-  </div>
-  <div class="fab fab-center-bottom fab-morph" data-morph-to=".demo-fab-fullscreen-sheet.fab-morph-target">
-    <a href="#">
-      <i class="icon f7-icons ios-only">add</i>
-      <i class="icon material-icons md-only">add</i>
-    </a>
-  </div>
-  <div class="list links-list demo-fab-sheet fab-morph-target">
-    <ul>
-      <li><a href="#" class="fab-close">Link 1</a></li>
-      <li><a href="#" class="fab-close">Link 2</a></li>
-      <li><a href="#" class="fab-close">Link 3</a></li>
-      <li><a href="#" class="fab-close">Link 4</a></li>
-    </ul>
-  </div>
-  <div class="demo-fab-fullscreen-sheet fab-morph-target">
-    <f7-block-title>Choose Something</f7-block-title>
-    <div class="list links-list">
+    <div class="list links-list demo-fab-sheet fab-morph-target">
       <ul>
         <li><a href="#" class="fab-close">Link 1</a></li>
         <li><a href="#" class="fab-close">Link 2</a></li>
@@ -59,26 +49,36 @@
         <li><a href="#" class="fab-close">Link 4</a></li>
       </ul>
     </div>
-  </div>
-  <div class="page-content">
-    <div class="block">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
-      <p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
-      <p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
-      <p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
-      <p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
+    <div class="demo-fab-fullscreen-sheet fab-morph-target">
+      <f7-block-title>Choose Something</f7-block-title>
+      <div class="list links-list">
+        <ul>
+          <li><a href="#" class="fab-close">Link 1</a></li>
+          <li><a href="#" class="fab-close">Link 2</a></li>
+          <li><a href="#" class="fab-close">Link 3</a></li>
+          <li><a href="#" class="fab-close">Link 4</a></li>
+        </ul>
+      </div>
     </div>
-    <div class="block">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
-      <p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
-      <p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
-      <p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
-      <p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
-      <p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
-      <p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
+    <div class="page-content">
+      <div class="block">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
+        <p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
+        <p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
+        <p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
+        <p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
+      </div>
+      <div class="block">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
+        <p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
+        <p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
+        <p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
+        <p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
+        <p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
+        <p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
+      </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
@@ -88,6 +88,6 @@
       f7Navbar,
       f7Page,
       f7BlockTitle,
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/fab.vue b/examples/kitchen-sink/pages/fab.vue
index 766cfe9..6311aaf 100644
--- a/examples/kitchen-sink/pages/fab.vue
+++ b/examples/kitchen-sink/pages/fab.vue
@@ -1,92 +1,96 @@
 <template>
-<f7-page>
-  <f7-navbar title="Floating Action Button" back-link="Back"></f7-navbar>
-  <div class="fab fab-right-top">
-    <a href="#">
-      <i class="icon f7-icons ios-only">add</i>
-      <i class="icon f7-icons ios-only">close</i>
-      <i class="icon material-icons md-only">add</i>
-      <i class="icon material-icons md-only">close</i>
-    </a>
-    <div class="fab-buttons fab-buttons-left">
-      <a href="">1</a>
-      <a href="">2</a>
-      <a href="">3</a>
+  <f7-page>
+    <f7-navbar title="Floating Action Button" back-link="Back"></f7-navbar>
+    <div class="fab fab-right-top" slot="fixed">
+      <a href="#">
+        <i class="icon f7-icons ios-only">add</i>
+        <i class="icon f7-icons ios-only">close</i>
+        <i class="icon material-icons md-only">add</i>
+        <i class="icon material-icons md-only">close</i>
+      </a>
+      <div class="fab-buttons fab-buttons-left">
+        <a href="">1</a>
+        <a href="">2</a>
+        <a href="">3</a>
+      </div>
     </div>
-  </div>
-  <div class="fab fab-right-bottom">
-    <a href="#">
-      <i class="icon f7-icons ios-only">add</i>
-      <i class="icon f7-icons ios-only">close</i>
-      <i class="icon material-icons md-only">add</i>
-      <i class="icon material-icons md-only">close</i>
-    </a>
-    <div class="fab-buttons fab-buttons-top">
-      <a href="">1</a>
-      <a href="">2</a>
-      <a href="">3</a>
+    <div class="fab fab-right-bottom" slot="fixed">
+      <a href="#">
+        <i class="icon f7-icons ios-only">add</i>
+        <i class="icon f7-icons ios-only">close</i>
+        <i class="icon material-icons md-only">add</i>
+        <i class="icon material-icons md-only">close</i>
+      </a>
+      <div class="fab-buttons fab-buttons-top">
+        <a href="">1</a>
+        <a href="">2</a>
+        <a href="">3</a>
+      </div>
     </div>
-  </div>
-  <div class="fab fab-left-bottom">
-    <a href="#">
-      <i class="icon f7-icons ios-only">add</i>
-      <i class="icon f7-icons ios-only">close</i>
-      <i class="icon material-icons md-only">add</i>
-      <i class="icon material-icons md-only">close</i>
-    </a>
-    <div class="fab-buttons fab-buttons-right">
-      <a href="">1</a>
-      <a href="">2</a>
-      <a href="">3</a>
+    <div class="fab fab-left-bottom" slot="fixed">
+      <a href="#">
+        <i class="icon f7-icons ios-only">add</i>
+        <i class="icon f7-icons ios-only">close</i>
+        <i class="icon material-icons md-only">add</i>
+        <i class="icon material-icons md-only">close</i>
+      </a>
+      <div class="fab-buttons fab-buttons-right">
+        <a href="">1</a>
+        <a href="">2</a>
+        <a href="">3</a>
+      </div>
     </div>
-  </div>
-  <div class="fab fab-left-top">
-    <a href="#">
-      <i class="icon f7-icons ios-only">add</i>
-      <i class="icon f7-icons ios-only">close</i>
-      <i class="icon material-icons md-only">add</i>
-      <i class="icon material-icons md-only">close</i>
-    </a>
-    <div class="fab-buttons fab-buttons-bottom">
-      <a href="">1</a>
-      <a href="">2</a>
-      <a href="">3</a>
+    <div class="fab fab-left-top" slot="fixed">
+      <a href="#">
+        <i class="icon f7-icons ios-only">add</i>
+        <i class="icon f7-icons ios-only">close</i>
+        <i class="icon material-icons md-only">add</i>
+        <i class="icon material-icons md-only">close</i>
+      </a>
+      <div class="fab-buttons fab-buttons-bottom">
+        <a href="">1</a>
+        <a href="">2</a>
+        <a href="">3</a>
+      </div>
     </div>
-  </div>
-  <div class="fab fab-center-center">
-    <a href="#">
-      <i class="icon f7-icons ios-only">add</i>
-      <i class="icon f7-icons ios-only">close</i>
-      <i class="icon material-icons md-only">add</i>
-      <i class="icon material-icons md-only">close</i>
-    </a>
-    <div class="fab-buttons fab-buttons-center">
-      <a href="">1</a>
-      <a href="">2</a>
-      <a href="">3</a>
-      <a href="">4</a>
+    <div class="fab fab-center-center" slot="fixed">
+      <a href="#">
+        <i class="icon f7-icons ios-only">add</i>
+        <i class="icon f7-icons ios-only">close</i>
+        <i class="icon material-icons md-only">add</i>
+        <i class="icon material-icons md-only">close</i>
+      </a>
+      <div class="fab-buttons fab-buttons-center" slot="fixed">
+        <a href="">1</a>
+        <a href="">2</a>
+        <a href="">3</a>
+        <a href="">4</a>
+      </div>
     </div>
-  </div>
-  <div class="block">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
-    <p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
-    <p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
-    <p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
-    <p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
-  </div>
-  <div class="block">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
-    <p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
-    <p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
-    <p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
-    <p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
-    <p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
-    <p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
-  </div>
-</f7-page>
+    <div class="block">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
+      <p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
+      <p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
+      <p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
+      <p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
+    </div>
+    <div class="block">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
+      <p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
+      <p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
+      <p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
+      <p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
+      <p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
+      <p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
+    </div>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar, f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/form-storage.vue b/examples/kitchen-sink/pages/form-storage.vue
index 3df40da..7b29f4e 100644
--- a/examples/kitchen-sink/pages/form-storage.vue
+++ b/examples/kitchen-sink/pages/form-storage.vue
@@ -1,8 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="About Framework7" back-link="Back"></f7-navbar>
-  <div class="page-content">
-    <f7-block-title>Welcome to Framework7</f7-block-title>
+  <f7-page>
+    <f7-navbar title="About Framework7" back-link="Back"></f7-navbar>
     <div class="block block-strong">
       <p>With forms storage it is easy to store and parse form data, especially on Ajax loaded pages. All you need to make it work is to add "form-store-data" class to your &lt;form&gt; and Framework7 will store form data with every input change. And the most awesome part is that when you load this page again Framework7 will parse this data and fill all form fields automatically!</p>
       <p>Just try to fill the form below and then go to any other page, or even you may close this site, and when you return here form fields will have kept your data.</p>
@@ -101,8 +99,7 @@
         </li>
       </ul>
     </form>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
@@ -112,6 +109,6 @@
       f7Navbar,
       f7Page,
       f7BlockTitle,
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/grid.vue b/examples/kitchen-sink/pages/grid.vue
index c4e7ae6..cd77830 100644
--- a/examples/kitchen-sink/pages/grid.vue
+++ b/examples/kitchen-sink/pages/grid.vue
@@ -1,152 +1,145 @@
 <template>
-<f7-page class="grid-demo">
-  <div class="navbar">
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a href="#" class="link back">
-          <i class="icon icon-back"></i>
-          <span class="ios-only">Back</span>
-        </a>
-      </div>
-      <div class="title">Grid / Layout</div>
-    </div>
-  </div>
-  <div class="block">
-    <p>Columns within a row are automatically set to have equal width. Otherwise you can define your column with pourcentage of screen you want.</p>
-  </div>
-  <f7-block-title>Columns with gutter</f7-block-title>
-  <div class="block">
-    <div class="row">
-      <div class="col">50% (.col)</div>
-      <div class="col">50% (.col)</div>
-    </div>
-    <div class="row">
-      <div class="col">25% (.col)</div>
-      <div class="col">25% (.col)</div>
-      <div class="col">25% (.col)</div>
-      <div class="col">25% (.col)</div>
-    </div>
-    <div class="row">
-      <div class="col">33% (.col)</div>
-      <div class="col">33% (.col)</div>
-      <div class="col">33% (.col)</div>
-    </div>
-    <div class="row">
-      <div class="col">20% (.col)</div>
-      <div class="col">20% (.col)</div>
-      <div class="col">20% (.col)</div>
-      <div class="col">20% (.col)</div>
-      <div class="col">20% (.col)</div>
-    </div>
-    <div class="row">
-      <div class="col-33">33% (.col-33)</div>
-      <div class="col-66">66% (.col-66)</div>
-    </div>
-    <div class="row">
-      <div class="col-25">25% (.col-25)</div>
-      <div class="col-25">25% (.col-25)</div>
-      <div class="col-50">50% (.col-50)</div>
-    </div>
-    <div class="row">
-      <div class="col-75">75% (.col-75)</div>
-      <div class="col-25">25% (.col-25)</div>
-    </div>
-    <div class="row">
-      <div class="col-80">80% (.col-80)</div>
-      <div class="col-20">20% (.col-20)</div>
-    </div>
-  </div>
-  <f7-block-title>No gutter between columns</f7-block-title>
-  <div class="block">
-    <div class="row no-gap">
-      <div class="col">50% (.col)</div>
-      <div class="col">50% (.col)</div>
-    </div>
-    <div class="row no-gap">
-      <div class="col">25% (.col)</div>
-      <div class="col">25% (.col)</div>
-      <div class="col">25% (.col)</div>
-      <div class="col">25% (.col)</div>
-    </div>
-    <div class="row no-gap">
-      <div class="col">33% (.col)</div>
-      <div class="col">33% (.col)</div>
-      <div class="col">33% (.col)</div>
-    </div>
-    <div class="row no-gap">
-      <div class="col">20% (.col)</div>
-      <div class="col">20% (.col)</div>
-      <div class="col">20% (.col)</div>
-      <div class="col">20% (.col)</div>
-      <div class="col">20% (.col)</div>
-    </div>
-    <div class="row no-gap">
-      <div class="col-33">33% (.col-33)</div>
-      <div class="col-66">66% (.col-66)</div>
-    </div>
-    <div class="row no-gap">
-      <div class="col-25">25% (.col-25)</div>
-      <div class="col-25">25% (.col-25)</div>
-      <div class="col-50">50% (.col-50)</div>
-    </div>
-    <div class="row no-gap">
-      <div class="col-75">75% (.col-75)</div>
-      <div class="col-25">25% (.col-25)</div>
-    </div>
-    <div class="row no-gap">
-      <div class="col-80">80% (.col-80)</div>
-      <div class="col-20">20% (.col-20)</div>
-    </div>
-  </div>
+  <f7-page class="grid-demo">
+    <f7-navbar title="Grid / Layout" back-link="Back"></f7-navbar>
+    <f7-block>
+      <p>Columns within a row are automatically set to have equal width. Otherwise you can define your column with pourcentage of screen you want.</p>
+    </f7-block>
+    <f7-block-title>Columns with gap</f7-block-title>
+    <f7-block>
+      <f7-row>
+        <f7-col>50% (.col)</f7-col>
+        <f7-col>50% (.col)</f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col>25% (.col)</f7-col>
+        <f7-col>25% (.col)</f7-col>
+        <f7-col>25% (.col)</f7-col>
+        <f7-col>25% (.col)</f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col>33% (.col)</f7-col>
+        <f7-col>33% (.col)</f7-col>
+        <f7-col>33% (.col)</f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col>20% (.col)</f7-col>
+        <f7-col>20% (.col)</f7-col>
+        <f7-col>20% (.col)</f7-col>
+        <f7-col>20% (.col)</f7-col>
+        <f7-col>20% (.col)</f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col width="33">33% (.col-33)</f7-col>
+        <f7-col width="66">66% (.col-66)</f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col width="25">25% (.col-25)</f7-col>
+        <f7-col width="25">25% (.col-25)</f7-col>
+        <f7-col width="50">50% (.col-50)</f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col width="75">75% (.col-75)</f7-col>
+        <f7-col width="25">25% (.col-25)</f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col width="80">80% (.col-80)</f7-col>
+        <f7-col width="20">20% (.col-20)</f7-col>
+      </f7-row>
+    </f7-block>
+    <f7-block-title>No gap between columns</f7-block-title>
+    <f7-block>
+      <f7-row no-gap>
+        <f7-col>50% (.col)</f7-col>
+        <f7-col>50% (.col)</f7-col>
+      </f7-row>
+      <f7-row no-gap>
+        <f7-col>25% (.col)</f7-col>
+        <f7-col>25% (.col)</f7-col>
+        <f7-col>25% (.col)</f7-col>
+        <f7-col>25% (.col)</f7-col>
+      </f7-row>
+      <f7-row no-gap>
+        <f7-col>33% (.col)</f7-col>
+        <f7-col>33% (.col)</f7-col>
+        <f7-col>33% (.col)</f7-col>
+      </f7-row>
+      <f7-row no-gap>
+        <f7-col>20% (.col)</f7-col>
+        <f7-col>20% (.col)</f7-col>
+        <f7-col>20% (.col)</f7-col>
+        <f7-col>20% (.col)</f7-col>
+        <f7-col>20% (.col)</f7-col>
+      </f7-row>
+      <f7-row no-gap>
+        <f7-col width="33">33% (.col-33)</f7-col>
+        <f7-col width="66">66% (.col-66)</f7-col>
+      </f7-row>
+      <f7-row no-gap>
+        <f7-col width="25">25% (.col-25)</f7-col>
+        <f7-col width="25">25% (.col-25)</f7-col>
+        <f7-col width="50">50% (.col-50)</f7-col>
+      </f7-row>
+      <f7-row no-gap>
+        <f7-col width="75">75% (.col-75)</f7-col>
+        <f7-col width="25">25% (.col-25)</f7-col>
+      </f7-row>
+      <f7-row no-gap>
+        <f7-col width="80">80% (.col-80)</f7-col>
+        <f7-col width="20">20% (.col-20)</f7-col>
+      </f7-row>
+    </f7-block>
 
-  <f7-block-title>Nested</f7-block-title>
-  <div class="block">
-    <div class="row">
-      <div class="col">50% (.col)
-        <div class="row">
-          <div class="col">50% (.col)</div>
-          <div class="col">50% (.col)</div>
-        </div>
-      </div>
-      <div class="col">50% (.col)
-        <div class="row">
-          <div class="col-33">33% (.col-33)</div>
-          <div class="col-66">66% (.col-66)</div>
-        </div>
-      </div>
-    </div>
-  </div>
+    <f7-block-title>Nested</f7-block-title>
+    <f7-block>
+      <f7-row>
+        <f7-col>50% (.col)
+          <f7-row>
+            <f7-col>50% (.col)</f7-col>
+            <f7-col>50% (.col)</f7-col>
+          </f7-row>
+        </f7-col>
+        <f7-col>50% (.col)
+          <f7-row>
+            <f7-col width="33">33% (.col-33)</f7-col>
+            <f7-col width="66">66% (.col-66)</f7-col>
+          </f7-row>
+        </f7-col>
+      </f7-row>
+    </f7-block>
 
-  <f7-block-title>Responsive Grid</f7-block-title>
-  <div class="block">
-    <p>Grid cells have different size on Phone/Tablet</p>
-    <div class="row">
-      <div class="col-100 tablet-50">.col-100.tablet-50</div>
-      <div class="col-100 tablet-50">.col-100.tablet-50</div>
-    </div>
-    <div class="row">
-      <div class="col-50 tablet-25">.col-50.tablet-25</div>
-      <div class="col-50 tablet-25">.col-50.tablet-25</div>
-      <div class="col-50 tablet-25">.col-50.tablet-25</div>
-      <div class="col-50 tablet-25">.col-50.tablet-25</div>
-    </div>
-    <div class="row">
-      <div class="col-100 tablet-40">.col-100.tablet-40</div>
-      <div class="col-50 tablet-60">.col-50.tablet-60</div>
-      <div class="col-50 tablet-66">.col-50.tablet-66</div>
-      <div class="col-100 tablet-33">.col-100.tablet-33</div>
-    </div>
-  </div>
-</f7-page>
+    <f7-block-title>Responsive Grid</f7-block-title>
+    <f7-block>
+      <p>Grid cells have different size on Phone/Tablet</p>
+      <f7-row>
+        <f7-col width="100" tablet-width="50">.col-100.tablet-50</f7-col>
+        <f7-col width="100" tablet-width="50">.col-100.tablet-50</f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col width="50" tablet-width="25">.col-50.tablet-25</f7-col>
+        <f7-col width="50" tablet-width="25">.col-50.tablet-25</f7-col>
+        <f7-col width="50" tablet-width="25">.col-50.tablet-25</f7-col>
+        <f7-col width="50" tablet-width="25">.col-50.tablet-25</f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col width="100" tablet-width="40">.col-100.tablet-40</f7-col>
+        <f7-col width="50" tablet-width="60">.col-50.tablet-60</f7-col>
+        <f7-col width="50" tablet-width="66">.col-50.tablet-66</f7-col>
+        <f7-col width="100" tablet-width="33">.col-100.tablet-33</f7-col>
+      </f7-row>
+    </f7-block>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7Row, f7Col, f7Block } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
-    }
-  }
+      f7Row,
+      f7Col,
+      f7Block,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/home.vue b/examples/kitchen-sink/pages/home.vue
index 63bb4f7..7f86ffa 100644
--- a/examples/kitchen-sink/pages/home.vue
+++ b/examples/kitchen-sink/pages/home.vue
@@ -2,94 +2,186 @@
   <f7-page>
     <f7-navbar title="Framework7">
       <f7-nav-right>
-        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
-          <i class="icon f7-icons ios-only">search_strong</i>
-          <i class="icon material-icons md-only">search</i>
-        </a>
+        <f7-link class="searchbar-enable" data-searchbar=".searchbar-components" icon-if-ios="f7:search_strong" icon-if-md="material:search"></f7-link>
       </f7-nav-right>
-      <form data-search-container=".components-list" data-search-in="a" class="searchbar searchbar-expandable searchbar-components searchbar-init">
-        <div class="searchbar-inner">
-          <div class="searchbar-input-wrap">
-            <input type="search" placeholder="Search components"/>
-            <i class="searchbar-icon"></i>
-            <span class="input-clear-button"></span>
-          </div>
-          <span class="searchbar-disable-button">Cancel</span>
-        </div>
-      </form>
+      <f7-searchbar class="searchbar-components" search-container=".components-list" search-in="a" expandable></f7-searchbar>
     </f7-navbar>
 
     <f7-list class="searchbar-hide-on-search">
-      <f7-list-item title="About Framework7" link="/about/"></f7-list-item>
+      <f7-list-item title="About Framework7" link="/about/">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
     </f7-list>
 
     <f7-block-title class="searchbar-found">Components</f7-block-title>
     <f7-list class="components-list searchbar-found">
-      <f7-list-item link="/accordion/" title="Accordion"></f7-list-item>
-      <f7-list-item link="/action-sheet/" title="Action Sheet"></f7-list-item>
-      <f7-list-item link="/autocomplete/" title="Autocomplete"></f7-list-item>
-      <f7-list-item link="/badge/" title="Badge"></f7-list-item>
-      <f7-list-item link="/buttons/" title="Buttons"></f7-list-item>
-      <f7-list-item link="/calendar/" title="Calendar / Date Picker" badge="TODO"></f7-list-item>
-      <f7-list-item link="/cards/" title="Cards"></f7-list-item>
-      <f7-list-item link="/checkbox/" title="Checkbox"></f7-list-item>
-      <f7-list-item link="/chips/" title="Chips/Tags"></f7-list-item>
-      <f7-list-item link="/contacts-list/" title="Contacts List"></f7-list-item>
-      <f7-list-item link="/content-block/" title="Content Block"></f7-list-item>
-      <f7-list-item link="/data-table/" title="Data Table"></f7-list-item>
-      <f7-list-item link="/dialog/" title="Dialog"></f7-list-item>
-      <f7-list-item link="/fab/" title="FAB"></f7-list-item>
-      <f7-list-item link="/fab-morph/" title="FAB Morph"></f7-list-item>
-      <f7-list-item link="/form-storage/" title="Form Storage"></f7-list-item>
-      <f7-list-item link="/icons/" title="Icons"></f7-list-item>
-      <f7-list-item link="/infinite-scroll/" title="Infinite Scroll"></f7-list-item>
-      <f7-list-item link="/inputs/" title="Inputs"></f7-list-item>
-      <f7-list-item link="/grid/" title="Grid / Layout Grid"></f7-list-item>
-      <f7-list-item link="/lazy-load/" title="Lazy Load"></f7-list-item>
-      <f7-list-item link="/list/" title="List View"></f7-list-item>
-      <f7-list-item link="/login-screen/" title="Login Screen"></f7-list-item>
-      <f7-list-item link="/messages/" title="Messages"></f7-list-item>
-      <f7-list-item link="/navbar/" title="Navbar"></f7-list-item>
-      <f7-list-item link="/notifications/" title="Notifications"></f7-list-item>
-      <f7-list-item link="/panel/" title="Panel / Side Panels"></f7-list-item>
-      <f7-list-item link="/picker/" title="Picker" badge="TODO"></f7-list-item>
-      <f7-list-item link="/photo-browser/" title="Photo Browser"></f7-list-item>
-      <f7-list-item link="/popup/" title="Popup"></f7-list-item>
-      <f7-list-item link="/popover/" title="Popover"></f7-list-item>
-      <f7-list-item link="/preloader/" title="Preloader"></f7-list-item>
-      <f7-list-item link="/progressbar/" title="Progress Bar"></f7-list-item>
-      <f7-list-item link="/pull-to-refresh/" title="Pull To Refresh"></f7-list-item>
-      <f7-list-item link="/radio/" title="Radio"></f7-list-item>
-      <f7-list-item link="/range/" title="Range Slider"></f7-list-item>
-      <f7-list-item link="/searchbar/" title="Searchbar"></f7-list-item>
-      <f7-list-item link="/searchbar-expandable/" title="Searchbar Expandable"></f7-list-item>
-      <f7-list-item link="/sheet-modal/" title="Sheet Modal"></f7-list-item>
-      <f7-list-item link="/smart-select/" title="Smart Select"></f7-list-item>
-      <f7-list-item link="/sortable/" title="Sortable List"></f7-list-item>
-      <f7-list-item link="/statusbar/" title="Statusbar"></f7-list-item>
-      <f7-list-item link="/subnavbar/" title="Subnavbar"></f7-list-item>
-      <f7-list-item link="/swipeout/" title="Swipeout (Swipe To Delete)"></f7-list-item>
-      <f7-list-item link="/swiper/" title="Swiper Slider"></f7-list-item>
-      <f7-list-item link="/tabs/" title="Tabs"></f7-list-item>
-      <f7-list-item link="/timeline/" title="Timeline"></f7-list-item>
-      <f7-list-item link="/toast/" title="Toast"></f7-list-item>
-      <f7-list-item link="/toggle/" title="Toggle"></f7-list-item>
-      <f7-list-item link="/toolbar-tabbar/" title="Toolbar & Tabbar"></f7-list-item>
-      <f7-list-item link="/virtual-list/" title="Virtual List"></f7-list-item>
+      <f7-list-item link="/accordion/" title="Accordion">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/action-sheet/" title="Action Sheet">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/autocomplete/" title="Autocomplete">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/badge/" title="Badge">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/buttons/" title="Buttons">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/calendar/" title="Calendar / Date Picker">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/cards/" title="Cards">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/checkbox/" title="Checkbox">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/chips/" title="Chips/Tags">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/contacts-list/" title="Contacts List">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/content-block/" title="Content Block">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/data-table/" title="Data Table">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/dialog/" title="Dialog">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/fab/" title="FAB">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/fab-morph/" title="FAB Morph">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/form-storage/" title="Form Storage">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/icons/" title="Icons">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/infinite-scroll/" title="Infinite Scroll">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/inputs/" title="Inputs">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/grid/" title="Grid / Layout Grid">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/lazy-load/" title="Lazy Load">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/list/" title="List View">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/login-screen/" title="Login Screen">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/messages/" title="Messages">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/navbar/" title="Navbar">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/notifications/" title="Notifications">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/panel/" title="Panel / Side Panels">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/picker/" title="Picker">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/photo-browser/" title="Photo Browser">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/popup/" title="Popup">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/popover/" title="Popover">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/preloader/" title="Preloader">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/progressbar/" title="Progress Bar">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/pull-to-refresh/" title="Pull To Refresh">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/radio/" title="Radio">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/range/" title="Range Slider">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/searchbar/" title="Searchbar">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/searchbar-expandable/" title="Searchbar Expandable">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/sheet-modal/" title="Sheet Modal">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/smart-select/" title="Smart Select">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/sortable/" title="Sortable List">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/statusbar/" title="Statusbar">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/subnavbar/" title="Subnavbar">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/swipeout/" title="Swipeout (Swipe To Delete)">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/swiper/" title="Swiper Slider">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/tabs/" title="Tabs">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/timeline/" title="Timeline">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/toast/" title="Toast">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/toggle/" title="Toggle">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/toolbar-tabbar/" title="Toolbar & Tabbar">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="/virtual-list/" title="Virtual List">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
     </f7-list>
     <f7-list class="searchbar-not-found">
       <f7-list-item title="Nothing found"></f7-list-item>
     </f7-list>
     <f7-block-title class="searchbar-hide-on-search">Themes</f7-block-title>
     <f7-list class="searchbar-hide-on-search">
-      <f7-list-item title="iOS Theme" external link="./?theme=ios"></f7-list-item>
-      <f7-list-item title="Material (MD) Theme" external link="./?theme=md"></f7-list-item>
+      <f7-list-item title="iOS Theme" external link="./index.html?theme=ios"></f7-list-item>
+      <f7-list-item title="Material (MD) Theme" external link="./index.html?theme=md"></f7-list-item>
       <f7-list-item title="Color Themes" link="/color-themes/"></f7-list-item>
     </f7-list>
   </f7-page>
 </template>
 <script>
-  import { f7Page, f7Navbar, f7NavRight, f7BlockTitle, f7List, f7ListItem } from 'framework7-vue';
+  import { f7Page, f7Navbar, f7NavRight, f7BlockTitle, f7List, f7ListItem, f7Link, f7Searchbar, f7Icon } from 'framework7-vue';
 
   export default {
     components: {
@@ -99,6 +191,9 @@
       f7BlockTitle,
       f7List,
       f7ListItem,
+      f7Link,
+      f7Searchbar,
+      f7Icon,
     },
   };
 </script>
diff --git a/examples/kitchen-sink/pages/icons.vue b/examples/kitchen-sink/pages/icons.vue
index 5d8a5e2..295169d 100644
--- a/examples/kitchen-sink/pages/icons.vue
+++ b/examples/kitchen-sink/pages/icons.vue
@@ -2,48 +2,56 @@
   <f7-page>
     <f7-navbar title="Icons" back-link="Back"></f7-navbar>
     <f7-block-title>Scroll bottom</f7-block-title>
-    <div class="block block-strong">
+    <f7-block strong>
       <p>Framework7 comes with the premium and free <a href="https://github.com/nolimits4web/Framework7-Icons" class="external" target="_blank">Framework7 Icons</a> iOS-icons font developed specially to be used with iOS theme of Framework7. As for Material theme we recommend to use great-designed <a href="https://material.io/icons/" class="external" target="_blank">Material Icons</a> font. Both of these fonts use a typographic feature called <a href="http://alistapart.com/article/the-era-of-symbol-fonts" class="external" target="_blank">ligatures</a>. It’s easy to incorporate icons into your app. Here’s a small example:</p>
       <p><code>&lt;i class="f7-icons"&gt;home&lt;/i&gt;</code> - <i class="f7-icons">home</i></p>
       <p><code>&lt;i class="material-icons"&gt;home&lt;/i&gt;</code> - <i class="material-icons">home</i></p>
       <p><a href="http://alistapart.com/article/the-era-of-symbol-fonts" class="external" target="_blank">Ligatures</a> allow rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.</p>
-    </div>
-    <div class="block-header">
-      <div class="segmented segmented-raised">
-        <a href="#tab-f7" class="button tab-link tab-link-active">F7 Icons</a>
-        <a href="#tab-md" class="button tab-link">Material Icons</a>
-      </div>
-    </div>
-    <div class="block block-strong tabs">
-      <div id="tab-f7" class="tab tab-active">
-        <div class="row">
-          <div class="col-33 tablet-15 demo-icon" v-for="icon in f7Icons" :key="icon">
+    </f7-block>
+    <f7-block-header>
+      <f7-segmented raised>
+        <f7-button tab-link="#tab-f7" tab-link-active>F7 Icons</f7-button>
+        <f7-button tab-link="#tab-md">Material Icons</f7-button>
+      </f7-segmented>
+    </f7-block-header>
+    <f7-block strong class="tabs">
+      <f7-tab id="tab-f7" tab-active>
+        <f7-row>
+          <f7-col width="33" tablet-width="15" class="demo-icon" v-for="icon in f7Icons" :key="icon">
             <div class="demo-icon-icon"><i class="f7-icons">{{ icon }}</i></div>
             <div class="demo-icon-name">{{ icon }}</div>
-          </div>
-        </div>
-      </div>
-      <div id="tab-md" class="tab">
-        <div class="row">
-          <div class="col-33 tablet-15 demo-icon"  v-for="icon in mdIcons" :key="icon">
+          </f7-col>
+        </f7-row>
+      </f7-tab>
+      <f7-tab id="tab-md">
+        <f7-row>
+          <f7-col width="33" tablet-width="15" class="demo-icon" v-for="icon in mdIcons" :key="icon">
             <div class="demo-icon-icon"><i class="material-icons">{{ icon }}</i></div>
             <div class="demo-icon-name">{{ icon }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
+          </f7-col>
+        </f7-row>
+      </f7-tab>
+    </f7-block>
   </f7-page>
 </template>
 <script>
-  import { f7Page, f7Navbar, f7BlockTitle } from 'framework7-vue';
+  import { f7Page, f7Navbar, f7BlockTitle, f7Block, f7Tab, f7Row, f7Col, f7BlockHeader, f7Segmented, f7Button } from 'framework7-vue';
+
+  const f7Icons = 'add add_round add_round_fill alarm alarm_fill albums albums_fill arrow_down arrow_down_fill arrow_left arrow_left_fill arrow_right arrow_right_fill arrow_up arrow_up_fill at at_fill bag bag_fill bars bell bell_fill bolt bolt_fill bolt_round bolt_round_fill book book_fill bookmark bookmark_fill box box_fill briefcase briefcase_fill calendar calendar_fill camera camera_fill card card_fill chat chat_fill chats chats_fill check check_round check_round_fill chevron_down chevron_left chevron_right chevron_up circle circle_fill circle_half close close_round close_round_fill cloud cloud_download cloud_download_fill cloud_fill cloud_upload cloud_upload_fill collection collection_fill compass compass_fill compose compose_fill data data_fill delete delete_round delete_round_fill document document_fill document_text document_text_fill down download download_fill download_round download_round_fill drawer drawer_fill drawers drawers_fill email email_fill eye eye_fill fastforward fastforward_fill fastforward_round fastforward_round_fill favorites favorites_fill film film_fill filter filter-fill flag flag_fill folder folder_fill forward forward_fill gear gear_fill graph_round graph_round_fill graph_square graph_square_fill heart heart_fill help help_fill home home_fill images images_fill info info_fill keyboard keyboard_fill layers layers_fill left list list_fill lock lock_fill login login_fill logout logout_fill menu mic mic_fill money_dollar money_dollar_fill money_euro money_euro_fill money_pound money_pound_fill money_rubl money_rubl_fill money_yen money_yen_fill more more_fill more_round more_round_fill more_vertical more_vertical_fill more_vertical_round more_vertical_round_fill navigation navigation_fill paper_plane paper_plane_fill pause pause_fill pause_round pause_round_fill person person_fill persons persons_fill phone phone_fill phone_round phone_round_fill photos photos_fill pie pie_fill play play_fill play_round play_round_fill radio redo refresh refresh_round refresh_round_fill reload reload_round reload_round_fill reply reply_fill rewind rewind_fill rewind_round rewind_round_fill right search search_strong settings settings_fill share share_fill social_facebook social_facebook_fill social_github social_github_fill social_googleplus social_instagram social_instagram_fill social_linkedin social_linkedin_fill social_rss social_rss_fill social_twitter social_twitter_fill sort sort_fill star star_fill star_half stopwatch stopwatch_fill tabs tabs_fill tags tags_fill tape tape_fill ticket ticket_fill time time_fill timer timer_fill today today_fill trash trash_fill tune tune_fill undo unlock unlock_fill up videocam videocam_fill videocam_round videocam_round_fill volume volume_fill volume_low volume_low_fill volume_mute volume_mute_fill world world_fill zoom_in zoom_out';
+  const mdIcons = '3d_rotation ac_unit access_alarm access_alarms access_time accessibility accessible account_balance account_balance_wallet account_box account_circle adb add add_a_photo add_alarm add_alert add_box add_circle add_circle_outline add_location add_shopping_cart add_to_photos add_to_queue adjust airline_seat_flat airline_seat_flat_angled airline_seat_individual_suite airline_seat_legroom_extra airline_seat_legroom_normal airline_seat_legroom_reduced airline_seat_recline_extra airline_seat_recline_normal airplanemode_active airplanemode_inactive airplay airport_shuttle alarm alarm_add alarm_off alarm_on album all_inclusive all_out android announcement apps archive arrow_back arrow_downward arrow_drop_down arrow_drop_down_circle arrow_drop_up arrow_forward arrow_upward art_track aspect_ratio assessment assignment assignment_ind assignment_late assignment_return assignment_returned assignment_turned_in assistant assistant_photo attach_file attach_money attachment audiotrack autorenew av_timer backspace backup battery_alert battery_charging_full battery_full battery_std battery_unknown beach_access beenhere block bluetooth bluetooth_audio bluetooth_connected bluetooth_disabled bluetooth_searching blur_circular blur_linear blur_off blur_on book bookmark bookmark_border border_all border_bottom border_clear border_color border_horizontal border_inner border_left border_outer border_right border_style border_top border_vertical branding_watermark brightness_1 brightness_2 brightness_3 brightness_4 brightness_5 brightness_6 brightness_7 brightness_auto brightness_high brightness_low brightness_medium broken_image brush bubble_chart bug_report build burst_mode business business_center cached cake call call_end call_made call_merge call_missed call_missed_outgoing call_received call_split call_to_action camera camera_alt camera_enhance camera_front camera_rear camera_roll cancel card_giftcard card_membership card_travel casino cast cast_connected center_focus_strong center_focus_weak change_history chat chat_bubble chat_bubble_outline check check_box check_box_outline_blank check_circle chevron_left chevron_right child_care child_friendly chrome_reader_mode class clear clear_all close closed_caption cloud cloud_circle cloud_done cloud_download cloud_off cloud_queue cloud_upload code collections collections_bookmark color_lens colorize comment compare compare_arrows computer confirmation_number contact_mail contact_phone contacts content_copy content_cut content_paste control_point control_point_duplicate copyright create create_new_folder credit_card crop crop_16_9 crop_3_2 crop_5_4 crop_7_5 crop_din crop_free crop_landscape crop_original crop_portrait crop_rotate crop_square dashboard data_usage date_range dehaze delete delete_forever delete_sweep description desktop_mac desktop_windows details developer_board developer_mode device_hub devices devices_other dialer_sip dialpad directions directions_bike directions_boat directions_bus directions_car directions_railway directions_run directions_subway directions_transit directions_walk disc_full dns do_not_disturb do_not_disturb_alt do_not_disturb_off do_not_disturb_on dock domain done done_all donut_large donut_small drafts drag_handle drive_eta dvr edit edit_location eject email enhanced_encryption equalizer error error_outline euro_symbol ev_station event event_available event_busy event_note event_seat exit_to_app expand_less expand_more explicit explore exposure exposure_neg_1 exposure_neg_2 exposure_plus_1 exposure_plus_2 exposure_zero extension face fast_forward fast_rewind favorite favorite_border featured_play_list featured_video feedback fiber_dvr fiber_manual_record fiber_new fiber_pin fiber_smart_record file_download file_upload filter filter_1 filter_2 filter_3 filter_4 filter_5 filter_6 filter_7 filter_8 filter_9 filter_9_plus filter_b_and_w filter_center_focus filter_drama filter_frames filter_hdr filter_list filter_none filter_tilt_shift filter_vintage find_in_page find_replace fingerprint first_page fitness_center flag flare flash_auto flash_off flash_on flight flight_land flight_takeoff flip flip_to_back flip_to_front folder folder_open folder_shared folder_special font_download format_align_center format_align_justify format_align_left format_align_right format_bold format_clear format_color_fill format_color_reset format_color_text format_indent_decrease format_indent_increase format_italic format_line_spacing format_list_bulleted format_list_numbered format_paint format_quote format_shapes format_size format_strikethrough format_textdirection_l_to_r format_textdirection_r_to_l format_underlined forum forward forward_10 forward_30 forward_5 free_breakfast fullscreen fullscreen_exit functions g_translate gamepad games gavel gesture get_app gif golf_course gps_fixed gps_not_fixed gps_off grade gradient grain graphic_eq grid_off grid_on group group_add group_work hd hdr_off hdr_on hdr_strong hdr_weak headset headset_mic healing hearing help help_outline high_quality highlight highlight_off history home hot_tub hotel hourglass_empty hourglass_full http https image image_aspect_ratio import_contacts import_export important_devices inbox indeterminate_check_box info info_outline input insert_chart insert_comment insert_drive_file insert_emoticon insert_invitation insert_link insert_photo invert_colors invert_colors_off iso keyboard keyboard_arrow_down keyboard_arrow_left keyboard_arrow_right keyboard_arrow_up keyboard_backspace keyboard_capslock keyboard_hide keyboard_return keyboard_tab keyboard_voice kitchen label label_outline landscape language laptop laptop_chromebook laptop_mac laptop_windows last_page launch layers layers_clear leak_add leak_remove lens library_add library_books library_music lightbulb_outline line_style line_weight linear_scale link linked_camera list live_help live_tv local_activity local_airport local_atm local_bar local_cafe local_car_wash local_convenience_store local_dining local_drink local_florist local_gas_station local_grocery_store local_hospital local_hotel local_laundry_service local_library local_mall local_movies local_offer local_parking local_pharmacy local_phone local_pizza local_play local_post_office local_printshop local_see local_shipping local_taxi location_city location_disabled location_off location_on location_searching lock lock_open lock_outline looks looks_3 looks_4 looks_5 looks_6 looks_one looks_two loop loupe low_priority loyalty mail mail_outline map markunread markunread_mailbox memory menu merge_type message mic mic_none mic_off mms mode_comment mode_edit monetization_on money_off monochrome_photos mood mood_bad more more_horiz more_vert motorcycle mouse move_to_inbox movie movie_creation movie_filter multiline_chart music_note music_video my_location nature nature_people navigate_before navigate_next navigation near_me network_cell network_check network_locked network_wifi new_releases next_week nfc no_encryption no_sim not_interested note note_add notifications notifications_active notifications_none notifications_off notifications_paused offline_pin ondemand_video opacity open_in_browser open_in_new open_with pages pageview palette pan_tool panorama panorama_fish_eye panorama_horizontal panorama_vertical panorama_wide_angle party_mode pause pause_circle_filled pause_circle_outline payment people people_outline perm_camera_mic perm_contact_calendar perm_data_setting perm_device_information perm_identity perm_media perm_phone_msg perm_scan_wifi person person_add person_outline person_pin person_pin_circle personal_video pets phone phone_android phone_bluetooth_speaker phone_forwarded phone_in_talk phone_iphone phone_locked phone_missed phone_paused phonelink phonelink_erase phonelink_lock phonelink_off phonelink_ring phonelink_setup photo photo_album photo_camera photo_filter photo_library photo_size_select_actual photo_size_select_large photo_size_select_small picture_as_pdf picture_in_picture picture_in_picture_alt pie_chart pie_chart_outlined pin_drop place play_arrow play_circle_filled play_circle_outline play_for_work playlist_add playlist_add_check playlist_play plus_one poll polymer pool portable_wifi_off portrait power power_input power_settings_new pregnant_woman present_to_all print priority_high public publish query_builder question_answer queue queue_music queue_play_next radio radio_button_checked radio_button_unchecked rate_review receipt recent_actors record_voice_over redeem redo refresh remove remove_circle remove_circle_outline remove_from_queue remove_red_eye remove_shopping_cart reorder repeat repeat_one replay replay_10 replay_30 replay_5 reply reply_all report report_problem restaurant restaurant_menu restore restore_page ring_volume room room_service rotate_90_degrees_ccw rotate_left rotate_right rounded_corner router rowing rss_feed rv_hookup satellite save scanner schedule school screen_lock_landscape screen_lock_portrait screen_lock_rotation screen_rotation screen_share sd_card sd_storage search security select_all send sentiment_dissatisfied sentiment_neutral sentiment_satisfied sentiment_very_dissatisfied sentiment_very_satisfied settings settings_applications settings_backup_restore settings_bluetooth settings_brightness settings_cell settings_ethernet settings_input_antenna settings_input_component settings_input_composite settings_input_hdmi settings_input_svideo settings_overscan settings_phone settings_power settings_remote settings_system_daydream settings_voice share shop shop_two shopping_basket shopping_cart short_text show_chart shuffle signal_cellular_4_bar signal_cellular_connected_no_internet_4_bar signal_cellular_no_sim signal_cellular_null signal_cellular_off signal_wifi_4_bar signal_wifi_4_bar_lock signal_wifi_off sim_card sim_card_alert skip_next skip_previous slideshow slow_motion_video smartphone smoke_free smoking_rooms sms sms_failed snooze sort sort_by_alpha spa space_bar speaker speaker_group speaker_notes speaker_notes_off speaker_phone spellcheck star star_border star_half stars stay_current_landscape stay_current_portrait stay_primary_landscape stay_primary_portrait stop stop_screen_share storage store store_mall_directory straighten streetview strikethrough_s style subdirectory_arrow_left subdirectory_arrow_right subject subscriptions subtitles subway supervisor_account surround_sound swap_calls swap_horiz swap_vert swap_vertical_circle switch_camera switch_video sync sync_disabled sync_problem system_update system_update_alt tab tab_unselected tablet tablet_android tablet_mac tag_faces tap_and_play terrain text_fields text_format textsms texture theaters thumb_down thumb_up thumbs_up_down time_to_leave timelapse timeline timer timer_10 timer_3 timer_off title toc today toll tonality touch_app toys track_changes traffic train tram transfer_within_a_station transform translate trending_down trending_flat trending_up tune turned_in turned_in_not tv unarchive undo unfold_less unfold_more update usb verified_user vertical_align_bottom vertical_align_center vertical_align_top vibration video_call video_label video_library videocam videocam_off videogame_asset view_agenda view_array view_carousel view_column view_comfy view_compact view_day view_headline view_list view_module view_quilt view_stream view_week vignette visibility visibility_off voice_chat voicemail volume_down volume_mute volume_off volume_up vpn_key vpn_lock wallpaper warning watch watch_later wb_auto wb_cloudy wb_incandescent wb_iridescent wb_sunny wc web web_asset weekend whatshot widgets wifi wifi_lock wifi_tethering work wrap_text youtube_searched_for zoom_in zoom_out zoom_out_map';
 
-  var f7Icons = 'add add_round add_round_fill alarm alarm_fill albums albums_fill arrow_down arrow_down_fill arrow_left arrow_left_fill arrow_right arrow_right_fill arrow_up arrow_up_fill at at_fill bag bag_fill bars bell bell_fill bolt bolt_fill bolt_round bolt_round_fill book book_fill bookmark bookmark_fill box box_fill briefcase briefcase_fill calendar calendar_fill camera camera_fill card card_fill chat chat_fill chats chats_fill check check_round check_round_fill chevron_down chevron_left chevron_right chevron_up circle circle_fill circle_half close close_round close_round_fill cloud cloud_download cloud_download_fill cloud_fill cloud_upload cloud_upload_fill collection collection_fill compass compass_fill compose compose_fill data data_fill delete delete_round delete_round_fill document document_fill document_text document_text_fill down download download_fill download_round download_round_fill drawer drawer_fill drawers drawers_fill email email_fill eye eye_fill fastforward fastforward_fill fastforward_round fastforward_round_fill favorites favorites_fill film film_fill filter filter-fill flag flag_fill folder folder_fill forward forward_fill gear gear_fill graph_round graph_round_fill graph_square graph_square_fill heart heart_fill help help_fill home home_fill images images_fill info info_fill keyboard keyboard_fill layers layers_fill left list list_fill lock lock_fill login login_fill logout logout_fill menu mic mic_fill money_dollar money_dollar_fill money_euro money_euro_fill money_pound money_pound_fill money_rubl money_rubl_fill money_yen money_yen_fill more more_fill more_round more_round_fill more_vertical more_vertical_fill more_vertical_round more_vertical_round_fill navigation navigation_fill paper_plane paper_plane_fill pause pause_fill pause_round pause_round_fill person person_fill persons persons_fill phone phone_fill phone_round phone_round_fill photos photos_fill pie pie_fill play play_fill play_round play_round_fill radio redo refresh refresh_round refresh_round_fill reload reload_round reload_round_fill reply reply_fill rewind rewind_fill rewind_round rewind_round_fill right search search_strong settings settings_fill share share_fill social_facebook social_facebook_fill social_github social_github_fill social_googleplus social_instagram social_instagram_fill social_linkedin social_linkedin_fill social_rss social_rss_fill social_twitter social_twitter_fill sort sort_fill star star_fill star_half stopwatch stopwatch_fill tabs tabs_fill tags tags_fill tape tape_fill ticket ticket_fill time time_fill timer timer_fill today today_fill trash trash_fill tune tune_fill undo unlock unlock_fill up videocam videocam_fill videocam_round videocam_round_fill volume volume_fill volume_low volume_low_fill volume_mute volume_mute_fill world world_fill zoom_in zoom_out';
-  var mdIcons = '3d_rotation ac_unit access_alarm access_alarms access_time accessibility accessible account_balance account_balance_wallet account_box account_circle adb add add_a_photo add_alarm add_alert add_box add_circle add_circle_outline add_location add_shopping_cart add_to_photos add_to_queue adjust airline_seat_flat airline_seat_flat_angled airline_seat_individual_suite airline_seat_legroom_extra airline_seat_legroom_normal airline_seat_legroom_reduced airline_seat_recline_extra airline_seat_recline_normal airplanemode_active airplanemode_inactive airplay airport_shuttle alarm alarm_add alarm_off alarm_on album all_inclusive all_out android announcement apps archive arrow_back arrow_downward arrow_drop_down arrow_drop_down_circle arrow_drop_up arrow_forward arrow_upward art_track aspect_ratio assessment assignment assignment_ind assignment_late assignment_return assignment_returned assignment_turned_in assistant assistant_photo attach_file attach_money attachment audiotrack autorenew av_timer backspace backup battery_alert battery_charging_full battery_full battery_std battery_unknown beach_access beenhere block bluetooth bluetooth_audio bluetooth_connected bluetooth_disabled bluetooth_searching blur_circular blur_linear blur_off blur_on book bookmark bookmark_border border_all border_bottom border_clear border_color border_horizontal border_inner border_left border_outer border_right border_style border_top border_vertical branding_watermark brightness_1 brightness_2 brightness_3 brightness_4 brightness_5 brightness_6 brightness_7 brightness_auto brightness_high brightness_low brightness_medium broken_image brush bubble_chart bug_report build burst_mode business business_center cached cake call call_end call_made call_merge call_missed call_missed_outgoing call_received call_split call_to_action camera camera_alt camera_enhance camera_front camera_rear camera_roll cancel card_giftcard card_membership card_travel casino cast cast_connected center_focus_strong center_focus_weak change_history chat chat_bubble chat_bubble_outline check check_box check_box_outline_blank check_circle chevron_left chevron_right child_care child_friendly chrome_reader_mode class clear clear_all close closed_caption cloud cloud_circle cloud_done cloud_download cloud_off cloud_queue cloud_upload code collections collections_bookmark color_lens colorize comment compare compare_arrows computer confirmation_number contact_mail contact_phone contacts content_copy content_cut content_paste control_point control_point_duplicate copyright create create_new_folder credit_card crop crop_16_9 crop_3_2 crop_5_4 crop_7_5 crop_din crop_free crop_landscape crop_original crop_portrait crop_rotate crop_square dashboard data_usage date_range dehaze delete delete_forever delete_sweep description desktop_mac desktop_windows details developer_board developer_mode device_hub devices devices_other dialer_sip dialpad directions directions_bike directions_boat directions_bus directions_car directions_railway directions_run directions_subway directions_transit directions_walk disc_full dns do_not_disturb do_not_disturb_alt do_not_disturb_off do_not_disturb_on dock domain done done_all donut_large donut_small drafts drag_handle drive_eta dvr edit edit_location eject email enhanced_encryption equalizer error error_outline euro_symbol ev_station event event_available event_busy event_note event_seat exit_to_app expand_less expand_more explicit explore exposure exposure_neg_1 exposure_neg_2 exposure_plus_1 exposure_plus_2 exposure_zero extension face fast_forward fast_rewind favorite favorite_border featured_play_list featured_video feedback fiber_dvr fiber_manual_record fiber_new fiber_pin fiber_smart_record file_download file_upload filter filter_1 filter_2 filter_3 filter_4 filter_5 filter_6 filter_7 filter_8 filter_9 filter_9_plus filter_b_and_w filter_center_focus filter_drama filter_frames filter_hdr filter_list filter_none filter_tilt_shift filter_vintage find_in_page find_replace fingerprint first_page fitness_center flag flare flash_auto flash_off flash_on flight flight_land flight_takeoff flip flip_to_back flip_to_front folder folder_open folder_shared folder_special font_download format_align_center format_align_justify format_align_left format_align_right format_bold format_clear format_color_fill format_color_reset format_color_text format_indent_decrease format_indent_increase format_italic format_line_spacing format_list_bulleted format_list_numbered format_paint format_quote format_shapes format_size format_strikethrough format_textdirection_l_to_r format_textdirection_r_to_l format_underlined forum forward forward_10 forward_30 forward_5 free_breakfast fullscreen fullscreen_exit functions g_translate gamepad games gavel gesture get_app gif golf_course gps_fixed gps_not_fixed gps_off grade gradient grain graphic_eq grid_off grid_on group group_add group_work hd hdr_off hdr_on hdr_strong hdr_weak headset headset_mic healing hearing help help_outline high_quality highlight highlight_off history home hot_tub hotel hourglass_empty hourglass_full http https image image_aspect_ratio import_contacts import_export important_devices inbox indeterminate_check_box info info_outline input insert_chart insert_comment insert_drive_file insert_emoticon insert_invitation insert_link insert_photo invert_colors invert_colors_off iso keyboard keyboard_arrow_down keyboard_arrow_left keyboard_arrow_right keyboard_arrow_up keyboard_backspace keyboard_capslock keyboard_hide keyboard_return keyboard_tab keyboard_voice kitchen label label_outline landscape language laptop laptop_chromebook laptop_mac laptop_windows last_page launch layers layers_clear leak_add leak_remove lens library_add library_books library_music lightbulb_outline line_style line_weight linear_scale link linked_camera list live_help live_tv local_activity local_airport local_atm local_bar local_cafe local_car_wash local_convenience_store local_dining local_drink local_florist local_gas_station local_grocery_store local_hospital local_hotel local_laundry_service local_library local_mall local_movies local_offer local_parking local_pharmacy local_phone local_pizza local_play local_post_office local_printshop local_see local_shipping local_taxi location_city location_disabled location_off location_on location_searching lock lock_open lock_outline looks looks_3 looks_4 looks_5 looks_6 looks_one looks_two loop loupe low_priority loyalty mail mail_outline map markunread markunread_mailbox memory menu merge_type message mic mic_none mic_off mms mode_comment mode_edit monetization_on money_off monochrome_photos mood mood_bad more more_horiz more_vert motorcycle mouse move_to_inbox movie movie_creation movie_filter multiline_chart music_note music_video my_location nature nature_people navigate_before navigate_next navigation near_me network_cell network_check network_locked network_wifi new_releases next_week nfc no_encryption no_sim not_interested note note_add notifications notifications_active notifications_none notifications_off notifications_paused offline_pin ondemand_video opacity open_in_browser open_in_new open_with pages pageview palette pan_tool panorama panorama_fish_eye panorama_horizontal panorama_vertical panorama_wide_angle party_mode pause pause_circle_filled pause_circle_outline payment people people_outline perm_camera_mic perm_contact_calendar perm_data_setting perm_device_information perm_identity perm_media perm_phone_msg perm_scan_wifi person person_add person_outline person_pin person_pin_circle personal_video pets phone phone_android phone_bluetooth_speaker phone_forwarded phone_in_talk phone_iphone phone_locked phone_missed phone_paused phonelink phonelink_erase phonelink_lock phonelink_off phonelink_ring phonelink_setup photo photo_album photo_camera photo_filter photo_library photo_size_select_actual photo_size_select_large photo_size_select_small picture_as_pdf picture_in_picture picture_in_picture_alt pie_chart pie_chart_outlined pin_drop place play_arrow play_circle_filled play_circle_outline play_for_work playlist_add playlist_add_check playlist_play plus_one poll polymer pool portable_wifi_off portrait power power_input power_settings_new pregnant_woman present_to_all print priority_high public publish query_builder question_answer queue queue_music queue_play_next radio radio_button_checked radio_button_unchecked rate_review receipt recent_actors record_voice_over redeem redo refresh remove remove_circle remove_circle_outline remove_from_queue remove_red_eye remove_shopping_cart reorder repeat repeat_one replay replay_10 replay_30 replay_5 reply reply_all report report_problem restaurant restaurant_menu restore restore_page ring_volume room room_service rotate_90_degrees_ccw rotate_left rotate_right rounded_corner router rowing rss_feed rv_hookup satellite save scanner schedule school screen_lock_landscape screen_lock_portrait screen_lock_rotation screen_rotation screen_share sd_card sd_storage search security select_all send sentiment_dissatisfied sentiment_neutral sentiment_satisfied sentiment_very_dissatisfied sentiment_very_satisfied settings settings_applications settings_backup_restore settings_bluetooth settings_brightness settings_cell settings_ethernet settings_input_antenna settings_input_component settings_input_composite settings_input_hdmi settings_input_svideo settings_overscan settings_phone settings_power settings_remote settings_system_daydream settings_voice share shop shop_two shopping_basket shopping_cart short_text show_chart shuffle signal_cellular_4_bar signal_cellular_connected_no_internet_4_bar signal_cellular_no_sim signal_cellular_null signal_cellular_off signal_wifi_4_bar signal_wifi_4_bar_lock signal_wifi_off sim_card sim_card_alert skip_next skip_previous slideshow slow_motion_video smartphone smoke_free smoking_rooms sms sms_failed snooze sort sort_by_alpha spa space_bar speaker speaker_group speaker_notes speaker_notes_off speaker_phone spellcheck star star_border star_half stars stay_current_landscape stay_current_portrait stay_primary_landscape stay_primary_portrait stop stop_screen_share storage store store_mall_directory straighten streetview strikethrough_s style subdirectory_arrow_left subdirectory_arrow_right subject subscriptions subtitles subway supervisor_account surround_sound swap_calls swap_horiz swap_vert swap_vertical_circle switch_camera switch_video sync sync_disabled sync_problem system_update system_update_alt tab tab_unselected tablet tablet_android tablet_mac tag_faces tap_and_play terrain text_fields text_format textsms texture theaters thumb_down thumb_up thumbs_up_down time_to_leave timelapse timeline timer timer_10 timer_3 timer_off title toc today toll tonality touch_app toys track_changes traffic train tram transfer_within_a_station transform translate trending_down trending_flat trending_up tune turned_in turned_in_not tv unarchive undo unfold_less unfold_more update usb verified_user vertical_align_bottom vertical_align_center vertical_align_top vibration video_call video_label video_library videocam videocam_off videogame_asset view_agenda view_array view_carousel view_column view_comfy view_compact view_day view_headline view_list view_module view_quilt view_stream view_week vignette visibility visibility_off voice_chat voicemail volume_down volume_mute volume_off volume_up vpn_key vpn_lock wallpaper warning watch watch_later wb_auto wb_cloudy wb_incandescent wb_iridescent wb_sunny wc web web_asset weekend whatshot widgets wifi wifi_lock wifi_tethering work wrap_text youtube_searched_for zoom_in zoom_out zoom_out_map';
   export default {
     components: {
       f7Page,
       f7Navbar,
       f7BlockTitle,
+      f7Block,
+      f7Tab,
+      f7Row,
+      f7Col,
+      f7BlockHeader,
+      f7Segmented,
+      f7Button,
     },
     data() {
       return {
diff --git a/examples/kitchen-sink/pages/infinite-scroll.vue b/examples/kitchen-sink/pages/infinite-scroll.vue
index 6204a9f..b078d57 100644
--- a/examples/kitchen-sink/pages/infinite-scroll.vue
+++ b/examples/kitchen-sink/pages/infinite-scroll.vue
@@ -1,76 +1,52 @@
 <template>
-  <f7-page>
+  <f7-page infinite :infinite-distance="50" :infinite-preloader="showPreloader" @infinite="loadMore">
     <f7-navbar title="Infinite Scroll" back-link="Back"></f7-navbar>
-    <div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="loadMore">
-      <f7-block-title>Scroll bottom</f7-block-title>
-      <div class="list simple-list">
-        <ul>
-          <li>Item 1</li>
-          <li>Item 2</li>
-          <li>Item 3</li>
-          <li>Item 4</li>
-          <li>Item 5</li>
-          <li>Item 6</li>
-          <li>Item 7</li>
-          <li>Item 8</li>
-          <li>Item 9</li>
-          <li>Item 10</li>
-          <li>Item 11</li>
-          <li>Item 12</li>
-          <li>Item 13</li>
-          <li>Item 14</li>
-          <li>Item 15</li>
-          <li>Item 16</li>
-          <li>Item 17</li>
-          <li>Item 18</li>
-          <li>Item 19</li>
-          <li>Item 20</li>
-        </ul>
-      </div>
-      <div class="preloader infinite-scroll-preloader"></div>
-    </div>
+    <f7-block-title>Scroll bottom</f7-block-title>
+    <f7-list>
+      <f7-list-item v-for="(item, index) in items" :title="`Item ${item}`" :key="index"></f7-list-item>
+    </f7-list>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7List, f7ListItem } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
+      f7List,
+      f7ListItem,
     },
-    data: function () {
+    data() {
       return {
+        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
         allowInfinite: true,
         lastItem: 20,
-      }
+        showPreloader: true,
+      };
     },
     methods: {
-      loadMore: function () {
-        var self = this;
-        var $el = self.$$(self.$el);
+      loadMore() {
+        const self = this;
         if (!self.allowInfinite) return;
         self.allowInfinite = false;
 
-        setTimeout(function () {
-          if (self.lastItem >= 200) {
-            $el.find('.preloader').remove();
+        setTimeout(() => {
+          if (self.items.length >= 200) {
+            self.showPreloader = false;
             return;
           }
-          var html = '';
 
-          for (var i = 1; i <= 20; i++) {
-            html += '<li>Item ' + (self.lastItem + i) + '</li>';
-          }
-
-          $el.find('.list ul').append(html);
+          const itemsLength = self.items.length;
 
-          self.lastItem += 20;
+          for (let i = 1; i <= 20; i += 1) {
+            self.items.push(itemsLength + i);
+          }
 
           self.allowInfinite = true;
         }, 1000);
-      }
-    }
-  }
+      },
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/lazy-load.vue b/examples/kitchen-sink/pages/lazy-load.vue
index d2f8fac..eea3cd6 100644
--- a/examples/kitchen-sink/pages/lazy-load.vue
+++ b/examples/kitchen-sink/pages/lazy-load.vue
@@ -1,39 +1,45 @@
 <template>
-<f7-page>
-  <f7-navbar title="Lazy Load Images" back-link="Back"></f7-navbar>
-  <div class="block block-strong">
-    <p>Lazy Load delays loading of images on page while they are outside of viewport until user scrolls to them.</p>
-    <p>It will make the page load faster, improve scrolling performance and also save traffic.</p>
-  </div>
-  <div class="block block-strong">
-    <p> <img data-src="http://lorempixel.com/500/500/nature/1" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus viverra lectus sit amet lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque faucibus consectetur mauris eget lobortis. Maecenas efficitur efficitur mauris ac vehicula. Sed ut lectus laoreet, semper nisi vel, maximus massa. Duis at lorem vitae sem auctor condimentum a at neque. Phasellus vel scelerisque dui. Morbi varius nibh eu finibus rutrum.</p>
-    <p> <img data-src="http://lorempixel.com/500/500/nature/2" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
-    <p>Aenean id congue orci. Aliquam gravida nulla nec sollicitudin consectetur. Donec iaculis ipsum in purus tincidunt sagittis quis vehicula sapien. Vestibulum quis consectetur nibh. Pellentesque vehicula ligula sit amet commodo malesuada. Proin eget dolor sodales, egestas sapien sed, consectetur ante. Vivamus imperdiet porttitor condimentum. Aliquam sit amet tellus quis mauris dapibus convallis eu in nulla. Aliquam erat volutpat.</p>
-    <p> <img data-src="http://lorempixel.com/500/500/nature/3" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
-    <p>Pellentesque aliquam maximus libero a tincidunt. Nunc rhoncus tellus ac congue commodo. Aenean malesuada ante sit amet erat efficitur vehicula ac id ipsum. Suspendisse sed purus vel nisl rhoncus feugiat et ut ante. Mauris vehicula ligula sed nisl vulputate, nec ullamcorper quam vehicula. Etiam eu turpis eget sem luctus rutrum at porta nulla. Ut posuere lorem et nisi faucibus molestie.</p>
-    <p> <img data-src="http://lorempixel.com/500/500/nature/4" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
-    <p>Duis ullamcorper velit id enim rutrum, vel venenatis lacus laoreet. Sed id bibendum ligula, sed congue erat. Maecenas rhoncus posuere lorem ac consectetur. Duis accumsan, urna id pharetra tincidunt, libero nibh tincidunt enim, vestibulum suscipit turpis neque nec ante.</p>
-    <p> <img data-src="http://lorempixel.com/500/500/nature/5" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
-    <p>Suspendisse potenti. Curabitur et neque ac ante dapibus mollis tempor eget ex. Vivamus porttitor faucibus dui. Nulla eleifend hendrerit cursus. Sed elit nulla, pulvinar vitae diam eget, consectetur efficitur orci. Vivamus vel pharetra sapien. Suspendisse tortor tortor, iaculis at ullamcorper sit amet, vestibulum vel arcu. Aenean sed eleifend sapien. Praesent at varius metus.</p>
-    <p> <img data-src="http://lorempixel.com/500/500/nature/6" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus. Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
-    <p> <img data-src="http://lorempixel.com/500/500/nature/7" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
-    <p>Aenean id congue orci. Aliquam gravida nulla nec sollicitudin consectetur. Donec iaculis ipsum in purus tincidunt sagittis quis vehicula sapien. Vestibulum quis consectetur nibh. Pellentesque vehicula ligula sit amet commodo malesuada. Proin eget dolor sodales, egestas sapien sed, consectetur ante. Vivamus imperdiet porttitor condimentum. Aliquam sit amet tellus quis mauris dapibus convallis eu in nulla. Aliquam erat volutpat.</p>
-    <p> <img data-src="http://lorempixel.com/500/500/nature/8" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus viverra lectus sit amet lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque faucibus consectetur mauris eget lobortis. Maecenas efficitur efficitur mauris ac vehicula. Sed ut lectus laoreet, semper nisi vel, maximus massa. Duis at lorem vitae sem auctor condimentum a at neque. Phasellus vel scelerisque dui. Morbi varius nibh eu finibus rutrum.</p>
-    <p> <img data-src="http://lorempixel.com/500/500/people/1" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
-    <p>Pellentesque aliquam maximus libero a tincidunt. Nunc rhoncus tellus ac congue commodo. Aenean malesuada ante sit amet erat efficitur vehicula ac id ipsum. Suspendisse sed purus vel nisl rhoncus feugiat et ut ante. Mauris vehicula ligula sed nisl vulputate, nec ullamcorper quam vehicula. Etiam eu turpis eget sem luctus rutrum at porta nulla. Ut posuere lorem et nisi faucibus molestie.</p>
-    <p> <img data-src="http://lorempixel.com/500/500/nature/10" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
-    <p>Duis ullamcorper velit id enim rutrum, vel venenatis lacus laoreet. Sed id bibendum ligula, sed congue erat. Maecenas rhoncus posuere lorem ac consectetur. Duis accumsan, urna id pharetra tincidunt, libero nibh tincidunt enim, vestibulum suscipit turpis neque nec ante.</p>
-    <p><b>Using as background image:</b></p>
-    <div data-background="http://lorempixel.com/500/500/people/10" class="lazy lazy-fadeIn demo-lazy"></div>
-    <p>Suspendisse potenti. Curabitur et neque ac ante dapibus mollis tempor eget ex. Vivamus porttitor faucibus dui. Nulla eleifend hendrerit cursus. Sed elit nulla, pulvinar vitae diam eget, consectetur efficitur orci. Vivamus vel pharetra sapien. Suspendisse tortor tortor, iaculis at ullamcorper sit amet, vestibulum vel arcu. Aenean sed eleifend sapien. Praesent at varius metus.</p>
-  </div>
-</f7-page>
+  <f7-page>
+    <f7-navbar title="Lazy Load Images" back-link="Back"></f7-navbar>
+    <f7-block strong>
+      <p>Lazy Load delays loading of images on page while they are outside of viewport until user scrolls to them.</p>
+      <p>It will make the page load faster, improve scrolling performance and also save traffic.</p>
+    </f7-block>
+    <f7-block strong>
+      <p> <img data-src="http://lorempixel.com/500/500/nature/1" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus viverra lectus sit amet lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque faucibus consectetur mauris eget lobortis. Maecenas efficitur efficitur mauris ac vehicula. Sed ut lectus laoreet, semper nisi vel, maximus massa. Duis at lorem vitae sem auctor condimentum a at neque. Phasellus vel scelerisque dui. Morbi varius nibh eu finibus rutrum.</p>
+      <p> <img data-src="http://lorempixel.com/500/500/nature/2" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
+      <p>Aenean id congue orci. Aliquam gravida nulla nec sollicitudin consectetur. Donec iaculis ipsum in purus tincidunt sagittis quis vehicula sapien. Vestibulum quis consectetur nibh. Pellentesque vehicula ligula sit amet commodo malesuada. Proin eget dolor sodales, egestas sapien sed, consectetur ante. Vivamus imperdiet porttitor condimentum. Aliquam sit amet tellus quis mauris dapibus convallis eu in nulla. Aliquam erat volutpat.</p>
+      <p> <img data-src="http://lorempixel.com/500/500/nature/3" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
+      <p>Pellentesque aliquam maximus libero a tincidunt. Nunc rhoncus tellus ac congue commodo. Aenean malesuada ante sit amet erat efficitur vehicula ac id ipsum. Suspendisse sed purus vel nisl rhoncus feugiat et ut ante. Mauris vehicula ligula sed nisl vulputate, nec ullamcorper quam vehicula. Etiam eu turpis eget sem luctus rutrum at porta nulla. Ut posuere lorem et nisi faucibus molestie.</p>
+      <p> <img data-src="http://lorempixel.com/500/500/nature/4" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
+      <p>Duis ullamcorper velit id enim rutrum, vel venenatis lacus laoreet. Sed id bibendum ligula, sed congue erat. Maecenas rhoncus posuere lorem ac consectetur. Duis accumsan, urna id pharetra tincidunt, libero nibh tincidunt enim, vestibulum suscipit turpis neque nec ante.</p>
+      <p> <img data-src="http://lorempixel.com/500/500/nature/5" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
+      <p>Suspendisse potenti. Curabitur et neque ac ante dapibus mollis tempor eget ex. Vivamus porttitor faucibus dui. Nulla eleifend hendrerit cursus. Sed elit nulla, pulvinar vitae diam eget, consectetur efficitur orci. Vivamus vel pharetra sapien. Suspendisse tortor tortor, iaculis at ullamcorper sit amet, vestibulum vel arcu. Aenean sed eleifend sapien. Praesent at varius metus.</p>
+      <p> <img data-src="http://lorempixel.com/500/500/nature/6" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus. Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
+      <p> <img data-src="http://lorempixel.com/500/500/nature/7" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
+      <p>Aenean id congue orci. Aliquam gravida nulla nec sollicitudin consectetur. Donec iaculis ipsum in purus tincidunt sagittis quis vehicula sapien. Vestibulum quis consectetur nibh. Pellentesque vehicula ligula sit amet commodo malesuada. Proin eget dolor sodales, egestas sapien sed, consectetur ante. Vivamus imperdiet porttitor condimentum. Aliquam sit amet tellus quis mauris dapibus convallis eu in nulla. Aliquam erat volutpat.</p>
+      <p> <img data-src="http://lorempixel.com/500/500/nature/8" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus viverra lectus sit amet lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque faucibus consectetur mauris eget lobortis. Maecenas efficitur efficitur mauris ac vehicula. Sed ut lectus laoreet, semper nisi vel, maximus massa. Duis at lorem vitae sem auctor condimentum a at neque. Phasellus vel scelerisque dui. Morbi varius nibh eu finibus rutrum.</p>
+      <p> <img data-src="http://lorempixel.com/500/500/people/1" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
+      <p>Pellentesque aliquam maximus libero a tincidunt. Nunc rhoncus tellus ac congue commodo. Aenean malesuada ante sit amet erat efficitur vehicula ac id ipsum. Suspendisse sed purus vel nisl rhoncus feugiat et ut ante. Mauris vehicula ligula sed nisl vulputate, nec ullamcorper quam vehicula. Etiam eu turpis eget sem luctus rutrum at porta nulla. Ut posuere lorem et nisi faucibus molestie.</p>
+      <p> <img data-src="http://lorempixel.com/500/500/nature/10" width="1500" height="1500" class="lazy lazy-fadeIn demo-lazy"/></p>
+      <p>Duis ullamcorper velit id enim rutrum, vel venenatis lacus laoreet. Sed id bibendum ligula, sed congue erat. Maecenas rhoncus posuere lorem ac consectetur. Duis accumsan, urna id pharetra tincidunt, libero nibh tincidunt enim, vestibulum suscipit turpis neque nec ante.</p>
+      <p><b>Using as background image:</b></p>
+      <div data-background="http://lorempixel.com/500/500/people/10" class="lazy lazy-fadeIn demo-lazy"></div>
+      <p>Suspendisse potenti. Curabitur et neque ac ante dapibus mollis tempor eget ex. Vivamus porttitor faucibus dui. Nulla eleifend hendrerit cursus. Sed elit nulla, pulvinar vitae diam eget, consectetur efficitur orci. Vivamus vel pharetra sapien. Suspendisse tortor tortor, iaculis at ullamcorper sit amet, vestibulum vel arcu. Aenean sed eleifend sapien. Praesent at varius metus.</p>
+    </f7-block>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7Block,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/list.vue b/examples/kitchen-sink/pages/list.vue
index c9afc86..0caf712 100644
--- a/examples/kitchen-sink/pages/list.vue
+++ b/examples/kitchen-sink/pages/list.vue
@@ -1,614 +1,270 @@
 <template>
-<f7-page>
-  <f7-navbar title="List View" back-link="Back"></f7-navbar>
-  <div class="block">
-    <p>Framework7 allows you to be flexible with list views (table views). You can make them as navigation menus, you can use there icons, inputs, and any elements inside of the list, and even make them nested:</p>
-  </div>
-  <f7-block-title>Simple List</f7-block-title>
-  <div class="list simple-list">
-    <ul>
-      <li>Item 1</li>
-      <li>Item 2</li>
-      <li>Item 3</li>
-    </ul>
-  </div>
-  <f7-block-title>Simple Links List</f7-block-title>
-  <div class="list links-list">
-    <ul>
-      <li><a href="#">Link 1</a></li>
-      <li><a href="#">Link 2</a></li>
-      <li><a href="#">Link 3</a></li>
-    </ul>
-  </div>
-  <div class="block-title">Data list, with icons</div>
-  <div class="list">
-    <ul>
+  <f7-page>
+    <f7-navbar title="List View" back-link="Back"></f7-navbar>
+    <f7-block>
+      <p>Framework7 allows you to be flexible with list views (table views). You can make them as navigation menus, you can use there icons, inputs, and any elements inside of the list, and even make them nested:</p>
+    </f7-block>
+    <f7-block-title>Simple List</f7-block-title>
+    <f7-list>
+      <f7-list-item title="Item 1"></f7-list-item>
+      <f7-list-item title="Item 2"></f7-list-item>
+      <f7-list-item title="Item 3"></f7-list-item>
+    </f7-list>
+    <f7-block-title>Simple Links List</f7-block-title>
+    <f7-list>
+      <f7-list-item title="Link 1" link="#"></f7-list-item>
+      <f7-list-item title="Link 2" link="#"></f7-list-item>
+      <f7-list-item title="Link 3" link="#"></f7-list-item>
+    </f7-list>
+    <f7-block-title>Data list, with icons</f7-block-title>
+    <f7-list>
+      <f7-list-item title="Ivan Petrov" after="CEO">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item title="John Doe" badge="5">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item title="Jenna Smith">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+    </f7-list>
+    <f7-block-title>Links</f7-block-title>
+    <f7-list>
+      <f7-list-item link="#" title="Ivan Petrov" after="CEO">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="#" title="John Doe" after="Cleaner">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="#" title="Jenna Smith">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+    </f7-list>
+    <f7-block-title>Links, Header, Footer</f7-block-title>
+    <f7-list>
+      <f7-list-item link="#" header="Name" title="John Doe" after="Edit">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="#" header="Email" title="john@doe" footer="Home" after="Edit">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+    </f7-list>
+    <f7-block-title>Links, no icons</f7-block-title>
+    <f7-list>
+      <f7-list-item link="#" title="Ivan Petrov"></f7-list-item>
+      <f7-list-item link="#" title="John Doe"></f7-list-item>
+      <f7-list-item divider title="Divider Here"></f7-list-item>
+      <f7-list-item link="#" title="Ivan Petrov"></f7-list-item>
+      <f7-list-item link="#" title="Jenna Smith"></f7-list-item>
+    </f7-list>
+    <f7-block-title>Grouped with sticky titles</f7-block-title>
+    <f7-list>
+      <f7-list-group>
+        <f7-list-item title="A" group-title></f7-list-item>
+        <f7-list-item title="Aaron "></f7-list-item>
+        <f7-list-item title="Abbie"></f7-list-item>
+        <f7-list-item title="Adam"></f7-list-item>
+      </f7-list-group>
+      <f7-list-group>
+        <f7-list-item title="B" group-title></f7-list-item>
+        <f7-list-item title="Bailey"></f7-list-item>
+        <f7-list-item title="Barclay"></f7-list-item>
+        <f7-list-item title="Bartolo"></f7-list-item>
+      </f7-list-group>
+      <f7-list-group>
+        <f7-list-item title="C" group-title></f7-list-item>
+        <f7-list-item title="Caiden"></f7-list-item>
+        <f7-list-item title="Calvin"></f7-list-item>
+        <f7-list-item title="Candy"></f7-list-item>
+      </f7-list-group>
+    </f7-list>
+    <f7-block-title>Mixed and nested</f7-block-title>
+    <f7-list>
+      <f7-list-item link="#" title="Ivan Petrov" after="CEO">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="#" title="Two icons here">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item title="No icons here"></f7-list-item>
       <li>
-        <div class="item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Ivan Petrov</div>
-            <div class="item-after">CEO</div>
-          </div>
-        </div>
-      </li>
-      <li>
-        <div class="item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">John Doe</div>
-            <div class="item-after"> <span class="badge">5</span></div>
-          </div>
-        </div>
-      </li>
-      <li>
-        <div class="item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Jenna Smith</div>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
-  <f7-block-title>Links</f7-block-title>
-  <div class="list">
-    <ul>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Ivan Petrov</div>
-            <div class="item-after">CEO</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">John Doe</div>
-            <div class="item-after">Cleaner</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Jenna Smith</div>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </div>
-  <div class="block-title">Links, Header, Footer</div>
-  <div class="list">
-    <ul>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">
-              <div class="item-header">Name</div>
-              John Doe
-            </div>
-            <div class="item-after">Edit</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">
-              <div class="item-header">Phone</div>
-              +7 90 111-22-3344
-            </div>
-            <div class="item-after">Edit</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">
-              <div class="item-header">Email</div>
-              john@doe
-              <div class="item-footer">Home</div>
-            </div>
-            <div class="item-after">Edit</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">
-              <div class="item-header">Email</div>
-              john@framework7
-              <div class="item-footer">Work</div>
-            </div>
-            <div class="item-after">Edit</div>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </div>
-  <div class="block-title">Links, no icons</div>
-  <div class="list">
-    <ul>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-inner">
-            <div class="item-title">Ivan Petrov</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-inner">
-            <div class="item-title">John Doe</div>
-          </div>
-        </a>
-      </li>
-      <li class="item-divider">Divider Here</li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-inner">
-            <div class="item-title">Ivan Petrov</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-inner">
-            <div class="item-title">Jenna Smith</div>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </div>
-  <f7-block-title>Grouped with sticky titles</f7-block-title>
-  <div class="list">
-    <div class="list-group">
-      <ul>
-        <li class="list-group-title">A</li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Aaron </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Abbie</div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Adam</div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div class="list-group">
-      <ul>
-        <li class="list-group-title">B</li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Bailey</div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Barclay</div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Bartolo</div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div class="list-group">
-      <ul>
-        <li class="list-group-title">C</li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Caiden</div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Calvin</div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Candy</div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-  <f7-block-title>Mixed and nested</f7-block-title>
-  <div class="list">
-    <ul>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Ivan Petrov</div>
-            <div class="item-after">CEO</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Two icons here</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <div class="item-content">
-          <div class="item-inner">
-            <div class="item-title">No icons here</div>
-          </div>
-        </div>
         <ul>
-          <li>
-            <a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Ivan Petrov</div>
-                <div class="item-after">CEO</div>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Two icons here</div>
-              </div>
-            </a>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">No icons here</div>
-              </div>
-            </div>
-          </li>
-          <li>
-            <a href="#" class="item-link item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">Ultra long text goes here, no, it is really really long</div>
-              </div>
-            </a>
-          </li>
-          <li>
-            <div class="item-content">
-              <div class="item-media"><i class="icon icon-f7"></i></div>
-              <div class="item-inner">
-                <div class="item-title">With toggle</div>
-                <div class="item-after">
-                  <label class="toggle">
-                    <input type="checkbox">
-                    <span class="checkbox"></span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </li>
+          <f7-list-item link="#" title="Ivan Petrov" after="CEO">
+            <f7-icon slot="media" icon="icon-f7"></f7-icon>
+          </f7-list-item>
+          <f7-list-item link="#" title="Two icons here">
+            <f7-icon slot="media" icon="icon-f7"></f7-icon>
+            <f7-icon slot="media" icon="icon-f7"></f7-icon>
+          </f7-list-item>
+          <f7-list-item title="No icons here"></f7-list-item>
+          <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
+            <f7-icon slot="media" icon="icon-f7"></f7-icon>
+          </f7-list-item>
+          <f7-list-item title="With toggle">
+            <f7-icon slot="media" icon="icon-f7"></f7-icon>
+            <f7-toggle slot="after"></f7-toggle>
+          </f7-list-item>
         </ul>
       </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Ultra long text goes here, no, it is really really long</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <div class="item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">With toggle</div>
-            <div class="item-after">
-              <label class="toggle">
-                <input type="checkbox"/>
-                <div class="checkbox"></div>
-              </label>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
-  <div class="block-title">Mixed, inset</div>
-  <div class="list inset">
-    <ul>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Ivan Petrov</div>
-            <div class="item-after">CEO</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Two icons here</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Ultra long text goes here, no, it is really really long</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <div class="item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">With toggle</div>
-            <div class="item-after">
-              <label class="toggle">
-                <input type="checkbox"/>
-                <div class="checkbox"></div>
-              </label>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-    <div class="block-footer">
-      <p>Here comes some useful information about list above</p>
-    </div>
-  </div>
-  <f7-block-title>Tablet inset</f7-block-title>
-  <div class="list tablet-inset">
-    <ul>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Ivan Petrov</div>
-            <div class="item-after">CEO</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Two icons here</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><i class="icon icon-f7"></i></div>
-          <div class="item-inner">
-            <div class="item-title">Ultra long text goes here, no, it is really really long</div>
-          </div>
-        </a>
-      </li>
-    </ul>
-    <div class="block-footer">
-      <p>This list block will look like "inset" only on tablets (iPad)</p>
-    </div>
-  </div>
+      <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item title="With toggle">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-toggle slot="after"></f7-toggle>
+      </f7-list-item>
+    </f7-list>
+    <f7-block-title>Mixed, inset</f7-block-title>
+    <f7-list>
+      <f7-list-item link="#" title="Ivan Petrov" after="CEO">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="#" title="Two icons here">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item title="With toggle">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-toggle slot="after"></f7-toggle>
+      </f7-list-item>
+      <f7-block-footer>
+        <p>Here comes some useful information about list above</p>
+      </f7-block-footer>
+    </f7-list>
+    <f7-block-title>Tablet inset</f7-block-title>
+    <f7-list tablet-inset>
+      <f7-list-item link="#" title="Ivan Petrov" after="CEO">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="#" title="Two icons here">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+      <f7-block-footer>
+        <p>This list block will look like "inset" only on tablets (iPad)</p>
+      </f7-block-footer>
+    </f7-list>
 
-  <f7-block-title>Media Lists</f7-block-title>
-  <div class="block">
-    <p>Media Lists are almost the same as Data Lists, but with a more flexible layout for visualization of more complex data, like products, services, userc, etc.</p>
-  </div>
-  <f7-block-title>Songs</f7-block-title>
-  <div class="list media-list">
-    <ul>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><img src="http://lorempixel.com/160/160/people/1" width="80"/></div>
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Yellow Submarine</div>
-              <div class="item-after">$15</div>
-            </div>
-            <div class="item-subtitle">Beatles</div>
-            <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
-          </div></a></li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><img src="http://lorempixel.com/160/160/people/2" width="80"/></div>
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Don't Stop Me Now</div>
-              <div class="item-after">$22</div>
-            </div>
-            <div class="item-subtitle">Queen</div>
-            <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><img src="http://lorempixel.com/160/160/people/3" width="80"/></div>
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Billie Jean</div>
-              <div class="item-after">$16</div>
-            </div>
-            <div class="item-subtitle">Michael Jackson</div>
-            <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </div>
-  <f7-block-title>Mail App</f7-block-title>
-  <div class="list media-list">
-    <ul>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Facebook</div>
-              <div class="item-after">17:14</div>
-            </div>
-            <div class="item-subtitle">New messages from John Doe</div>
-            <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">John Doe (via Twitter)</div>
-              <div class="item-after">17:11</div>
-            </div>
-            <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
-            <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Facebook</div>
-              <div class="item-after">16:48</div>
-            </div>
-            <div class="item-subtitle">New messages from John Doe</div>
-            <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">John Doe (via Twitter)</div>
-              <div class="item-after">15:32</div>
-            </div>
-            <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
-            <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </div>
-  <f7-block-title>Something more simple</f7-block-title>
-  <div class="list media-list">
-    <ul>
-      <li>
-        <div class="item-content">
-          <div class="item-media"><img src="http://lorempixel.com/88/88/fashion/1" width="44"/></div>
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Yellow Submarine</div>
-            </div>
-            <div class="item-subtitle">Beatles</div>
-          </div>
-        </div>
-      </li>
-      <li><a href="#" class="item-link item-content">
-          <div class="item-media"><img src="http://lorempixel.com/88/88/fashion/2" width="44"/></div>
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Don't Stop Me Now</div>
-            </div>
-            <div class="item-subtitle">Queen</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <div class="item-content">
-          <div class="item-media"><img src="http://lorempixel.com/88/88/fashion/3" width="44"/></div>
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Billie Jean</div>
-            </div>
-            <div class="item-subtitle">Michael Jackson</div>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
-  <f7-block-title>Inset</f7-block-title>
-  <div class="list media-list inset">
-    <ul>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><img src="http://lorempixel.com/88/88/fashion/4" width="44"/></div>
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Yellow Submarine</div>
-            </div>
-            <div class="item-subtitle">Beatles</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><img src="http://lorempixel.com/88/88/fashion/5" width="44"/></div>
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Don't Stop Me Now</div>
-            </div>
-            <div class="item-subtitle">Queen</div>
-          </div>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="item-link item-content">
-          <div class="item-media"><img src="http://lorempixel.com/88/88/fashion/6" width="44"/></div>
-          <div class="item-inner">
-            <div class="item-title-row">
-              <div class="item-title">Billie Jean</div>
-            </div>
-            <div class="item-subtitle">Michael Jackson</div>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </div>
-  <div class="block-title">Custom Table-like Layout</div>
-  <div class="list">
-    <ul>
+    <f7-block-title>Media Lists</f7-block-title>
+    <f7-block>
+      <p>Media Lists are almost the same as Data Lists, but with a more flexible layout for visualization of more complex data, like products, services, userc, etc.</p>
+    </f7-block>
+    <f7-block-title>Songs</f7-block-title>
+    <f7-list media-list>
+      <f7-list-item
+        link="#"
+        title="Yellow Submarine"
+        after="$15"
+        subtitle="Beatles"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      >
+        <img slot="media" src="http://lorempixel.com/160/160/people/1" width="80" />
+      </f7-list-item>
+      <f7-list-item
+        link="#"
+        title="Don't Stop Me Now"
+        after="$22"
+        subtitle="Queen"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      >
+        <img slot="media" src="http://lorempixel.com/160/160/people/2" width="80" />
+      </f7-list-item>
+      <f7-list-item
+        link="#"
+        title="Billie Jean"
+        after="$16"
+        subtitle="Michael Jackson"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      >
+        <img slot="media" src="http://lorempixel.com/160/160/people/3" width="80" />
+      </f7-list-item>
+    </f7-list>
+    <f7-block-title>Mail App</f7-block-title>
+    <f7-list media-list>
+      <f7-list-item
+        link="#"
+        title="Facebook"
+        after="17:14"
+        subtitle="New messages from John Doe"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      ></f7-list-item>
+      <f7-list-item
+        link="#"
+        title="John Doe (via Twitter)"
+        after="17:11"
+        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      ></f7-list-item>
+      <f7-list-item
+        link="#"
+        title="Facebook"
+        after="16:48"
+        subtitle="New messages from John Doe"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      ></f7-list-item>
+      <f7-list-item
+        link="#"
+        title="John Doe (via Twitter)"
+        after="15:32"
+        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      ></f7-list-item>
+    </f7-list>
+    <f7-block-title>Something more simple</f7-block-title>
+    <f7-list media-list>
+      <f7-list-item
+        title="Yellow Submarine"
+        subtitle="Beatles">
+        <img slot="media" src="http://lorempixel.com/88/88/fashion/1" width="44" />
+      </f7-list-item>
+      <f7-list-item
+        link="#"
+        title="Don't Stop Me Now"
+        subtitle="Queen">
+        <img slot="media" src="http://lorempixel.com/88/88/fashion/2" width="44" />
+      </f7-list-item>
+      <f7-list-item
+        title="Billie Jean"
+        subtitle="Michael Jackson">
+        <img slot="media" src="http://lorempixel.com/88/88/fashion/3" width="44" />
+      </f7-list-item>
+    </f7-list>
+    <f7-block-title>Inset</f7-block-title>
+    <f7-list media-list inset>
+      <f7-list-item
+        link="#"
+        title="Yellow Submarine"
+        subtitle="Beatles">
+        <img slot="media" src="http://lorempixel.com/88/88/fashion/4" width="44" />
+      </f7-list-item>
+      <f7-list-item
+        link="#"
+        title="Don't Stop Me Now"
+        subtitle="Queen">
+        <img slot="media" src="http://lorempixel.com/88/88/fashion/5" width="44" />
+      </f7-list-item>
+      <f7-list-item
+        link="#"
+        title="Billie Jean"
+        subtitle="Michael Jackson">
+        <img slot="media" src="http://lorempixel.com/88/88/fashion/6" width="44" />
+      </f7-list-item>
+    </f7-list>
+    <f7-block-title>Custom Table-like Layout</f7-block-title>
+    <f7-list>
       <li>
         <a href="#" class="item-link item-content">
           <div class="item-inner item-cell">
@@ -661,18 +317,26 @@
           </div>
         </a>
       </li>
-    </ul>
-  </div>
-</f7-page>
+    </f7-list>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7List, f7ListItem, f7ListGroup, f7ListItemCell, f7ListItemRow, f7BlockFooter, f7Icon, f7Toggle } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
-    }
-  }
+      f7Block,
+      f7List,
+      f7ListItem,
+      f7ListGroup,
+      f7ListItemCell,
+      f7ListItemRow,
+      f7BlockFooter,
+      f7Icon,
+      f7Toggle,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/login-screen-page.vue b/examples/kitchen-sink/pages/login-screen-page.vue
index 6b4309e..c0bec45 100644
--- a/examples/kitchen-sink/pages/login-screen-page.vue
+++ b/examples/kitchen-sink/pages/login-screen-page.vue
@@ -1,55 +1,51 @@
 <template>
-  <f7-page no-toolbar no-navbar no-swipeback>
-    <div class="page-content login-screen-content">
-      <div class="login-screen-title">Framework7</div>
-      <form>
-        <div class="list">
-          <ul>
-            <li class="item-content item-input item-input-with-value">
-              <div class="item-inner">
-                <div class="item-title item-label">Username</div>
-                <div class="item-input-wrap">
-                  <input type="text" placeholder="Your username" id="demo-username-2" class="input-with-value">
-                  <span class="input-clear-button"></span>
-                </div>
-              </div>
-            </li>
-            <li class="item-content item-input">
-              <div class="item-inner">
-                <div class="item-title item-label">Password</div>
-                <div class="item-input-wrap">
-                  <input type="password" placeholder="Your password" id="demo-password-2" class="">
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div class="list">
-          <ul>
-            <li><a href="#" class="item-link list-button" @click="signIn">Sign In</a></li>
-          </ul>
-          <div class="block-footer">Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
-        </div>
-      </form>
-    </div>
+  <f7-page no-toolbar no-navbar no-swipeback login-screen>
+    <f7-login-screen-title>Framework7</f7-login-screen-title>
+    <f7-list form>
+      <f7-list-item>
+        <f7-label>Username</f7-label>
+        <f7-input type="text" placeholder="Your username" @input="username = $event.target.value"></f7-input>
+      </f7-list-item>
+      <f7-list-item>
+        <f7-label>Password</f7-label>
+        <f7-input type="password" placeholder="Your password" @input="password = $event.target.value"></f7-input>
+      </f7-list-item>
+    </f7-list>
+    <f7-list>
+      <f7-list-button @click="signIn">Sign In</f7-list-button>
+      <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
+    </f7-list>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Page, f7LoginScreenTitle, f7List, f7ListItem, f7Label, f7Input, f7ListButton, f7BlockFooter } from 'framework7-vue';
 
   export default {
+    components: {
+      f7Page,
+      f7LoginScreenTitle,
+      f7List,
+      f7ListItem,
+      f7Label,
+      f7Input,
+      f7ListButton,
+      f7BlockFooter,
+    },
+    data() {
+      return {
+        username: '',
+        password: '',
+      };
+    },
     methods: {
-      signIn: function () {
-        var $ = this.$;
-        var app = this.$f7;
-        var router = this.$router;
-        var username = $('input#demo-username-2').val();
-        var password = $('input#demo-password-2').val();
-        app.dialog.alert('Username: ' + username + '<br>Password: ' + password, function () {
-          app.loginScreen.close();
+      signIn() {
+        const self = this;
+        const app = self.$f7;
+        const router = self.$f7router;
+        app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
           router.back();
-        })
-      }
-    }
-  }
+        });
+      },
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/login-screen.vue b/examples/kitchen-sink/pages/login-screen.vue
index 1afe6ca..d272b20 100644
--- a/examples/kitchen-sink/pages/login-screen.vue
+++ b/examples/kitchen-sink/pages/login-screen.vue
@@ -1,72 +1,78 @@
 <template>
   <f7-page>
     <f7-navbar title="Login Screen" back-link="Back"></f7-navbar>
-    <div class="block">
+    <f7-block>
       <p>Framework7 comes with ready to use Login Screen layout. It could be used inside of page or inside of popup (Embedded) or as a standalone overlay:</p>
-    </div>
-    <div class="list links-list">
-      <ul>
-        <li>
-          <a href="/login-screen-page/">As Separate Page</a>
-        </li>
-      </ul>
-    </div>
-    <div class="block">
-      <a href="#" class="button button-raised button-big button-fill login-screen-open" data-login-screen=".login-screen">As Overlay</a>
-    </div>
-    <div class="login-screen">
-      <f7-page>
-        <div class="page-content login-screen-content">
-          <div class="login-screen-title">Framework7</div>
-          <form>
-            <div class="list">
-              <ul>
-                <li class="item-content item-input">
-                  <div class="item-inner">
-                    <div class="item-title item-label">Username</div>
-                    <div class="item-input-wrap">
-                      <input type="text" name="username" id="demo-username-1" placeholder="Your username">
-                      <span class="input-clear-button"></span>
-                    </div>
-                  </div>
-                </li>
-                <li class="item-content item-input">
-                  <div class="item-inner">
-                    <div class="item-title item-label">Password</div>
-                    <div class="item-input-wrap">
-                      <input type="password" name="password" id="demo-password-1" placeholder="Your password">
-                      <span class="input-clear-button"></span>
-                    </div>
-                  </div>
-                </li>
-              </ul>
-            </div>
-            <div class="list">
-              <ul>
-                <li><a href="#" class="item-link list-button" @click="signIn">Sign In</a></li>
-              </ul>
-              <div class="block-footer">Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
-            </div>
-          </form>
-        </div>
+    </f7-block>
+
+    <f7-list>
+      <f7-list-item link="/login-screen-page/" title="As Separate Page"></f7-list-item>
+    </f7-list>
+
+    <f7-block>
+      <f7-button raised big fill login-screen-open=".demo-login-screen">As Overlay</f7-button>
+    </f7-block>
+
+    <f7-block>
+      <f7-button raised big fill @click="loginScreenOpened = true">Open Via Prop Change</f7-button>
+    </f7-block>
+
+    <f7-login-screen class="demo-login-screen" :opened="loginScreenOpened" @loginscreen:closed="loginScreenOpened = false">
+      <f7-page login-screen>
+        <f7-login-screen-title>Framework7</f7-login-screen-title>
+        <f7-list form>
+          <f7-list-item>
+            <f7-label>Username</f7-label>
+            <f7-input type="text" placeholder="Your username" @input="username = $event.target.value"></f7-input>
+          </f7-list-item>
+          <f7-list-item>
+            <f7-label>Password</f7-label>
+            <f7-input type="password" placeholder="Your password" @input="password = $event.target.value"></f7-input>
+          </f7-list-item>
+        </f7-list>
+        <f7-list>
+          <f7-list-button @click="signIn">Sign In</f7-list-button>
+          <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
+        </f7-list>
       </f7-page>
-    </div>
+    </f7-login-screen>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Link, f7LoginScreen, f7Input, f7List, f7ListItem, f7Block, f7Button, f7LoginScreenTitle, f7BlockFooter, f7Label, f7ListButton } from 'framework7-vue';
 
   export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7Link,
+      f7LoginScreen,
+      f7Input,
+      f7List,
+      f7ListItem,
+      f7Block,
+      f7Button,
+      f7LoginScreenTitle,
+      f7BlockFooter,
+      f7Label,
+      f7ListButton,
+    },
+    data() {
+      return {
+        loginScreenOpened: false,
+        username: '',
+        password: '',
+      };
+    },
     methods: {
-      signIn: function () {
-        var $ = this.$;
-        var app = this.$f7;
-        var username = $('input#demo-username-1').val();
-        var password = $('input#demo-password-1').val();
-        app.dialog.alert('Username: ' + username + '<br>Password: ' + password, function () {
+      signIn() {
+        const self = this;
+        const app = self.$f7;
+
+        app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
           app.loginScreen.close();
-        })
-      }
-    }
-  }
+        });
+      },
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/navbar-hide-scroll.vue b/examples/kitchen-sink/pages/navbar-hide-scroll.vue
index 0ed16fe..49735bf 100644
--- a/examples/kitchen-sink/pages/navbar-hide-scroll.vue
+++ b/examples/kitchen-sink/pages/navbar-hide-scroll.vue
@@ -1,11 +1,10 @@
 <template>
-<f7-page>
-  <f7-navbar title="Hide Navbar On Scroll" back-link="Back"></f7-navbar>
-  <div class="page-content hide-navbar-on-scroll">
-    <div class="block block-strong">
+  <f7-page hide-navbar-on-scroll>
+    <f7-navbar title="Hide Navbar On Scroll" back-link="Back"></f7-navbar>
+    <f7-block strong>
       <p>Navbar will be hidden if you scroll bottom</p>
-    </div>
-    <div class="block">
+    </f7-block>
+    <f7-block>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos maxime incidunt id ab culpa ipsa omnis eos, vel excepturi officiis neque illum perferendis dolorum magnam rerum natus dolore nulla ex.</p>
       <p>Eum dolore, amet enim quaerat omnis. Modi minus voluptatum quam veritatis assumenda, eligendi minima dolore in autem delectus sequi accusantium? Cupiditate praesentium autem eius, esse ratione consequuntur dolor minus error.</p>
       <p>Repellendus ipsa sint quisquam delectus dolore quidem odio, praesentium, sequi temporibus amet architecto? Commodi molestiae, in repellat fugit! Laudantium, fuga quia officiis error. Provident inventore iusto quas iure, expedita optio.</p>
@@ -36,12 +35,17 @@
       <p>Aperiam velit sed sit quaerat, expedita tempore aspernatur iusto nobis ipsam error ut sapiente delectus in minima recusandae dolore alias, cumque labore. Doloribus veritatis magni nisi odio voluptatum perferendis placeat!</p>
       <p>Eaque laboriosam iusto corporis iure nemo ab deleniti ut facere laborum, blanditiis neque nihil dignissimos fuga praesentium illo facilis eos beatae accusamus cumque molestiae asperiores cupiditate? Provident laborum officiis suscipit!</p>
       <p>Exercitationem odio nulla rerum soluta aspernatur fugit, illo iusto ullam similique. Recusandae consectetur rem, odio autem voluptate similique atque, alias possimus quis vitae in, officiis labore deserunt aspernatur rerum sunt?</p>
-    </div>
-  </div>
-</f7-page>
+    </f7-block>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7Block,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/navbar.vue b/examples/kitchen-sink/pages/navbar.vue
index 492961b..3611139 100644
--- a/examples/kitchen-sink/pages/navbar.vue
+++ b/examples/kitchen-sink/pages/navbar.vue
@@ -1,34 +1,31 @@
 <template>
-<f7-page>
-  <div class="navbar">
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a href="#" class="link back">
-          <i class="icon icon-back"></i>
-          <span class="ios-only">Back</span>
-        </a>
-      </div>
-      <div class="title">Navbar<span class="subtitle">Subtitle</span></div>
-      <div class="right">
-        <a class="link">Right</a>
-      </div>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="block">
+  <f7-page>
+    <f7-navbar title="Navbar" subtitle="Subtitle" back-link="Back">
+      <f7-nav-right>
+        <f7-link>Right</f7-link>
+      </f7-nav-right>
+    </f7-navbar>
+    <f7-block>
       <p>Navbar is a fixed (with Fixed and Through layout types) area at the top of a screen that contains Page title and navigation elements.</p>
       <p>Navbar has 3 main parts: Left, Title and Right. Each part may contain any HTML content.</p>
-    </div>
-    <div class="list links-list">
-      <ul>
-        <li><a href="/navbar-hide-scroll/">Hide Navbar On Scroll</a></li>
-      </ul>
-    </div>
-  </div>
-</f7-page>
+    </f7-block>
+    <f7-list>
+      <f7-list-item link="/navbar-hide-scroll/" title="Hide Navbar On Scroll"></f7-list-item>
+    </f7-list>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7List, f7ListItem, f7NavRight, f7Link } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7Block,
+      f7List,
+      f7ListItem,
+      f7NavRight,
+      f7Link,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/photo-browser.vue b/examples/kitchen-sink/pages/photo-browser.vue
index 49e01f2..7ffa3d5 100644
--- a/examples/kitchen-sink/pages/photo-browser.vue
+++ b/examples/kitchen-sink/pages/photo-browser.vue
@@ -1,7 +1,7 @@
 <template>
   <f7-page>
     <f7-navbar title="Photo Browser" back-link="Back"></f7-navbar>
-    <div class="block">
+    <f7-block>
       <p>Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features:</p>
       <ul>
         <li>Swiper between photos</li>
@@ -9,117 +9,75 @@
         <li>Toggle zoom by double tap on photo</li>
         <li>Single click on photo to toggle Exposition mode</li>
       </ul>
-    </div>
-    <div class="block">
+    </f7-block>
+    <f7-block>
       <p>Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and as separate Page:</p>
-      <div class="row">
-        <div class="col-33"><a href="#" class="button button-raised" @click="openStandalone">Standalone</a></div>
-        <div class="col-33"><a href="#" class="button button-raised" @click="openPopup">Popup</a></div>
-        <div class="col-33"><a href="#" class="button button-raised" @click="openPage">Page</a></div>
-      </div>
-    </div>
-    <div class="block">
+      <f7-row>
+        <f7-col>
+          <f7-photo-browser :photos="photos" ref="standalone"></f7-photo-browser>
+          <f7-button raised @click="$refs.standalone.f7PhotoBrowser.open()">Standalone</f7-button>
+        </f7-col>
+        <f7-col>
+          <f7-photo-browser :photos="photos" type="popup" ref="popup"></f7-photo-browser>
+          <f7-button raised @click="$refs.popup.f7PhotoBrowser.open()">Popup</f7-button>
+        </f7-col>
+        <f7-col>
+          <f7-photo-browser :photos="photos" type="page" back-link-text="Back" ref="page"></f7-photo-browser>
+          <f7-button raised @click="$refs.page.f7PhotoBrowser.open()">Page</f7-button>
+        </f7-col>
+      </f7-row>
+    </f7-block>
+    <f7-block>
       <p>Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
-      <div class="row">
-        <div class="col-33"><a href="#" class="button button-raised" @click="openStandaloneDark">Standalone</a></div>
-        <div class="col-33"><a href="#" class="button button-raised" @click="openPopupDark">Popup</a></div>
-        <div class="col-33"><a href="#" class="button button-raised" @click="openPageDark">Page</a></div>
-      </div>
-    </div>
+      <f7-row>
+        <f7-col>
+          <f7-photo-browser :photos="photos" theme="dark" ref="standaloneDark"></f7-photo-browser>
+          <f7-button raised @click="$refs.standaloneDark.f7PhotoBrowser.open()">Standalone</f7-button>
+        </f7-col>
+        <f7-col>
+          <f7-photo-browser :photos="photos" theme="dark" type="popup" ref="popupDark"></f7-photo-browser>
+          <f7-button raised @click="$refs.popupDark.f7PhotoBrowser.open()">Popup</f7-button>
+        </f7-col>
+        <f7-col>
+          <f7-photo-browser :photos="photos" theme="dark" type="page" back-link-text="Back" ref="pageDark"></f7-photo-browser>
+          <f7-button raised @click="$refs.pageDark.f7PhotoBrowser.open()">Page</f7-button>
+        </f7-col>
+      </f7-row>
+    </f7-block>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7PhotoBrowser, f7Block, f7Row, f7Col, f7Button } from 'framework7-vue';
 
   export default {
-    data: function () {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7PhotoBrowser,
+      f7Block,
+      f7Row,
+      f7Col,
+      f7Button,
+    },
+    data() {
       return {
         photos: [
           {
             url: 'img/beach.jpg',
-            caption: 'Amazing beach in Goa, India'
+            caption: 'Amazing beach in Goa, India',
           },
           'http://placekitten.com/1024/1024',
           'img/lock.jpg',
           {
             url: 'img/monkey.jpg',
-            caption: 'I met this monkey in Chinese mountains'
+            caption: 'I met this monkey in Chinese mountains',
           },
           {
             url: 'img/mountains.jpg',
-            caption: 'Beautiful mountains in Zhangjiajie, China'
-          }
+            caption: 'Beautiful mountains in Zhangjiajie, China',
+          },
         ],
-      }
-    },
-    methods: {
-      openStandalone: function () {
-        const self = this;
-        self.standalone.open();
-      },
-      openPopup: function () {
-        const self = this;
-        self.popup.open();
-      },
-      openPage: function () {
-        const self = this;
-        self.page.open();
-      },
-      openStandaloneDark: function () {
-        const self = this;
-        self.standaloneDark.open();
-      },
-      openPopupDark: function () {
-        const self = this;
-        self.popupDark.open();
-      },
-      openPageDark: function () {
-        const self = this;
-        self.pageDark.open();
-      },
-    },
-    on: {
-      pageInit: function () {
-        const self = this;
-        // Create PBs when page init
-        self.standalone = self.$f7.photoBrowser.create({
-          photos: self.photos,
-        });
-        self.popup = self.$f7.photoBrowser.create({
-          photos: self.photos,
-          type: 'popup',
-        });
-        self.page = self.$f7.photoBrowser.create({
-          photos: self.photos,
-          type: 'page',
-          backLinkText: 'Back',
-        });
-        self.standaloneDark = self.$f7.photoBrowser.create({
-          photos: self.photos,
-          theme: 'dark',
-        });
-        self.popupDark = self.$f7.photoBrowser.create({
-          photos: self.photos,
-          type: 'popup',
-          theme: 'dark',
-        });
-        self.pageDark = self.$f7.photoBrowser.create({
-          photos: self.photos,
-          type: 'page',
-          backLinkText: 'Back',
-          theme: 'dark',
-        });
-      },
-      pageBeforeRemove: function () {
-        const self = this;
-        // Destroy PBs on page remove
-        self.standalone.destroy();
-        self.popup.destroy();
-        self.page.destroy();
-        self.standaloneDark.destroy();
-        self.popupDark.destroy();
-        self.pageDark.destroy();
-      },
-    }
+      };
+  },
   };
 </script>
diff --git a/examples/kitchen-sink/pages/picker.vue b/examples/kitchen-sink/pages/picker.vue
new file mode 100644
index 0000000..e859876
--- /dev/null
+++ b/examples/kitchen-sink/pages/picker.vue
@@ -0,0 +1,279 @@
+<template>
+  <f7-page :page-content="false">
+    <f7-navbar title="Picker" back-link="Back"></f7-navbar>
+    <div class="page-content">
+      <div class="block">
+        <p>Picker is a powerful component that allows you to create custom overlay pickers which looks like native picker.</p>
+        <p>Picker could be used as inline component or as overlay. Overlay Picker will be automatically converted to Popover on tablets (iPad).</p>
+      </div>
+      <div class="block-title">Picker with single value</div>
+      <div class="list no-hairlines-md">
+        <ul>
+          <li>
+            <div class="item-content item-input">
+              <div class="item-inner">
+                <div class="item-input-wrap">
+                  <input type="text" placeholder="Your iOS device" readonly="readonly" id="demo-picker-device"/>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="block-title">2 values and 3d-rotate effect</div>
+      <div class="list no-hairlines-md">
+        <ul>
+          <li>
+            <div class="item-content item-input">
+              <div class="item-inner">
+                <div class="item-input-wrap">
+                  <input type="text" placeholder="Describe yourself" readonly="readonly" id="demo-picker-describe"/>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="block-title">Dependent values</div>
+      <div class="list no-hairlines-md">
+        <ul>
+          <li>
+            <div class="item-content item-input">
+              <div class="item-inner">
+                <div class="item-input-wrap">
+                  <input type="text" placeholder="Your car" readonly="readonly" id="demo-picker-dependent"/>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="block-title">Custom toolbar</div>
+      <div class="list no-hairlines-md">
+        <ul>
+          <li>
+            <div class="item-content item-input">
+              <div class="item-inner">
+                <div class="item-input-wrap">
+                  <input type="text" placeholder="Describe yourself" readonly="readonly" id="demo-picker-custom-toolbar"/>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="block-title">Inline Picker / Date-time</div>
+      <div class="list no-margin">
+        <ul>
+          <li>
+            <div class="item-content item-input">
+              <div class="item-inner">
+                <div class="item-input-wrap">
+                  <input type="text" placeholder="Date Time" readonly="readonly" id="demo-picker-date"/>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="block block-strong no-padding no-margin margin-bottom">
+        <div id="demo-picker-date-container"></div>
+      </div>
+    </div>
+  </f7-page>
+</template>
+<script>
+  import { f7Navbar, f7Page } from 'framework7-vue';
+
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+    on: {
+      pageInit(e) {
+        const self = this;
+        const today = new Date();
+        const app = self.$f7;
+        // iOS Device picker
+        self.pickerDevice = app.picker.create({
+          inputEl: '#demo-picker-device',
+          cols: [
+            {
+              textAlign: 'center',
+              values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3'],
+            },
+          ],
+        });
+
+        // Describe yourself picker
+        self.pickerDescribe = app.picker.create({
+          inputEl: '#demo-picker-describe',
+          rotateEffect: true,
+          cols: [
+            {
+              textAlign: 'left',
+              values: ('Super Amazing Bat Iron Rocket Lex Beautiful Wonderful Raining Happy Funny Cool Hot').split(' '),
+            },
+            {
+              values: ('Man Luthor Woman Boy Girl Person Cutie Babe Raccoon').split(' '),
+            },
+          ],
+        });
+
+        // Dependent values
+        const carVendors = {
+          Japanese: ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
+          German: ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
+          American: ['Cadillac', 'Chrysler', 'Dodge', 'Ford'],
+        };
+        self.pickerDependent = app.picker.create({
+          inputEl: '#demo-picker-dependent',
+          rotateEffect: true,
+          formatValue(values) {
+            return values[1];
+          },
+          cols: [
+            {
+              textAlign: 'left',
+              values: ['Japanese', 'German', 'American'],
+              onChange(picker, country) {
+                if (picker.cols[1].replaceValues) {
+                  picker.cols[1].replaceValues(carVendors[country]);
+                }
+              },
+            },
+            {
+              values: carVendors.Japanese,
+              width: 160,
+            },
+          ],
+        });
+
+        // Custom Toolbar
+        self.pickerCustomToolbar = app.picker.create({
+          inputEl: '#demo-picker-custom-toolbar',
+          rotateEffect: true,
+          renderToolbar() {
+            return '<div class="toolbar">' +
+          '<div class="toolbar-inner">' +
+            '<div class="left">' +
+              '<a href="#" class="link toolbar-randomize-link">Randomize</a>' +
+            '</div>' +
+            '<div class="right">' +
+              '<a href="#" class="link sheet-close popover-close">That\'s me</a>' +
+            '</div>' +
+          '</div>' +
+        '</div>';
+          },
+          cols: [
+            {
+              values: ['Mr', 'Ms'],
+            },
+            {
+              textAlign: 'left',
+              values: ('Super Amazing Bat Iron Rocket Lex Beautiful Wonderful Raining Happy Funny Cool Hot').split(' '),
+            },
+            {
+              values: ('Man Luthor Woman Boy Girl Person Cutie Babe Raccoon').split(' '),
+            },
+          ],
+          on: {
+            open(picker) {
+              picker.$el.find('.toolbar-randomize-link').on('click', () => {
+                const col0Values = picker.cols[0].values;
+                const col0Random = col0Values[Math.floor(Math.random() * col0Values.length)];
+
+                const col1Values = picker.cols[1].values;
+                const col1Random = col1Values[Math.floor(Math.random() * col1Values.length)];
+
+                const col2Values = picker.cols[2].values;
+                const col2Random = col2Values[Math.floor(Math.random() * col2Values.length)];
+
+                picker.setValue([col0Random, col1Random, col2Random]);
+              });
+            },
+          },
+        });
+        // Inline date-time
+        self.pickerInline = app.picker.create({
+          containerEl: '#demo-picker-date-container',
+          inputEl: '#demo-picker-date',
+          toolbar: false,
+          rotateEffect: true,
+          value: [
+            today.getMonth(),
+            today.getDate(),
+            today.getFullYear(),
+            today.getHours(),
+            today.getMinutes() < 10 ? `0${today.getMinutes()}` : today.getMinutes(),
+          ],
+          formatValue(values, displayValues) {
+            return `${displayValues[0]} ${values[1]}, ${values[2]} ${values[3]}:${values[4]}`;
+          },
+          cols: [
+          // Months
+            {
+              values: ('0 1 2 3 4 5 6 7 8 9 10 11').split(' '),
+              displayValues: ('January February March April May June July August September October November December').split(' '),
+              textAlign: 'left',
+            },
+            // Days
+            {
+              values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
+            },
+            // Years
+            {
+              values: (function createValues() {
+                const arr = [];
+                for (let i = 1950; i <= 2030; i += 1) { arr.push(i); }
+                return arr;
+              }()),
+            },
+            // Space divider
+            {
+              divider: true,
+              content: '&nbsp;&nbsp;',
+            },
+            // Hours
+            {
+              values: (function createValues() {
+                const arr = [];
+                for (let i = 0; i <= 23; i += 1) { arr.push(i); }
+                return arr;
+              }()),
+            },
+            // Divider
+            {
+              divider: true,
+              content: ':',
+            },
+            // Minutes
+            {
+              values: (function createValues() {
+                const arr = [];
+                for (let i = 0; i <= 59; i += 1) { arr.push(i < 10 ? `0${i}` : i); }
+                return arr;
+              }()),
+            },
+          ],
+          on: {
+            change(picker, values, displayValues) {
+              const daysInMonth = new Date(picker.value[2], picker.value[0] * 1 + 1, 0).getDate();
+              if (values[1] > daysInMonth) {
+                picker.cols[1].setValue(daysInMonth);
+              }
+            },
+          },
+        });
+      },
+      pageBeforeRemove() {
+        const self = this;
+        self.pickerDevice.destroy();
+        self.pickerDescribe.destroy();
+        self.pickerDependent.destroy();
+        self.pickerCustomToolbar.destroy();
+      },
+    },
+  };
+</script>
diff --git a/examples/kitchen-sink/pages/popover.vue b/examples/kitchen-sink/pages/popover.vue
index 151b228..2b291d2 100644
--- a/examples/kitchen-sink/pages/popover.vue
+++ b/examples/kitchen-sink/pages/popover.vue
@@ -1,38 +1,42 @@
 <template>
-<f7-page>
-  <f7-navbar title="Popover" back-link="Back"></f7-navbar>
-  <div class="toolbar toolbar-bottom-md">
-    <div class="toolbar-inner">
-      <a href="" class="link">Dummy Link</a>
-      <a href="" class="link popover-open" data-popover=".popover-menu">Open Popover</a>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="block">
-      <p><a href="#" data-popover=".popover-menu" class="button button-raised popover-open">Open popover on me</a></p>
-      <p>Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <a href="#" class="popover-open" data-popover=".popover-menu">popover</a> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.</p>
-      <p>In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabitur <a href="#" class="popover-open" data-popover=".popover-menu">popover!</a> cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.</p>
-      <p>Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper <a href="#" class="popover-open" data-popover=".popover-menu">one more popover</a> massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi. Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus sed risus aliquet, vel accumsan dolor feugiat.</p>
-    </div>
-  </div>
-  <div class="popover popover-menu">
-    <div class="popover-angle"></div>
-    <div class="popover-inner">
-      <div class="list">
-        <ul>
-          <li><a href="/dialog/" class="list-button item-link popover-close">Dialog</a></li>
-          <li><a href="/tabs/" class="list-button item-link popover-close">Tabs</a></li>
-          <li><a href="/panel/" class="list-button item-link popover-close">Side Panels</a></li>
-          <li><a href="/list/" class="list-button item-link popover-close">List View</a></li>
-          <li><a href="/inputs/" class="list-button item-link popover-close">Form Inputs</a></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</f7-page>
+  <f7-page>
+    <f7-navbar title="Popover" back-link="Back"></f7-navbar>
+    <f7-toolbar bottom-md>
+      <f7-link>Dummy Link</f7-link>
+      <f7-link popover-open=".popover-menu">Open Popover</f7-link>
+    </f7-toolbar>
+
+    <f7-block>
+      <p><f7-button raised popover-open=".popover-menu">Open popover on me</f7-button></p>
+      <p>Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <f7-link popover-open=".popover-menu">popover</f7-link> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.</p>
+      <p>In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabitur <f7-link popover-open=".popover-menu">popover!</f7-link> cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.</p>
+      <p>Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper <f7-link popover-open=".popover-menu">one more popover</f7-link> massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi. Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus sed risus aliquet, vel accumsan dolor feugiat.</p>
+    </f7-block>
+    <f7-popover class="popover-menu">
+      <f7-list>
+        <f7-list-item link="/dialog/" popover-close title="Dialog"></f7-list-item>
+        <f7-list-item link="/tabs/" popover-close title="Tabs"></f7-list-item>
+        <f7-list-item link="/panel/" popover-close title="Side Panels"></f7-list-item>
+        <f7-list-item link="/list/" popover-close title="List View"></f7-list-item>
+        <f7-list-item link="/inputs/" popover-close title="Form Inputs"></f7-list-item>
+      </f7-list>
+    </f7-popover>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Toolbar, f7Popover, f7List, f7ListItem, f7Block, f7Link, f7Button} from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7Toolbar,
+      f7Popover,
+      f7List,
+      f7ListItem,
+      f7Block,
+      f7Link,
+      f7Button,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/popup.vue b/examples/kitchen-sink/pages/popup.vue
index da6e586..6c473fa 100644
--- a/examples/kitchen-sink/pages/popup.vue
+++ b/examples/kitchen-sink/pages/popup.vue
@@ -1,62 +1,76 @@
 <template>
   <f7-page>
     <f7-navbar title="Popup" back-link="Back"></f7-navbar>
-    <div class="block">
+    <f7-block>
       <p>Popup is a modal window with any HTML content that pops up over App's main content. Popup as all other overlays is part of so called "Temporary Views".</p>
       <p>
-        <a href="#" class="button button-raised popup-open" data-popup=".demo-popup">Open Popup</a>
+        <f7-button raised popup-open=".demo-popup">Open Popup</f7-button>
       </p>
       <p>
-        <a href="#" class="button button-raised" @click="createPopup">Create Dynamic Popup</a>
+        <f7-button raised @click="popupOpened = true">Open Via Prop Change</f7-button>
       </p>
-    </div>
-    <div class="popup demo-popup">
+      <p>
+        <f7-button raised @click="createPopup">Create Dynamic Popup</f7-button>
+      </p>
+    </f7-block>
+    <f7-popup class="demo-popup" :opened="popupOpened" @popup:closed="popupOpened = false">
       <f7-page>
-        <div class="navbar">
-          <div class="navbar-inner">
-            <div class="title">Popup Title</div>
-            <div class="right"><a href="#" class="link popup-close">Close</a></div>
-          </div>
-        </div>
-        <div class="page-content">
-          <div class="block">
-            <p class="">Here comes popup. You can put here anything, even independent view with its own navigation. Also not, that by default popup looks a bit different on iPhone/iPod and iPad, on iPhone it is fullscreen.</p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
-            <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing libero.</p>
-          </div>
-        </div>
+        <f7-navbar title="Popup Title">
+          <f7-nav-right>
+            <f7-link popup-close>Close</f7-link>
+          </f7-nav-right>
+        </f7-navbar>
+        <f7-block>
+          <p>Here comes popup. You can put here anything, even independent view with its own navigation. Also not, that by default popup looks a bit different on iPhone/iPod and iPad, on iPhone it is fullscreen.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
+          <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing libero.</p>
+        </f7-block>
       </f7-page>
-    </div>
+    </f7-popup>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Popup, f7Block, f7NavRight, f7Link, f7Button } from 'framework7-vue';
 
   export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7Popup,
+      f7Block,
+      f7NavRight,
+      f7Link,
+      f7Button,
+    },
+    data() {
+      return {
+        popupOpened: false,
+      };
+    },
     methods: {
-      createPopup: function () {
-        var self = this;
+      createPopup() {
+        const self = this;
         // Create popup
         if (!self.popup) {
           self.popup = self.$f7.popup.create({
-            content: '\
-              <div class="popup">\
-                <f7-page>\
-                  <div class="navbar">\
-                    <div class="navbar-inner">\
-                      <div class="title">Dynamic Popup</div>\
-                      <div class="right"><a href="#" class="link popup-close">Close</a></div>\
-                    </div>\
-                  </div>\
-                  <div class="page-content">\
-                    <div class="block">\
-                      <p>This popup was created dynamically</p>\
-                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>\
-                    </div>\
-                  </div>\
-                </div>\
-              </div>\
-            '
+            content: `
+              <div class="popup">
+                <div class="page">
+                  <div class="navbar">
+                    <div class="navbar-inner">
+                      <div class="title">Dynamic Popup</div>
+                      <div class="right"><a href="#" class="link popup-close">Close</a></div>
+                    </div>
+                  </div>
+                  <div class="page-content">
+                    <div class="block">
+                      <p>This popup was created dynamically</p>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            `.trim(),
           });
         }
         // Open it
@@ -64,11 +78,11 @@
       },
     },
     on: {
-      pageBeforeRemove: function () {
-        var self = this;
+      pageBeforeRemove() {
+        const self = this;
         // Destroy popup when page removed
         if (self.popup) self.popup.destroy();
       },
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/preloader.vue b/examples/kitchen-sink/pages/preloader.vue
index 96e6277..a8eb27e 100644
--- a/examples/kitchen-sink/pages/preloader.vue
+++ b/examples/kitchen-sink/pages/preloader.vue
@@ -1,45 +1,49 @@
 <template>
   <f7-page>
     <f7-navbar title="Preloader" back-link="Back"></f7-navbar>
-    <div class="block">
+    <f7-block>
       <p>How about an activity indicator? Framework 7 has a nice one. The F7 Preloader is made with SVG and animated with CSS so it can be easily resized.</p>
-    </div>
+    </f7-block>
+
     <f7-block-title>Default</f7-block-title>
-    <div class="block row demo-preloaders align-items-stretch text-align-center">
-      <div class="col-25">
-        <div class="preloader"></div>
-      </div>
-      <div class="col-25 demo-black-col">
-        <div class="preloader color-white"></div>
-      </div>
-      <div class="col-25">
-        <div class="preloader preloader-big"></div>
-      </div>
-      <div class="col-25 demo-black-col">
-        <div class="preloader preloader-big color-white"></div>
-      </div>
-    </div>
+    <f7-block class="row demo-preloaders align-items-stretch text-align-center">
+      <f7-col>
+        <f7-preloader></f7-preloader>
+      </f7-col>
+      <f7-col style="background: #000">
+        <f7-preloader color="white"></f7-preloader>
+      </f7-col>
+      <f7-col>
+        <f7-preloader :size="42"></f7-preloader>
+      </f7-col>
+      <f7-col style="background: #000">
+        <f7-preloader :size="42" color="white"></f7-preloader>
+      </f7-col>
+    </f7-block>
+
     <f7-block-title>Color Preloaders</f7-block-title>
-    <div class="block row text-align-center">
-      <div class="col-25">
-        <div class="preloader color-red"></div>
-      </div>
-      <div class="col-25">
-        <div class="preloader color-green"></div>
-      </div>
-      <div class="col-25">
-        <div class="preloader color-orange"></div>
-      </div>
-      <div class="col-25">
-        <div class="preloader color-blue"></div>
-      </div>
-    </div>
-    <div class="block-title">Multi-color (MD-theme only)</div>
-    <div class="block text-align-center">
-      <div class="preloader color-multi"></div>
-    </div>
+    <f7-block class="row text-align-center">
+      <f7-col>
+        <f7-preloader color="red"></f7-preloader>
+      </f7-col>
+      <f7-col>
+        <f7-preloader color="green"></f7-preloader>
+      </f7-col>
+      <f7-col>
+        <f7-preloader color="orange"></f7-preloader>
+      </f7-col>
+      <f7-col>
+        <f7-preloader color="blue"></f7-preloader>
+      </f7-col>
+    </f7-block>
+
+    <f7-block-title>Multi-color (MD-theme only)</f7-block-title>
+    <f7-block class="text-align-center">
+      <f7-preloader color="multi"></f7-preloader>
+    </f7-block>
+
     <f7-block-title>Preloader Modals</f7-block-title>
-    <div class="block">
+    <f7-block>
       <p>With <b>app.preloader.show()</b> you can show small overlay with preloader indicator.</p>
       <p>
         <a class="button button-raised" @click="openIndicator">Open Small Indicator</a>
@@ -52,53 +56,43 @@
       <p>
         <a class="button button-raised" @click="openCustomDialog">Open Dialog Preloader</a>
       </p>
-    </div>
+    </f7-block>
   </f7-page>
 </template>
-<style scoped>
-  .preloader-big {
-    width: 42px;
-    height: 42px;
-  }
-  .demo-preloaders .col-25 {
-    padding: 5px;
-    line-height: 42px;
-  }
-  .demo-black-col {
-    background: #000;
-  }
-</style>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Preloader, f7Col } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
+      f7Block,
+      f7Preloader,
+      f7Col,
     },
     methods: {
-      openIndicator: function () {
-        var self = this;
+      openIndicator() {
+        const self = this;
         self.$f7.preloader.show();
-        setTimeout(function () {
+        setTimeout(() => {
           self.$f7.preloader.hide();
         }, 2000);
       },
-      openDialog: function () {
-        var self = this;
+      openDialog() {
+        const self = this;
         self.$f7.dialog.preloader();
-        setTimeout(function () {
+        setTimeout(() => {
           self.$f7.dialog.close();
         }, 2000);
       },
-      openCustomDialog: function () {
-        var self = this;
+      openCustomDialog() {
+        const self = this;
         self.$f7.dialog.preloader('My text...');
-        setTimeout(function () {
+        setTimeout(() => {
           self.$f7.dialog.close();
         }, 2000);
       },
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/progressbar.vue b/examples/kitchen-sink/pages/progressbar.vue
index d72bff7..f823f48 100644
--- a/examples/kitchen-sink/pages/progressbar.vue
+++ b/examples/kitchen-sink/pages/progressbar.vue
@@ -1,144 +1,135 @@
 <template>
   <f7-page>
     <f7-navbar title="Progress Bar" back-link="Back"></f7-navbar>
-    <div class="block">
+    <f7-block>
       <p>In addition to <a href="/preloader/">Preloader</a>, Framework7 also comes with fancy animated determinate and infinite/indeterminate progress bars to indicate some activity.</p>
-    </div>
+    </f7-block>
     <f7-block-title>Determinate Progress Bar</f7-block-title>
-    <div class="block block-strong">
+    <f7-block strong>
       <p>When progress bar is determinate it indicates how long an operation will take when the percentage complete is detectable.</p>
       <p>Inline determinate progress bar:</p>
       <div>
-        <p><span data-progress="10" class="progressbar" id="demo-inline-progressbar"></span></p>
-        <p class="segmented segmented-raised">
-          <a href="#" data-progress="10" class="button" @click="setInlineProgress(10)">10%</a>
-          <a href="#" data-progress="30" class="button" @click="setInlineProgress(30)">30%</a>
-          <a href="#" data-progress="50" class="button" @click="setInlineProgress(50)">50%</a>
-          <a href="#" data-progress="100" class="button" @click="setInlineProgress(100)">100%</a>
-        </p>
+        <p><f7-progressbar :progress="10" id="demo-inline-progressbar"></f7-progressbar></p>
+        <f7-segmented raised>
+          <f7-button @click="setInlineProgress(10)">10%</f7-button>
+          <f7-button @click="setInlineProgress(30)">30%</f7-button>
+          <f7-button @click="setInlineProgress(50)">50%</f7-button>
+          <f7-button @click="setInlineProgress(100)">100%</f7-button>
+        </f7-segmented>
       </div>
       <div>
         <p>Inline determinate load & hide:</p>
         <p id="demo-determinate-container"></p>
         <p>
-          <a href="" class="button button-raised" @click="showDeterminate(true)">Start Loading</a>
+          <f7-button raised @click="showDeterminate(true)">Start Loading</f7-button>
         </p>
       </div>
       <div>
         <p>Overlay with determinate progress bar on top of the app:</p>
         <p>
-          <a href="" class="button button-raised" @click="showDeterminate(false)">Start Loading</a>
+          <f7-button raised @click="showDeterminate(false)">Start Loading</f7-button>
         </p>
       </div>
-    </div>
+    </f7-block>
     <f7-block-title>Infinite Progress Bar</f7-block-title>
-    <div class="block block-strong">
+    <f7-block strong>
       <p>When progress bar is infinite/indeterminate it requests that the user wait while something finishes when it’s not necessary to indicate how long it will take.</p>
       <p>Inline infinite progress bar</p>
       <p>
-        <span class="progressbar-infinite"></span>
+        <f7-progressbar infinite></f7-progressbar>
       </p>
       <p>Multi-color infinite progress bar</p>
       <p>
-        <span class="progressbar-infinite color-multi"></span>
+        <f7-progressbar infinite color="multi"></f7-progressbar>
       </p>
       <div>
         <p>Overlay with infinite progress bar on top of the app</p>
         <p id="demo-infinite-container"></p>
         <p>
-          <a href="" class="button button-raised" @click="showInfinite(false)">Start Loading</a>
+          <f7-button raised @click="showInfinite(false)">Start Loading</f7-button>
         </p>
       </div>
       <div>
         <p>Overlay with infinite multi-color progress bar on top of the app</p>
         <p>
-          <a href="" class="button button-raised" @click="showInfinite(true)">Start Loading</a>
+          <f7-button raised @click="showInfinite(true)">Start Loading</f7-button>
         </p>
       </div>
-    </div>
+    </f7-block>
     <f7-block-title>Colors</f7-block-title>
     <div class="list simple-list">
       <ul>
         <li>
-          <div class="progressbar color-blue" data-progress="10"></div>
-        </li>
-        <li>
-          <div class="progressbar color-red" data-progress="20"></div>
-        </li>
-        <li>
-          <div class="progressbar color-pink" data-progress="30"></div>
-        </li>
-        <li>
-          <div class="progressbar color-purple" data-progress="40"></div>
+          <f7-progressbar color="blue" :progress="10"></f7-progressbar>
         </li>
         <li>
-          <div class="progressbar color-indigo" data-progress="50"></div>
+          <f7-progressbar color="red" :progress="20"></f7-progressbar>
         </li>
         <li>
-          <div class="progressbar color-cyan" data-progress="60"></div>
+          <f7-progressbar color="pink" :progress="30"></f7-progressbar>
         </li>
         <li>
-          <div class="progressbar color-teal" data-progress="70"></div>
+          <f7-progressbar color="green" :progress="80"></f7-progressbar>
         </li>
         <li>
-          <div class="progressbar color-green" data-progress="80"></div>
+          <f7-progressbar color="yellow" :progress="90"></f7-progressbar>
         </li>
         <li>
-          <div class="progressbar color-yellow" data-progress="90"></div>
-        </li>
-        <li>
-          <div class="progressbar color-orange" data-progress="100"></div>
+          <f7-progressbar color="orange" :progress="100"></f7-progressbar>
         </li>
       </ul>
     </div>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Progressbar, f7Button, f7Segmented } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
+      f7Block,
+      f7Progressbar,
+      f7Button,
+      f7Segmented,
     },
     methods: {
-      setInlineProgress: function (value) {
-        var self = this;
-        var app = self.$f7;
+      setInlineProgress(value) {
+        const self = this;
+        const app = self.$f7;
         app.progressbar.set('#demo-inline-progressbar', value);
       },
-      showDeterminate: function (inline) {
-        var self = this;
-        var app = self.$f7;
+      showDeterminate(inline) {
+        const self = this;
+        const app = self.$f7;
         if (self.determinateLoading) return;
         self.determinateLoading = true;
-        var progressBarEl;
+        let progressBarEl;
         if (inline) {
           progressBarEl = app.progressbar.show('#demo-determinate-container', 0);
         } else {
           progressBarEl = app.progressbar.show(0, app.theme === 'md' ? 'yellow' : 'blue');
         }
-        var progress = 0;
+        let progress = 0;
         function simulateLoading() {
-          setTimeout(function () {
-            var progressBefore = progress;
+          setTimeout(() => {
+            const progressBefore = progress;
             progress += Math.random() * 20;
             app.progressbar.set(progressBarEl, progress);
             if (progressBefore < 100) {
-              simulateLoading(); //keep "loading"
-            }
-            else {
+              simulateLoading(); // keep "loading"
+            } else {
               self.determinateLoading = false;
-              app.progressbar.hide(progressBarEl); //hide
+              app.progressbar.hide(progressBarEl); // hide
             }
           }, Math.random() * 200 + 200);
         }
         simulateLoading();
       },
-      showInfinite: function (multiColor) {
-        var self = this;
-        var app = self.$f7;
+      showInfinite(multiColor) {
+        const self = this;
+        const app = self.$f7;
         if (self.infiniteLoading) return;
         self.infiniteLoading = true;
         if (multiColor) {
@@ -146,11 +137,11 @@
         } else {
           app.progressbar.show(app.theme === 'md' ? 'yellow' : 'blue');
         }
-        setTimeout(function () {
+        setTimeout(() => {
           self.infiniteLoading = false;
           app.progressbar.hide();
         }, 3000);
-      }
+      },
     },
-  }
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/pull-to-refresh.vue b/examples/kitchen-sink/pages/pull-to-refresh.vue
index fc57f8a..2c1452f 100644
--- a/examples/kitchen-sink/pages/pull-to-refresh.vue
+++ b/examples/kitchen-sink/pages/pull-to-refresh.vue
@@ -1,85 +1,73 @@
 <template>
-  <f7-page>
+  <f7-page ptr @ptr:refresh="loadMore">
     <f7-navbar title="Pull To Refresh" back-link="Back"></f7-navbar>
-    <div data-infinite-distance="50" class="page-content ptr-content" @ptr:refresh="loadMore">
-      <div class="ptr-preloader">
-        <div class="preloader"></div>
-        <div class="ptr-arrow"></div>
-      </div>
-      <div class="list media-list">
-        <ul>
-          <li class="item-content">
-            <div class="item-media"><img src="http://lorempixel.com/88/88/abstract/1" width="44"/></div>
-            <div class="item-inner">
-              <div class="item-title-row">
-                <div class="item-title">Yellow Submarine</div>
-              </div>
-              <div class="item-subtitle">Beatles</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-media"><img src="http://lorempixel.com/88/88/abstract/2" width="44"/></div>
-            <div class="item-inner">
-              <div class="item-title-row">
-                <div class="item-title">Don't Stop Me Now</div>
-              </div>
-              <div class="item-subtitle">Queen</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-media"><img src="http://lorempixel.com/88/88/abstract/3" width="44"/></div>
-            <div class="item-inner">
-              <div class="item-title-row">
-                <div class="item-title">Billie Jean</div>
-              </div>
-              <div class="item-subtitle">Michael Jackson</div>
-            </div>
-          </li>
-        </ul>
-        <div class="block-footer">
-          <p>Just pull page down to let the magic happen.<br>Note that pull-to-refresh feature is optimised for touch and native scrolling so it may not work on desktop browser.</p>
-        </div>
-      </div>
-    </div>
+    <f7-list media-list>
+      <f7-list-item
+        v-for="(item, index) in items"
+        :key="index"
+        :title="item.title"
+        :subtitle="item.author">
+        <img slot="media" :src="item.cover" width="44" />
+      </f7-list-item>
+
+      <f7-block-footer>
+        <p>Just pull page down to let the magic happen.<br>Note that pull-to-refresh feature is optimised for touch and native scrolling so it may not work on desktop browser.</p>
+      </f7-block-footer>
+    </f7-list>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7List, f7ListItem, f7BlockFooter } from 'framework7-vue';
 
   export default {
-    data: function () {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7List,
+      f7ListItem,
+      f7BlockFooter,
+    },
+    data() {
       return {
+        items: [
+          {
+            title: 'Yellow Submarine',
+            author: 'Beatles',
+            cover: 'http://lorempixel.com/88/88/abstract/1',
+          },
+          {
+            title: 'Don\'t Stop Me Now',
+            author: 'Queen',
+            cover: 'http://lorempixel.com/88/88/abstract/2',
+          },
+          {
+            title: 'Billie Jean',
+            author: 'Michael Jackson',
+            cover: 'http://lorempixel.com/88/88/abstract/3',
+          },
+        ],
         songs: ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'],
-        authors: ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers']
-      }
+        authors: ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'],
+      };
     },
     methods: {
-      loadMore: function (e, done) {
-        var self = this;
-        var $ = self.$$;
-
-        setTimeout(function () {
-          var picURL = 'http://lorempixel.com/88/88/abstract/' + Math.round(Math.random() * 10);
-          var song = self.songs[Math.floor(Math.random() * self.songs.length)];
-          var author = self.authors[Math.floor(Math.random() * self.authors.length)];
+      loadMore(event, done) {
+        const self = this;
 
-          var linkHTML =
-          '<li class="item-content">' +
-            '<div class="item-media"><img src="' + picURL + '" width="44"/></div>' +
-            '<div class="item-inner">' +
-              '<div class="item-title-row">' +
-                '<div class="item-title">' + song + '</div>' +
-              '</div>' +
-              '<div class="item-subtitle">' + author + '</div>' +
-            '</div>' +
-          '</li>';
+        setTimeout(() => {
+          const picURL = `http://lorempixel.com/88/88/abstract/${Math.round(Math.random() * 10)}`;
+          const song = self.songs[Math.floor(Math.random() * self.songs.length)];
+          const author = self.authors[Math.floor(Math.random() * self.authors.length)];
 
-          $(self.$el).find('.list ul').append(linkHTML);
+          self.items.push({
+            title: song,
+            author,
+            img: picURL,
+          });
 
           done();
-
         }, 1000);
-      }
-    }
-  }
+      },
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/searchbar-expandable.vue b/examples/kitchen-sink/pages/searchbar-expandable.vue
index a6e566f..91f23c4 100644
--- a/examples/kitchen-sink/pages/searchbar-expandable.vue
+++ b/examples/kitchen-sink/pages/searchbar-expandable.vue
@@ -1,248 +1,76 @@
 <template>
-<f7-page>
-  <div class="navbar">
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a href="#" class="link back">
-          <i class="icon icon-back"></i>
-          <span class="ios-only">Back</span>
-        </a>
-      </div>
-      <div class="title">Searchbar</div>
-      <div class="right">
-        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-demo">
-          <i class="icon f7-icons ios-only">search_strong</i>
-          <i class="icon material-icons md-only">search</i>
-        </a>
-      </div>
-      <form data-search-container=".search-list" data-search-in=".item-title" class="searchbar searchbar-expandable searchbar-demo searchbar-init">
-        <div class="searchbar-inner">
-          <div class="searchbar-input-wrap">
-            <input type="search" placeholder="Search"/>
-            <i class="searchbar-icon"></i>
-            <span class="input-clear-button"></span>
-          </div>
-          <span class="searchbar-disable-button">Cancel</span>
-        </div>
-      </form>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="searchbar-backdrop"></div>
-    <div class="list simple-list searchbar-not-found">
-      <ul>
-        <li>Nothing found</li>
-      </ul>
-    </div>
-    <div class="list search-list searchbar-found">
-      <ul>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Acura</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Audi</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">BMW</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Cadillac </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Chevrolet </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Chrysler </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Dodge </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Ferrari </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Ford </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">GMC </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Honda</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Hummer</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Hyundai</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Infiniti </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Isuzu </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Jaguar </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Jeep </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Kia</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Lamborghini </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Land Rover</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Lexus </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Lincoln </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Lotus </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Mazda</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Mercedes-Benz</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Mercury </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Mitsubishi</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Nissan </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Oldsmobile </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Peugeot </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Pontiac </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Porsche</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Regal</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Saab </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Saturn </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Subaru </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Suzuki </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Toyota</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Volkswagen</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Volvo</div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</f7-page>
+  <f7-page>
+    <f7-navbar back-link="Back" title="Searchbar">
+      <f7-nav-right>
+        <f7-link class="searchbar-enable" data-searchbar=".searchbar-demo" icon-if-ios="f7:search_strong" icon-if-md="material:search"></f7-link>
+      </f7-nav-right>
+      <f7-searchbar
+        class="searchbar-demo"
+        expandable
+        search-container=".search-list"
+        search-in=".item-title"
+      ></f7-searchbar>
+    </f7-navbar>
+    <f7-list class="searchbar-not-found">
+      <f7-list-item title="Nothing found"></f7-list-item>
+    </f7-list>
+    <f7-list class="search-list searchbar-found">
+      <f7-list-item title="Acura"></f7-list-item>
+      <f7-list-item title="Audi"></f7-list-item>
+      <f7-list-item title="BMW"></f7-list-item>
+      <f7-list-item title="Cadillac "></f7-list-item>
+      <f7-list-item title="Chevrolet "></f7-list-item>
+      <f7-list-item title="Chrysler "></f7-list-item>
+      <f7-list-item title="Dodge "></f7-list-item>
+      <f7-list-item title="Ferrari "></f7-list-item>
+      <f7-list-item title="Ford "></f7-list-item>
+      <f7-list-item title="GMC "></f7-list-item>
+      <f7-list-item title="Honda"></f7-list-item>
+      <f7-list-item title="Hummer"></f7-list-item>
+      <f7-list-item title="Hyundai"></f7-list-item>
+      <f7-list-item title="Infiniti "></f7-list-item>
+      <f7-list-item title="Isuzu "></f7-list-item>
+      <f7-list-item title="Jaguar "></f7-list-item>
+      <f7-list-item title="Jeep "></f7-list-item>
+      <f7-list-item title="Kia"></f7-list-item>
+      <f7-list-item title="Lamborghini "></f7-list-item>
+      <f7-list-item title="Land Rover"></f7-list-item>
+      <f7-list-item title="Lexus "></f7-list-item>
+      <f7-list-item title="Lincoln "></f7-list-item>
+      <f7-list-item title="Lotus "></f7-list-item>
+      <f7-list-item title="Mazda"></f7-list-item>
+      <f7-list-item title="Mercedes-Benz"></f7-list-item>
+      <f7-list-item title="Mercury "></f7-list-item>
+      <f7-list-item title="Mitsubishi"></f7-list-item>
+      <f7-list-item title="Nissan "></f7-list-item>
+      <f7-list-item title="Oldsmobile "></f7-list-item>
+      <f7-list-item title="Peugeot "></f7-list-item>
+      <f7-list-item title="Pontiac "></f7-list-item>
+      <f7-list-item title="Porsche"></f7-list-item>
+      <f7-list-item title="Regal"></f7-list-item>
+      <f7-list-item title="Saab "></f7-list-item>
+      <f7-list-item title="Saturn "></f7-list-item>
+      <f7-list-item title="Subaru "></f7-list-item>
+      <f7-list-item title="Suzuki "></f7-list-item>
+      <f7-list-item title="Toyota"></f7-list-item>
+      <f7-list-item title="Volkswagen"></f7-list-item>
+      <f7-list-item title="Volvo"></f7-list-item>
+    </f7-list>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Searchbar, f7Subnavbar, f7List, f7ListItem, f7Link, f7NavRight } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7Searchbar,
+      f7Subnavbar,
+      f7List,
+      f7ListItem,
+      f7Link,
+      f7NavRight,
+    },
+  }
 </script>
diff --git a/examples/kitchen-sink/pages/searchbar.vue b/examples/kitchen-sink/pages/searchbar.vue
index 0a311e7..4c72e23 100644
--- a/examples/kitchen-sink/pages/searchbar.vue
+++ b/examples/kitchen-sink/pages/searchbar.vue
@@ -1,245 +1,71 @@
 <template>
-<f7-page>
-  <div class="navbar">
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a href="#" class="link back">
-          <i class="icon icon-back"></i>
-          <span class="ios-only">Back</span>
-        </a>
-      </div>
-      <div class="title">Searchbar</div>
-      <div class="subnavbar">
-        <form data-search-container=".search-list" data-search-in=".item-title" class="searchbar searchbar-init">
-          <div class="searchbar-inner">
-            <div class="searchbar-input-wrap">
-              <input type="search" placeholder="Search"/>
-              <i class="searchbar-icon"></i>
-              <span class="input-clear-button"></span>
-            </div>
-            <span class="searchbar-disable-button">Cancel</span>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="searchbar-backdrop"></div>
-
-    <div class="list simple-list searchbar-not-found">
-      <ul>
-        <li>Nothing found</li>
-      </ul>
-    </div>
-    <div class="list search-list searchbar-found">
-      <ul>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Acura</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Audi</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">BMW</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Cadillac </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Chevrolet </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Chrysler </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Dodge </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Ferrari </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Ford </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">GMC </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Honda</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Hummer</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Hyundai</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Infiniti </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Isuzu </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Jaguar </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Jeep </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Kia</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Lamborghini </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Land Rover</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Lexus </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Lincoln </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Lotus </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Mazda</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Mercedes-Benz</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Mercury </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Mitsubishi</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Nissan </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Oldsmobile </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Peugeot </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Pontiac </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Porsche</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Regal</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Saab </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Saturn </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Subaru </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Suzuki </div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Toyota</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Volkswagen</div>
-          </div>
-        </li>
-        <li class="item-content">
-          <div class="item-inner">
-            <div class="item-title">Volvo</div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</f7-page>
+  <f7-page>
+    <f7-navbar back-link="Back" title="Searchbar">
+      <f7-subnavbar :inner="false">
+        <f7-searchbar
+          search-container=".search-list"
+          search-in=".item-title"
+        ></f7-searchbar>
+      </f7-subnavbar>
+    </f7-navbar>
+    <f7-list class="searchbar-not-found">
+      <f7-list-item title="Nothing found"></f7-list-item>
+    </f7-list>
+    <f7-list class="search-list searchbar-found">
+      <f7-list-item title="Acura"></f7-list-item>
+      <f7-list-item title="Audi"></f7-list-item>
+      <f7-list-item title="BMW"></f7-list-item>
+      <f7-list-item title="Cadillac "></f7-list-item>
+      <f7-list-item title="Chevrolet "></f7-list-item>
+      <f7-list-item title="Chrysler "></f7-list-item>
+      <f7-list-item title="Dodge "></f7-list-item>
+      <f7-list-item title="Ferrari "></f7-list-item>
+      <f7-list-item title="Ford "></f7-list-item>
+      <f7-list-item title="GMC "></f7-list-item>
+      <f7-list-item title="Honda"></f7-list-item>
+      <f7-list-item title="Hummer"></f7-list-item>
+      <f7-list-item title="Hyundai"></f7-list-item>
+      <f7-list-item title="Infiniti "></f7-list-item>
+      <f7-list-item title="Isuzu "></f7-list-item>
+      <f7-list-item title="Jaguar "></f7-list-item>
+      <f7-list-item title="Jeep "></f7-list-item>
+      <f7-list-item title="Kia"></f7-list-item>
+      <f7-list-item title="Lamborghini "></f7-list-item>
+      <f7-list-item title="Land Rover"></f7-list-item>
+      <f7-list-item title="Lexus "></f7-list-item>
+      <f7-list-item title="Lincoln "></f7-list-item>
+      <f7-list-item title="Lotus "></f7-list-item>
+      <f7-list-item title="Mazda"></f7-list-item>
+      <f7-list-item title="Mercedes-Benz"></f7-list-item>
+      <f7-list-item title="Mercury "></f7-list-item>
+      <f7-list-item title="Mitsubishi"></f7-list-item>
+      <f7-list-item title="Nissan "></f7-list-item>
+      <f7-list-item title="Oldsmobile "></f7-list-item>
+      <f7-list-item title="Peugeot "></f7-list-item>
+      <f7-list-item title="Pontiac "></f7-list-item>
+      <f7-list-item title="Porsche"></f7-list-item>
+      <f7-list-item title="Regal"></f7-list-item>
+      <f7-list-item title="Saab "></f7-list-item>
+      <f7-list-item title="Saturn "></f7-list-item>
+      <f7-list-item title="Subaru "></f7-list-item>
+      <f7-list-item title="Suzuki "></f7-list-item>
+      <f7-list-item title="Toyota"></f7-list-item>
+      <f7-list-item title="Volkswagen"></f7-list-item>
+      <f7-list-item title="Volvo"></f7-list-item>
+    </f7-list>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Searchbar, f7Subnavbar, f7List, f7ListItem } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7Searchbar,
+      f7Subnavbar,
+      f7List,
+      f7ListItem,
+    },
+  }
 </script>
diff --git a/examples/kitchen-sink/pages/sheet-modal.vue b/examples/kitchen-sink/pages/sheet-modal.vue
index e2e85f2..d306e03 100644
--- a/examples/kitchen-sink/pages/sheet-modal.vue
+++ b/examples/kitchen-sink/pages/sheet-modal.vue
@@ -1,62 +1,80 @@
 <template>
   <f7-page>
     <f7-navbar title="Sheet Modal" back-link="Back"></f7-navbar>
-    <div class="block">
+    <f7-block>
       <p>Sheet Modals slide up from the bottom of the screen to reveal more content. Such modals allow to create custom overlays with custom content.</p>
-      <p class="row">
-        <a class="col button button-raised sheet-open" data-sheet=".demo-sheet">Open Sheet</a>
-        <a class="col button button-raised" @click="createSheet">Create Dynamic Sheet</a>
+      <f7-row tag="p">
+        <f7-button class="col" raised sheet-open=".demo-sheet">Open Sheet</f7-button>
+        <f7-button class="col" raised @click="createSheet">Create Dynamic Sheet</f7-button>
+      </f7-row>
+      <p>
+        <f7-button class="col" raised @click="sheetOpened = true">Open Via Prop Change</f7-button>
       </p>
-    </div>
-    <div class="sheet-modal demo-sheet">
-      <div class="toolbar">
-        <div class="toolbar-inner">
-          <div class="left"></div>
-          <div class="right">
-            <a class="link sheet-close">Close</a>
-          </div>
+    </f7-block>
+    <f7-sheet class="demo-sheet" :opened="sheetOpened" @sheet:closed="sheetOpened = false">
+      <f7-toolbar>
+        <div class="left"></div>
+        <div class="right">
+          <f7-link sheet-close>Close</f7-link>
         </div>
-      </div>
-      <div class="sheet-modal-inner">
-        <div class="page-content">
-          <div class="block">
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in tempora harum sequi corporis alias ex adipisci.</p>
-            <p>Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut deserunt soluta alias magnam. Consequatur, nisi, enim.</p>
-            <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem libero minus dignissimos repellat.</p>
-            <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?</p>
-            <p>Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus sapiente repellendus nesciunt praesentium velit ipsa illo iusto.</p>
-          </div>
-        </div>
-      </div>
-    </div>
+      </f7-toolbar>
+      <!-- Scrollable sheet content -->
+      <f7-page-content>
+        <f7-block>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in tempora harum sequi corporis alias ex adipisci.</p>
+          <p>Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut deserunt soluta alias magnam. Consequatur, nisi, enim.</p>
+          <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem libero minus dignissimos repellat.</p>
+          <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?</p>
+          <p>Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus sapiente repellendus nesciunt praesentium velit ipsa illo iusto.</p>
+        </f7-block>
+      </f7-page-content>
+    </f7-sheet>
   </f7-page>
 </template>
 <script>
+import { f7Page, f7Navbar, f7Sheet, f7PageContent, f7Toolbar, f7Block, f7Button, f7Link, f7Row } from 'framework7-vue';
+
 export default {
+  components: {
+    f7Page,
+    f7Navbar,
+    f7Sheet,
+    f7PageContent,
+    f7Toolbar,
+    f7Block,
+    f7Button,
+    f7Link,
+    f7Row,
+  },
+  data() {
+    return {
+      sheetOpened: false,
+    };
+  },
   methods: {
-    createSheet: function () {
-      var self = this;
-      var $ = self.$$;
+    createSheet() {
+      const self = this;
+      const $ = self.$$;
       // Create sheet modal
       if (!self.sheet) {
         self.sheet = self.$f7.sheet.create({
-          content: '\
-            <div class="sheet-modal">\
-              <div class="toolbar">\
-                <div class="toolbar-inner justify-content-flex-end">\
-                  <a href="#" class="link sheet-close">Close</a>\
-                </div>\
-              </div>\
-              <div class="sheet-modal-inner">\
-                <div class="page-content">\
-                  <div class="block">\
-                    <p>This sheet modal was created dynamically</p>\
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>\
-                  </div>\
-                </div>\
-              </div>\
-            </div>\
-          '
+          content: `
+            <div class="sheet-modal">
+              <div class="toolbar">
+                <div class="toolbar-inner justify-content-flex-end">
+                  <a href="#" class="link sheet-close">Close</a>
+                </div>
+              </div>
+              <div class="sheet-modal-inner">
+                <div class="page-content">
+                  <div class="block">
+                    <p>This sheet modal was created dynamically</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          `.trim(),
         });
       }
       // Close inline sheet
@@ -66,16 +84,16 @@ export default {
     },
   },
   on: {
-    pageBeforeOut: function () {
-      var self = this;
+    pageBeforeOut() {
+      const self = this;
       // Close opened sheets on page out
       self.$f7.sheet.close();
     },
-    pageBeforeRemove: function () {
-      var self = this;
+    pageBeforeRemove() {
+      const self = this;
       // Destroy sheet modal when page removed
       if (self.sheet) self.sheet.destroy();
     },
-  }
-}
+  },
+};
 </script>
diff --git a/examples/kitchen-sink/pages/smart-select.vue b/examples/kitchen-sink/pages/smart-select.vue
index f0b7c6c..88fc181 100644
--- a/examples/kitchen-sink/pages/smart-select.vue
+++ b/examples/kitchen-sink/pages/smart-select.vue
@@ -1,109 +1,75 @@
 <template>
-<f7-page>
-  <div class="navbar">
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a class="link back">
-          <i class="icon icon-back"></i>
-          <span class="ios-only">Back</span>
-        </a>
-      </div>
-      <div class="title">Smart Select</div>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="block">
+  <f7-page>
+    <f7-navbar title="Smart Select" back-link="Back"></f7-navbar>
+    <f7-block>
       Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
-    </div>
-    <div class="list">
-      <ul>
-        <li>
-          <a class="item-link smart-select smart-select-init">
-            <select name="fruits">
-              <option value="apple" selected>Apple</option>
-              <option value="pineapple">Pineapple</option>
-              <option value="pear">Pear</option>
-              <option value="orange">Orange</option>
-              <option value="melon">Melon</option>
-              <option value="peach">Peach</option>
-              <option value="banana">Banana</option>
-            </select>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Fruit</div>
-              </div>
-            </div>
-          </a>
-        </li>
-        <li>
-          <a class="item-link smart-select smart-select-init" data-open-in="popup"  data-searchbar="true" data-searchbar-placeholder="Search car">
-            <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>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Car</div>
-              </div>
-            </div>
-          </a>
-        </li>
-        <li>
-          <a class="item-link smart-select smart-select-init" data-open-in="sheet">
-            <select name="mac-windows">
-              <option value="mac" selected>Mac</option>
-              <option value="windows">Windows</option>
-            </select>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Mac or Windows</div>
-              </div>
-            </div>
-          </a>
-        </li>
-        <li>
-          <a class="item-link smart-select smart-select-init" data-open-in="popover">
-            <select name="superhero" multiple>
-              <option value="Batman" selected>Batman</option>
-              <option value="Superman">Superman</option>
-              <option value="Hulk">Hulk</option>
-              <option value="Spiderman">Spiderman</option>
-              <option value="Ironman">Ironman</option>
-              <option value="Thor">Thor</option>
-              <option value="Wonder Woman">Wonder Woman</option>
-            </select>
-            <div class="item-content">
-              <div class="item-inner">
-                <div class="item-title">Super Hero</div>
-              </div>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</f7-page>
+    </f7-block>
+    <f7-list>
+      <f7-list-item title="Fruit" smart-select>
+        <select name="fruits">
+          <option value="apple" selected>Apple</option>
+          <option value="pineapple">Pineapple</option>
+          <option value="pear">Pear</option>
+          <option value="orange">Orange</option>
+          <option value="melon">Melon</option>
+          <option value="peach">Peach</option>
+          <option value="banana">Banana</option>
+        </select>
+      </f7-list-item>
+      <f7-list-item title="Car" smart-select :smart-select-params="{openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search car'}">
+        <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-item title="Mac or Windows" smart-select :smart-select-params="{openIn: 'sheet'}">
+        <select name="mac-windows">
+          <option value="mac" selected>Mac</option>
+          <option value="windows">Windows</option>
+        </select>
+      </f7-list-item>
+      <f7-list-item title="Super Hero" smart-select :smart-select-params="{openIn: 'popover'}">
+        <select name="superhero" multiple>
+          <option value="Batman" selected>Batman</option>
+          <option value="Superman">Superman</option>
+          <option value="Hulk">Hulk</option>
+          <option value="Spiderman">Spiderman</option>
+          <option value="Ironman">Ironman</option>
+          <option value="Thor">Thor</option>
+          <option value="Wonder Woman">Wonder Woman</option>
+        </select>
+      </f7-list-item>
+    </f7-list>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7List, f7Block, f7ListItem } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7List,
+      f7Block,
+      f7ListItem,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/sortable.vue b/examples/kitchen-sink/pages/sortable.vue
index 4edddd4..be142cc 100644
--- a/examples/kitchen-sink/pages/sortable.vue
+++ b/examples/kitchen-sink/pages/sortable.vue
@@ -1,148 +1,92 @@
 <template>
-<f7-page>
-  <div class="navbar">
-    <div class="navbar-inner sliding">
-      <div class="left">
-          <a href="#" class="link back">
-            <i class="icon icon-back"></i>
-            <span class="ios-only">Back</span>
-          </a>
-        </div>
-      <div class="title">Sortable List</div>
-      <div class="right">
-        <a class="link sortable-toggle" data-sortable=".sortable">Toggle</a>
-      </div>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="block">
-      <p>Just click "Edit" button on navigation bar to enable sorting</p>
-    </div>
-    <div class="list sortable">
-      <ul>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">1 Jenna Smith</div>
-              <div class="item-after">CEO</div>
-            </div>
-          </div>
-          <div class="sortable-handler"></div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">2 John Doe</div>
-              <div class="item-after">Director</div>
-            </div>
-          </div>
-          <div class="sortable-handler"></div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">3 John Doe</div>
-              <div class="item-after">Developer</div>
-            </div>
-          </div>
-          <div class="sortable-handler"></div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">4 Aaron Darling</div>
-              <div class="item-after">Manager</div>
-            </div>
-          </div>
-          <div class="sortable-handler"></div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">5 Calvin Johnson</div>
-              <div class="item-after">Accounter</div>
-            </div>
-          </div>
-          <div class="sortable-handler"></div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">6 John Smith</div>
-              <div class="item-after">SEO</div>
-            </div>
-          </div>
-          <div class="sortable-handler"></div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><i class="icon icon-f7"></i></div>
-            <div class="item-inner">
-              <div class="item-title">7 Chloe</div>
-              <div class="item-after">Manager</div>
-            </div>
-          </div>
-          <div class="sortable-handler"></div>
-        </li>
-      </ul>
-    </div>
-    <div class="list media-list sortable">
-      <ul>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><img src="http://lorempixel.com/160/160/people/1" width="80"/></div>
-            <div class="item-inner">
-              <div class="item-title-row">
-                <div class="item-title">Yellow Submarine</div>
-                <div class="item-after">$15</div>
-              </div>
-              <div class="item-subtitle">Beatles</div>
-              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
-            </div>
-          </div>
-          <div class="sortable-handler"></div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><img src="http://lorempixel.com/160/160/people/2" width="80"/></div>
-            <div class="item-inner">
-              <div class="item-title-row">
-                <div class="item-title">Don't Stop Me Now</div>
-                <div class="item-after">$22</div>
-              </div>
-              <div class="item-subtitle">Queen</div>
-              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
-            </div>
-          </div>
-          <div class="sortable-handler"></div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media"><img src="http://lorempixel.com/160/160/people/3" width="80"/></div>
-            <div class="item-inner">
-              <div class="item-title-row">
-                <div class="item-title">Billie Jean</div>
-                <div class="item-after">$16</div>
-              </div>
-              <div class="item-subtitle">Michael Jackson</div>
-              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
-            </div>
-          </div>
-          <div class="sortable-handler"></div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</f7-page>
+  <f7-page>
+    <f7-navbar title="Sortable List" back-link="Back">
+      <f7-nav-right>
+        <f7-link sortable-toggle=".sortable">Toggle</f7-link>
+      </f7-nav-right>
+    </f7-navbar>
+
+    <f7-block>
+      <p>Just click "Toggle" button on navigation bar to enable/disable sorting</p>
+    </f7-block>
+    <f7-list sortable>
+      <f7-list-item
+        title="1 Jenna Smith"
+        after="CEO">
+        <f7-icon icon="icon-f7" slot="media"></f7-icon>
+      </f7-list-item>
+      <f7-list-item
+        title="2 John Doe"
+        after="Director">
+        <f7-icon icon="icon-f7" slot="media"></f7-icon>
+      </f7-list-item>
+      <f7-list-item
+        title="3 John Doe"
+        after="Developer">
+        <f7-icon icon="icon-f7" slot="media"></f7-icon>
+      </f7-list-item>
+      <f7-list-item
+        title="4 Aaron Darling"
+        after="Manager">
+        <f7-icon icon="icon-f7" slot="media"></f7-icon>
+      </f7-list-item>
+      <f7-list-item
+        title="5 Calvin Johnson"
+        after="Accounter">
+        <f7-icon icon="icon-f7" slot="media"></f7-icon>
+      </f7-list-item>
+      <f7-list-item
+        title="6 John Smith"
+        after="SEO">
+        <f7-icon icon="icon-f7" slot="media"></f7-icon>
+      </f7-list-item>
+      <f7-list-item
+        title="7 Chloe"
+        after="Manager">
+        <f7-icon icon="icon-f7" slot="media"></f7-icon>
+      </f7-list-item>
+    </f7-list>
+    <f7-list media-list sortable>
+      <f7-list-item
+        title="Yellow Submarine"
+        after="$15"
+        subtitle="Beatles"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+        >
+        <img slot="media" src="http://lorempixel.com/160/160/people/1" width="80" />
+      </f7-list-item>
+      <f7-list-item
+        title="Don't Stop Me Now"
+        after="$22"
+        subtitle="Queen"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+        >
+        <img slot="media" src="http://lorempixel.com/160/160/people/2" width="80" />
+      </f7-list-item>
+      <f7-list-item
+        title="Billie Jean"
+        after="$16"
+        subtitle="Michael Jackson"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+        >
+        <img slot="media" src="http://lorempixel.com/160/160/people/3" width="80" />
+      </f7-list-item>
+    </f7-list>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7List, f7ListItem, f7NavRight, f7Link, f7Icon } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7Block,
+      f7List,
+      f7ListItem,
+      f7NavRight,
+      f7Link,
+      f7Icon,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/statusbar.vue b/examples/kitchen-sink/pages/statusbar.vue
index bfb92af..68c857a 100644
--- a/examples/kitchen-sink/pages/statusbar.vue
+++ b/examples/kitchen-sink/pages/statusbar.vue
@@ -1,26 +1,33 @@
 <template>
   <f7-page>
     <f7-navbar title="Statusbar Overlay" back-link="Back"></f7-navbar>
-    <div class="block block-strong">
+    <f7-block strong>
       <p>Framework7 automatically detects if your app in full screen mode, and automatically shows statusbar overlay if app is in full screen mode (or hides statusbar if app is not in full screen mode). Its visibility can be forced using app parameters or using API:</p>
-      <p class="row">
-        <a class="col button button-raised" @click="showStatusbar">Show Statusbar</a>
-        <a class="col button button-raised" @click="hideStatusbar">Hide Statusbar</a>
-      </p>
-    </div>
+      <f7-row tag="p">
+        <f7-button raised class="col" @click="showStatusbar">Show Statusbar</f7-button>
+        <f7-button raised class="col" @click="hideStatusbar">Hide Statusbar</f7-button>
+      </f7-row>
+    </f7-block>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7Row, f7Button } from 'framework7-vue';
 
   export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7Block,
+      f7Row,
+      f7Button,
+    },
     methods: {
-      showStatusbar: function () {
+      showStatusbar() {
         this.$f7.statusbar.show();
       },
-      hideStatusbar: function () {
+      hideStatusbar() {
         this.$f7.statusbar.hide();
       },
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/subnavbar-title.vue b/examples/kitchen-sink/pages/subnavbar-title.vue
index 041f656..1e0fccc 100644
--- a/examples/kitchen-sink/pages/subnavbar-title.vue
+++ b/examples/kitchen-sink/pages/subnavbar-title.vue
@@ -1,36 +1,26 @@
 <template>
-<f7-page>
-  <div class="navbar">
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a href="#" class="link back">
-          <i class="icon icon-back"></i>
-          <span class="ios-only">Back</span>
-        </a>
-      </div>
-      <div class="subnavbar">
-        <div class="subnavbar-inner">
-          <div class="title">Page Title</div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="block">
+  <f7-page>
+    <f7-navbar back-link="Back">
+      <f7-subnavbar title="Page Title"></f7-subnavbar>
+    </f7-navbar>
+    <f7-block>
       <p>It also possible to use Subnavbar to display page title and keep navbar only for actions.</p>
-    </div>
-    <div class="block">
+    </f7-block>
+    <f7-block>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, consequatur quia amet voluptate vero quasi, veniam, quisquam dolorum magni sint enim, harum expedita excepturi quas iure magnam minus voluptatem quaerat!</p>
       <p>Dolore laboriosam error magnam velit expedita recusandae, dolor asperiores unde, sint, veritatis illum ipsum? Nulla ratione nobis, ullam debitis. Inventore sapiente rem dolore eum ipsa totam perspiciatis cupiditate, amet maiores!</p>
       <p>Ratione quod minus ipsum maxime cum voluptate molestiae adipisci placeat ut illo, alias nobis perferendis magni odio sunt, porro, totam praesentium possimus! Autem inventore ut provident animi quae, impedit id!</p>
       <p>Aperiam ea ab harum. Quis dolorem cupiditate, incidunt mollitia ducimus voluptatem commodi! Odio quasi amet hic nesciunt, quibusdam, est vero repellat sapiente perferendis, optio laboriosam in culpa veniam alias ad.</p>
       <p>A fuga corporis harum velit maiores, quaerat accusantium cum aspernatur consequuntur dolor vel fugit omnis est dolorum delectus debitis aperiam distinctio eveniet vero nihil voluptatum culpa. Accusamus aliquid facere tenetur?</p>
-    </div>
-  </div>
-</f7-page>
+    </f7-block>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7Subnavbar } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar, f7Page, f7Block, f7Subnavbar,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/subnavbar.vue b/examples/kitchen-sink/pages/subnavbar.vue
index 42f4e76..acd5765 100644
--- a/examples/kitchen-sink/pages/subnavbar.vue
+++ b/examples/kitchen-sink/pages/subnavbar.vue
@@ -1,39 +1,28 @@
 <template>
-<f7-page>
-  <div class="navbar">
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a href="#" class="link back">
-          <i class="icon icon-back"></i>
-          <span class="ios-only">Back</span>
-        </a>
-      </div>
-      <div class="title">Subnavbar</div>
-      <div class="subnavbar">
-        <div class="subnavbar-inner">
-          <div class="segmented segmented-raised">
-            <button class="button">Link 1</button>
-            <button class="button">Link 2</button>
-            <button class="button">Link 3</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="block">
+  <f7-page>
+    <f7-navbar title="Subnavbar" back-link="Back">
+      <f7-subnavbar>
+        <f7-segmented raised>
+          <f7-button>Link 1</f7-button>
+          <f7-button>Link 2</f7-button>
+          <f7-button>Link 3</f7-button>
+        </f7-segmented>
+      </f7-subnavbar>
+    </f7-navbar>
+    <f7-block>
       <p>Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links or Search Bar. It also remains visible when Navbar hidden.</p>
-    </div>
-    <div class="list links-list">
-      <ul>
-        <li><a href="/subnavbar-title/">Subnavbar Title</a></li>
-      </ul>
-    </div>
-  </div>
-</f7-page>
+    </f7-block>
+    <f7-list>
+      <f7-list-item link="/subnavbar-title/" title="Subnavbar Title"></f7-list-item>
+    </f7-list>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Subnavbar, f7Segmented, f7Button, f7Block, f7List, f7ListItem } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar, f7Page, f7Subnavbar, f7Segmented, f7Button, f7Block, f7List, f7ListItem,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swipeout.vue b/examples/kitchen-sink/pages/swipeout.vue
index 20bc987..f9ff3f8 100644
--- a/examples/kitchen-sink/pages/swipeout.vue
+++ b/examples/kitchen-sink/pages/swipeout.vue
@@ -1,349 +1,257 @@
 <template>
   <f7-page>
-    <div class="navbar">
-      <div class="navbar-inner sliding">
-        <div class="left">
-            <a href="#" class="link back">
-              <i class="icon icon-back"></i>
-              <span class="ios-only">Back</span>
-            </a>
-          </div>
-        <div class="title">Swipeout</div>
-      </div>
-    </div>
-    <div class="block">
+    <f7-navbar title="Swipeout" back-link="Back"></f7-navbar>
+
+    <f7-block>
       <p>
         Swipe out actions on list elements is one of the most awesome F7 features. It allows you to call hidden menu for each list element where you can put default ready-to use delete button or any other buttons for some required actions.
       </p>
-    </div>
+    </f7-block>
+
     <f7-block-title>Swipe to delete with confirm modal</f7-block-title>
-    <div class="list">
-      <ul>
-        <li class="swipeout">
-          <div class="item-content swipeout-content">
-            <div class="item-media"><i class="icon icon-f7"></i>
-            </div>
-            <div class="item-inner">
-              <div class="item-title">Swipe left on me please</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
-          </div>
-        </li>
-        <li class="swipeout">
-          <div class="item-content swipeout-content">
-            <div class="item-media"> <i class="icon icon-f7"></i>
-            </div>
-            <div class="item-inner">
-              <div class="item-title">Swipe left on me too</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-media">
-              <i class="icon icon-f7"></i>
-            </div>
-            <div class="item-inner">
-              <div class="item-title">I am not removable</div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
+    <f7-list>
+      <f7-list-item
+        swipeout
+        title="Swipe left on me please">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button delete confirm-text="Are you sure you want to delete this item?">Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        swipeout
+        title="Swipe left on me too">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button delete confirm-text="Are you sure you want to delete this item?">Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        title="I am not removable">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+    </f7-list>
+
     <f7-block-title>Swipe to delete without confirm</f7-block-title>
-    <div class="list">
-      <ul>
-        <li class="swipeout">
-          <div class="item-content swipeout-content">
-            <div class="item-inner">
-              <div class="item-title">Swipe left on me please</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" class="swipeout-delete">Delete</a>
-          </div>
-        </li>
-        <li class="swipeout">
-          <div class="item-content swipeout-content">
-            <div class="item-inner">
-              <div class="item-title">Swipe left on me too</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" class="swipeout-delete">Delete</a>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">I am not removable</div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
+    <f7-list>
+      <f7-list-item
+        swipeout
+        title="Swipe left on me please">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button delete>Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        swipeout
+        title="Swipe left on me too">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button delete>Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        title="I am not removable">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+    </f7-list>
+
     <f7-block-title>Swipe for actions</f7-block-title>
-    <div class="list">
-      <ul>
-        <li class="swipeout">
-          <div class="item-content swipeout-content">
-            <div class="item-media">
-              <i class="icon icon-f7"></i>
-            </div>
-            <div class="item-inner">
-              <div class="item-title">Swipe left on me please</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" @click="more">More</a>
-            <a href="#" class="swipeout-delete">Delete</a>
-          </div>
-        </li>
-        <li class="swipeout">
-          <div class="item-content swipeout-content">
-            <div class="item-media">
-              <i class="icon icon-f7"></i>
-            </div>
-            <div class="item-inner">
-              <div class="item-title">Swipe left on me too</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" @click="more">More</a>
-            <a href="#" class="swipeout-delete">Delete</a>
-          </div>
-        </li>
-        <li class="swipeout">
-          <div class="item-content swipeout-content">
-            <div class="item-media">
-              <i class="icon icon-f7"></i>
-            </div>
-            <div class="item-inner">
-              <div class="item-title">You can't delete me</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" @click="more">More</a>
-          </div>
-        </li>
-      </ul>
-    </div>
+    <f7-list>
+      <f7-list-item
+        swipeout
+        title="Swipe left on me please">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button @click="more">More</f7-swipeout-button>
+          <f7-swipeout-button delete>Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        swipeout
+        title="Swipe left on me too">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button @click="more">More</f7-swipeout-button>
+          <f7-swipeout-button delete>Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        swipeout
+        title="You can't delete me">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button @click="more">More</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+    </f7-list>
+
     <f7-block-title>With callback on remove</f7-block-title>
-    <div class="list">
-      <ul>
-        <li class="swipeout" @swipeout:deleted="onDeleted">
-          <div class="item-content swipeout-content">
-            <div class="item-inner">
-              <div class="item-title">Swipe left on me please</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" class="swipeout-delete">Delete</a>
-          </div>
-        </li>
-        <li class="swipeout" @swipeout:deleted="onDeleted">
-          <div class="item-content swipeout-content">
-            <div class="item-inner">
-              <div class="item-title">Swipe left on me too</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" class="swipeout-delete">Delete</a>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">I am not removable</div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div class="block-title">With actions on left side (swipe to right)</div>
-    <div class="list">
-      <ul>
-        <li class="swipeout">
-          <div class="item-content swipeout-content">
-            <div class="item-media">
-              <i class="icon icon-f7"></i>
-            </div>
-            <div class="item-inner">
-              <div class="item-title">Swipe right on me please</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-left">
-            <a href="#" class="color-green" @click="reply">Reply</a>
-            <a href="#" class="color-blue" @click="forward">Forward</a>
-          </div>
-        </li>
-        <li class="swipeout">
-          <div class="item-content swipeout-content">
-            <div class="item-media">
-              <i class="icon icon-f7"></i>
-            </div>
-            <div class="item-inner">
-              <div class="item-title">Swipe right on me too</div>
-            </div>
-          </div>
-          <div class="swipeout-actions-left">
-            <a href="#" class="color-green" @click="reply">Reply</a>
-            <a href="#" class="color-blue" @click="forward">Forward</a>
-          </div>
-        </li>
-      </ul>
-    </div>
+    <f7-list>
+      <f7-list-item
+        swipeout
+        @swipeout:deleted="onDeleted"
+        title="Swipe left on me please">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button delete>Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        swipeout
+        @swipeout:deleted="onDeleted"
+        title="Swipe left on me too">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button delete>Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        title="I am not removable">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+      </f7-list-item>
+    </f7-list>
+
+    <f7-block-title>With actions on left side (swipe to right)</f7-block-title>
+    <f7-list>
+      <f7-list-item
+        swipeout
+        title="Swipe right on me please">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions left>
+          <f7-swipeout-button color="green" @click="reply">Reply</f7-swipeout-button>
+          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        swipeout
+        title="Swipe right on me too">
+        <f7-icon slot="media" icon="icon-f7"></f7-icon>
+        <f7-swipeout-actions left>
+          <f7-swipeout-button color="green" @click="reply">Reply</f7-swipeout-button>
+          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+    </f7-list>
+
     <f7-block-title>On both sides with overswipes</f7-block-title>
-    <div class="list media-list">
-      <ul>
-        <li class="swipeout">
-          <div class="swipeout-content">
-            <a href="#" class="item-link item-content">
-              <div class="item-inner">
-                <div class="item-title-row">
-                  <div class="item-title">Facebook</div>
-                  <div class="item-after">17:14</div>
-                </div>
-                <div class="item-subtitle">New messages from John Doe</div>
-                <div class="item-text">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
-                </div>
-              </div>
-            </a>
-          </div>
-          <div class="swipeout-actions-left">
-            <a href="#" class="color-green swipeout-overswipe" @click="reply">Reply</a>
-            <a href="#" class="color-blue" @click="forward">Forward</a>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" @click="more">More</a>
-            <a href="#" class="color-orange" @click="mark">Mark</a>
-            <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a>
-          </div>
-        </li>
-        <li class="swipeout">
-          <div class="swipeout-content">
-            <a href="#" class="item-link item-content">
-              <div class="item-inner">
-                <div class="item-title-row">
-                  <div class="item-title">John Doe (via Twitter)</div>
-                  <div class="item-after">17:11</div>
-                </div>
-                <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
-                <div class="item-text">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
-                </div>
-              </div>
-            </a>
-          </div>
-          <div class="swipeout-actions-left">
-            <a href="#" class="color-green swipeout-overswipe" @click="reply">Reply</a>
-            <a href="#" class="color-blue" @click="forward">Forward</a>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" @click="more">More</a>
-            <a href="#" class="color-orange" @click="mark">Mark</a>
-            <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a>
-          </div>
-        </li>
-        <li class="swipeout">
-          <div class="swipeout-content">
-            <a href="#" class="item-link item-content">
-              <div class="item-inner">
-                <div class="item-title-row">
-                  <div class="item-title">Facebook</div>
-                  <div class="item-after">16:48</div>
-                </div>
-                <div class="item-subtitle">New messages from John Doe</div>
-                <div class="item-text">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
-                </div>
-              </div>
-            </a>
-          </div>
-          <div class="swipeout-actions-left">
-            <a href="#" class="color-green swipeout-overswipe" @click="reply">Reply</a>
-            <a href="#" class="color-blue" @click="forward">Forward</a>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" @click="more">More</a>
-            <a href="#" class="color-orange" @click="mark">Mark</a>
-            <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a>
-          </div>
-        </li>
-        <li class="swipeout">
-          <div class="swipeout-content">
-            <a href="#" class="item-link item-content">
-              <div class="item-inner">
-                <div class="item-title-row">
-                  <div class="item-title">John Doe (via Twitter)</div>
-                  <div class="item-after">15:32</div>
-                </div>
-                <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
-                <div class="item-text">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
-                </div>
-              </div>
-            </a>
-          </div>
-          <div class="swipeout-actions-left">
-            <a href="#" class="color-green swipeout-overswipe" @click="reply">Reply</a>
-            <a href="#" class="color-blue" @click="forward">Forward</a>
-          </div>
-          <div class="swipeout-actions-right">
-            <a href="#" @click="more">More</a>
-            <a href="#" class="color-orange" @click="mark">Mark</a>
-            <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a>
-          </div>
-        </li>
-      </ul>
-    </div>
+    <f7-list media-list>
+      <f7-list-item
+        swipeout
+        title="Facebook"
+        after="17:14"
+        subtitle="New messages from John Doe"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      >
+        <f7-swipeout-actions left>
+          <f7-swipeout-button overswipe color="green" @click="reply">Reply</f7-swipeout-button>
+          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
+        </f7-swipeout-actions>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button @click="more">More</f7-swipeout-button>
+          <f7-swipeout-button color="orange" @click="mark">Mark</f7-swipeout-button>
+          <f7-swipeout-button delete overswipe confirm-text="Are you sure you want to delete this item?">Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        swipeout
+        title="John Doe (via Twitter)"
+        after="17:11"
+        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      >
+        <f7-swipeout-actions left>
+          <f7-swipeout-button overswipe color="green" @click="reply">Reply</f7-swipeout-button>
+          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
+        </f7-swipeout-actions>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button @click="more">More</f7-swipeout-button>
+          <f7-swipeout-button color="orange" @click="mark">Mark</f7-swipeout-button>
+          <f7-swipeout-button delete overswipe confirm-text="Are you sure you want to delete this item?">Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        swipeout
+        title="Facebook"
+        after="16:48"
+        subtitle="New messages from John Doe"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      >
+        <f7-swipeout-actions left>
+          <f7-swipeout-button overswipe color="green" @click="reply">Reply</f7-swipeout-button>
+          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
+        </f7-swipeout-actions>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button @click="more">More</f7-swipeout-button>
+          <f7-swipeout-button color="orange" @click="mark">Mark</f7-swipeout-button>
+          <f7-swipeout-button delete overswipe confirm-text="Are you sure you want to delete this item?">Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+      <f7-list-item
+        swipeout
+        title="John Doe (via Twitter)"
+        after="15:32"
+        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+      >
+        <f7-swipeout-actions left>
+          <f7-swipeout-button overswipe color="green" @click="reply">Reply</f7-swipeout-button>
+          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
+        </f7-swipeout-actions>
+        <f7-swipeout-actions right>
+          <f7-swipeout-button @click="more">More</f7-swipeout-button>
+          <f7-swipeout-button color="orange" @click="mark">Mark</f7-swipeout-button>
+          <f7-swipeout-button delete overswipe confirm-text="Are you sure you want to delete this item?">Delete</f7-swipeout-button>
+        </f7-swipeout-actions>
+      </f7-list-item>
+    </f7-list>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle, f7List, f7ListItem, f7Icon, f7SwipeoutActions, f7SwipeoutButton, f7Block } from 'framework7-vue';
 
   export default {
     components: {
       f7Navbar,
       f7Page,
       f7BlockTitle,
+      f7List,
+      f7ListItem,
+      f7Icon,
+      f7SwipeoutActions,
+      f7SwipeoutButton,
+      f7Block,
     },
     methods: {
-      more: function () {
-        var self = this;
+      more() {
+        const self = this;
         self.actions.open();
       },
-      mark: function () {
-        var app = this.$f7;
+      mark() {
+        const app = this.$f7;
         app.dialog.alert('Mark');
       },
-      reply: function () {
-        var app = this.$f7;
+      reply() {
+        const app = this.$f7;
         app.dialog.alert('Reply');
       },
-      forward: function () {
-        var app = this.$f7;
+      forward() {
+        const app = this.$f7;
         app.dialog.alert('Forward');
       },
-      onDeleted: function () {
-        var app = this.$f7;
+      onDeleted() {
+        const app = this.$f7;
         app.dialog.alert('Thanks, item removed!');
       },
     },
     on: {
       pageBeforeRemove() {
-        var self = this;
+        const self = this;
         self.actions.destroy();
       },
-      pageInit: function () {
-        var self = this;
-        var app = self.$f7;
+      pageInit() {
+        const self = this;
+        const app = self.$f7;
         self.actions = app.actions.create({
           buttons: [
             [
@@ -362,11 +270,11 @@
               {
                 text: 'Cancel',
                 bold: true,
-              }
-            ]
+              },
+            ],
           ],
-        })
+        });
       },
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-3d-coverflow.vue b/examples/kitchen-sink/pages/swiper-3d-coverflow.vue
index 6f14c79..6aed40c 100644
--- a/examples/kitchen-sink/pages/swiper-3d-coverflow.vue
+++ b/examples/kitchen-sink/pages/swiper-3d-coverflow.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="3D Coverflow Effect" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="3D Coverflow Effect" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination"}' data-effect="coverflow" data-slides-per-view="auto" data-centered-slides="true" class="swiper-container swiper-init demo-swiper demo-swiper-coverflow">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -16,11 +15,15 @@
         <div style="background-image:url(http://lorempixel.com/800/800/nature/9/)" class="swiper-slide">Slide 9</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-3d-cube.vue b/examples/kitchen-sink/pages/swiper-3d-cube.vue
index cbf6746..0995a93 100644
--- a/examples/kitchen-sink/pages/swiper-3d-cube.vue
+++ b/examples/kitchen-sink/pages/swiper-3d-cube.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="3D Cube" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="3D Cube" back-link="Back"></f7-navbar>
     <div data-effect="cube" class="swiper-container swiper-init demo-swiper demo-swiper-cube">
       <div class="swiper-wrapper">
         <div style="background-image:url(http://lorempixel.com/800/800/people/1/)" class="swiper-slide">Slide 1</div>
@@ -15,11 +14,15 @@
         <div style="background-image:url(http://lorempixel.com/800/800/people/9/)" class="swiper-slide">Slide 9</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-3d-flip.vue b/examples/kitchen-sink/pages/swiper-3d-flip.vue
index 4598c62..fada346 100644
--- a/examples/kitchen-sink/pages/swiper-3d-flip.vue
+++ b/examples/kitchen-sink/pages/swiper-3d-flip.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="3D Flip Effect" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="3D Flip Effect" back-link="Back"></f7-navbar>
     <div data-effect="flip" class="swiper-container swiper-init demo-swiper demo-swiper-cube">
       <div class="swiper-wrapper">
         <div style="background-image:url(http://lorempixel.com/800/800/people/1/)" class="swiper-slide">Slide 1</div>
@@ -14,11 +13,15 @@
         <div style="background-image:url(http://lorempixel.com/800/800/people/8/)" class="swiper-slide">Slide 8</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-custom-controls.vue b/examples/kitchen-sink/pages/swiper-custom-controls.vue
index 13564e7..e358b41 100644
--- a/examples/kitchen-sink/pages/swiper-custom-controls.vue
+++ b/examples/kitchen-sink/pages/swiper-custom-controls.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Custom Controls" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Custom Controls" back-link="Back"></f7-navbar>
     <div class="demo-swiper-custom">
       <div data-pagination='{"el": ".swiper-pagination", "clickable": true}' data-navigation='{"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}' data-space-between="0" class="swiper-container swiper-init">
         <div class="swiper-pagination"></div>
@@ -17,11 +16,15 @@
         <div class="swiper-button-next"></div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-fade.vue b/examples/kitchen-sink/pages/swiper-fade.vue
index 16bb40f..79ab32e 100644
--- a/examples/kitchen-sink/pages/swiper-fade.vue
+++ b/examples/kitchen-sink/pages/swiper-fade.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Fade Effect" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Fade Effect" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination"}' data-effect="fade" class="swiper-container swiper-init demo-swiper demo-swiper-fade">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -11,11 +10,15 @@
         <div style="background-image:url(http://lorempixel.com/1024/1024/people/4/)" class="swiper-slide"></div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-gallery.vue b/examples/kitchen-sink/pages/swiper-gallery.vue
index a7dc832..9136530 100644
--- a/examples/kitchen-sink/pages/swiper-gallery.vue
+++ b/examples/kitchen-sink/pages/swiper-gallery.vue
@@ -41,34 +41,38 @@
   import { f7Navbar, f7Page } from 'framework7-vue';
 
   export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
     on: {
       pageBeforeRemove() {
-        var self = this;
+        const self = this;
         self.swiperTop.destroy();
         self.swiperThumbs.destroy();
       },
       pageInit() {
-        var self = this;
-        var swiperTop = self.$f7.swiper.create('.demo-swiper-gallery-top', {
-            spaceBetween: 10,
-            navigation: {
-              nextEl: '.swiper-button-next',
-              prevEl: '.swiper-button-prev',
-            },
+        const self = this;
+        const swiperTop = self.$f7.swiper.create('.demo-swiper-gallery-top', {
+          spaceBetween: 10,
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+          },
         });
-        var swiperThumbs = self.$f7.swiper.create('.demo-swiper-gallery-thumbs', {
-            slidesPerView: 'auto',
-            spaceBetween: 10,
-            centeredSlides: true,
-            touchRatio: 0.2,
-            slideToClickedSlide: true
+        const swiperThumbs = self.$f7.swiper.create('.demo-swiper-gallery-thumbs', {
+          slidesPerView: 'auto',
+          spaceBetween: 10,
+          centeredSlides: true,
+          touchRatio: 0.2,
+          slideToClickedSlide: true,
         });
         swiperTop.controller.control = swiperThumbs;
         swiperThumbs.controller.control = swiperTop;
 
         self.swiperTop = swiperTop;
         self.swiperThumbs = swiperThumbs;
-      }
-    }
-  }
+      },
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-horizontal.vue b/examples/kitchen-sink/pages/swiper-horizontal.vue
index 8324c93..e94441d 100644
--- a/examples/kitchen-sink/pages/swiper-horizontal.vue
+++ b/examples/kitchen-sink/pages/swiper-horizontal.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Swiper Horizontal" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Swiper Horizontal" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination", "hideOnClick": true}' class="swiper-container swiper-init demo-swiper">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -17,11 +16,15 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-lazy.vue b/examples/kitchen-sink/pages/swiper-lazy.vue
index 0f4eee3..9ccb524 100644
--- a/examples/kitchen-sink/pages/swiper-lazy.vue
+++ b/examples/kitchen-sink/pages/swiper-lazy.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Slider Lazy Loading" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Slider Lazy Loading" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination"}' data-navigation='{"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}' data-lazy='{"enabled": true}' class="swiper-container swiper-init demo-swiper-lazy">
       <div class="swiper-wrapper">
         <div class="swiper-slide"><img data-src="http://lorempixel.com/1600/1200/nature/1/" class="swiper-lazy"/>
@@ -27,11 +26,15 @@
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-loop.vue b/examples/kitchen-sink/pages/swiper-loop.vue
index 3a3e4c4..5936cf5 100644
--- a/examples/kitchen-sink/pages/swiper-loop.vue
+++ b/examples/kitchen-sink/pages/swiper-loop.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Infinite Loop Mode" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Infinite Loop Mode" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination"}' data-loop="true" class="swiper-container swiper-init demo-swiper">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -17,11 +16,15 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-multiple.vue b/examples/kitchen-sink/pages/swiper-multiple.vue
index c32c45a..a5c5174 100644
--- a/examples/kitchen-sink/pages/swiper-multiple.vue
+++ b/examples/kitchen-sink/pages/swiper-multiple.vue
@@ -1,8 +1,7 @@
 <template>
-<f7-page>
-  <f7-navbar title="Multiple Swipers" back-link="Back"></f7-navbar>
-  <div class="page-content">
-    <div class="block-title">1 Slide Per View, 50px Between</div>
+  <f7-page>
+    <f7-navbar title="Multiple Swipers" back-link="Back"></f7-navbar>
+    <f7-block-title>1 Slide Per View, 50px Between</f7-block-title>
     <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" class="swiper-container swiper-init demo-swiper-multiple">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -18,7 +17,7 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-    <div class="block-title">2 Slides Per View, 20px Between</div>
+    <f7-block-title>2 Slides Per View, 20px Between</f7-block-title>
     <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="20" data-slides-per-view="2" class="swiper-container swiper-init demo-swiper-multiple">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -34,7 +33,7 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-    <div class="block-title">3 Slides Per View, 10px Between</div>
+    <f7-block-title>3 Slides Per View, 10px Between</f7-block-title>
     <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" data-slides-per-view="3" class="swiper-container swiper-init demo-swiper-multiple">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -50,7 +49,7 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-    <div class="block-title">Auto Slides Per View + Centered</div>
+    <f7-block-title>Auto Slides Per View + Centered</f7-block-title>
     <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" data-slides-per-view="auto" data-centered-slides="true" class="swiper-container swiper-init demo-swiper-multiple demo-swiper-multiple-auto">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -66,7 +65,7 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-    <div class="block-title">Vertical, 10px Between</div>
+    <f7-block-title>Vertical, 10px Between</f7-block-title>
     <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" data-direction="vertical" class="swiper-container swiper-init demo-swiper-multiple">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -93,8 +92,7 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
diff --git a/examples/kitchen-sink/pages/swiper-nested.vue b/examples/kitchen-sink/pages/swiper-nested.vue
index 103d4f0..155f3fb 100644
--- a/examples/kitchen-sink/pages/swiper-nested.vue
+++ b/examples/kitchen-sink/pages/swiper-nested.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Nested Swipers" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Nested Swipers" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination-h"}' class="swiper-container swiper-init demo-swiper">
       <div class="swiper-pagination swiper-pagination-h"></div>
       <div class="swiper-wrapper">
@@ -20,11 +19,15 @@
         <div class="swiper-slide">Horizontal Slide 4</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-pagination-fraction.vue b/examples/kitchen-sink/pages/swiper-pagination-fraction.vue
index 0fc69f0..3cc5695 100644
--- a/examples/kitchen-sink/pages/swiper-pagination-fraction.vue
+++ b/examples/kitchen-sink/pages/swiper-pagination-fraction.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Pagination Fraction" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Pagination Fraction" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination", "type": "fraction"}' class="swiper-container swiper-init demo-swiper">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -17,11 +16,15 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-pagination-progress.vue b/examples/kitchen-sink/pages/swiper-pagination-progress.vue
index eccaaf0..4033d7a 100644
--- a/examples/kitchen-sink/pages/swiper-pagination-progress.vue
+++ b/examples/kitchen-sink/pages/swiper-pagination-progress.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Progress Pagination" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Progress Pagination" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination", "type": "progressbar"}' class="swiper-container swiper-init demo-swiper">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -17,11 +16,15 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-parallax.vue b/examples/kitchen-sink/pages/swiper-parallax.vue
index 739557d..1085915 100644
--- a/examples/kitchen-sink/pages/swiper-parallax.vue
+++ b/examples/kitchen-sink/pages/swiper-parallax.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Parallax" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Parallax" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination"}' data-navigation='{"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}' data-parallax="true" data-speed="600" class="swiper-container swiper-init demo-swiper-parallax">
       <div data-swiper-parallax="-23%" style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)" class="swiper-parallax-bg"></div>
       <div class="swiper-pagination color-white"></div>
@@ -31,11 +30,15 @@
         </div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-scrollbar.vue b/examples/kitchen-sink/pages/swiper-scrollbar.vue
index dbd0dfe..66f517f 100644
--- a/examples/kitchen-sink/pages/swiper-scrollbar.vue
+++ b/examples/kitchen-sink/pages/swiper-scrollbar.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Scrollbar" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Scrollbar" back-link="Back"></f7-navbar>
     <div data-scrollbar='{"el": ".swiper-scrollbar"}' class="swiper-container swiper-init demo-swiper">
       <div class="swiper-pagination"></div>
       <div class="swiper-scrollbar"></div>
@@ -18,11 +17,15 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-space-between.vue b/examples/kitchen-sink/pages/swiper-space-between.vue
index 3ec5987..22bf512 100644
--- a/examples/kitchen-sink/pages/swiper-space-between.vue
+++ b/examples/kitchen-sink/pages/swiper-space-between.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Space Between Slides" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Space Between Slides" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination", "hideOnClick": true}' data-space-between="50" class="swiper-container swiper-init demo-swiper">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -17,11 +16,15 @@
         <div class="swiper-slide ks-slide-white">Slide 10</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-vertical.vue b/examples/kitchen-sink/pages/swiper-vertical.vue
index 64b14c7..7b76d35 100644
--- a/examples/kitchen-sink/pages/swiper-vertical.vue
+++ b/examples/kitchen-sink/pages/swiper-vertical.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Vertical Swiper" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Vertical Swiper" back-link="Back"></f7-navbar>
     <div data-direction="vertical" data-pagination='{"el": ".swiper-pagination", "hideOnClick": true}' class="swiper-container swiper-init demo-swiper">
       <div class="swiper-pagination"></div>
       <div class="swiper-wrapper">
@@ -17,11 +16,15 @@
         <div class="swiper-slide">Slide 10</div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper-zoom.vue b/examples/kitchen-sink/pages/swiper-zoom.vue
index 570e2f2..718bd14 100644
--- a/examples/kitchen-sink/pages/swiper-zoom.vue
+++ b/examples/kitchen-sink/pages/swiper-zoom.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Zoom" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Zoom" back-link="Back"></f7-navbar>
     <div data-pagination='{"el": ".swiper-pagination"}' data-zoom='{"enabled": true}' data-navigation='{"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}' class="swiper-container swiper-init demo-swiper">
       <div class="swiper-wrapper">
         <div class="swiper-slide">
@@ -27,11 +26,15 @@
       <div class="swiper-button-prev"></div>
       <div class="swiper-pagination"></div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/swiper.vue b/examples/kitchen-sink/pages/swiper.vue
index c82d5da..4688a2b 100644
--- a/examples/kitchen-sink/pages/swiper.vue
+++ b/examples/kitchen-sink/pages/swiper.vue
@@ -1,16 +1,6 @@
 <template>
-<f7-page>
-  <div class="navbar">
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a href="#" class="link back"> <i class="icon icon-back"></i>
-          <span class="ios-only">Back</span>
-        </a>
-      </div>
-      <div class="title">Swiper Slider</div>
-    </div>
-  </div>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Swiper Slider" back-link="Back"></f7-navbar>
     <div class="block">
       <p>
         Framework7 comes with powerful and most modern touch slider ever -
@@ -76,11 +66,15 @@
         </li>
       </ul>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/tabbar-labels.vue b/examples/kitchen-sink/pages/tabbar-labels.vue
index d7f2c7d..18799c4 100644
--- a/examples/kitchen-sink/pages/tabbar-labels.vue
+++ b/examples/kitchen-sink/pages/tabbar-labels.vue
@@ -1,47 +1,22 @@
 <template>
-  <f7-page>
-    <div class="navbar">
-      <div class="navbar-inner sliding">
-        <div class="left">
-            <a href="#" class="link back">
-              <i class="icon icon-back"></i>
-              <span class="ios-only">Back</span>
-            </a>
-          </div>
-        <div class="title">Tabbar Labels</div>
-        <div class="right md-only">
-          <a class="link" @click="toggleToolbarPosition">
-            <i class="icon material-icons rotate-icon">compare_arrows</i>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="toolbar tabbar tabbar-labels">
-      <div class="toolbar-inner">
-        <a href="#tab-1" class="tab-link tab-link-active">
-          <i class="icon f7-icons ios-only">email</i>
-          <i class="icon icon-fill f7-icons ios-only">email_fill</i>
-          <i class="icon material-icons md-only">email</i>
-          <span class="tabbar-label">Inbox</span>
-        </a>
-        <a href="#tab-2" class="tab-link">
-          <i class="icon f7-icons ios-only">today<span class="badge color-red">5</span></i>
-          <i class="icon icon-fill f7-icons ios-only">today_fill<span class="badge color-red">5</span></i>
-          <i class="icon material-icons md-only">today<span class="badge color-red">5</span></i>
-          <span class="tabbar-label">Calendar</span>
-        </a>
-        <a href="#tab-3" class="tab-link">
-          <i class="icon f7-icons ios-only">cloud</i>
-          <i class="icon icon-fill f7-icons ios-only">cloud_fill</i>
-          <i class="icon material-icons md-only">file_upload</i>
-          <span class="tabbar-label">Upload</span>
-        </a>
-      </div>
-    </div>
-    <div class="tabs">
-      <div id="tab-1" class="page-content tab tab-active">
-        <div class="block">
-          <p><b>Tab 1 content</b></p>
+  <f7-page :page-content="false">
+    <f7-navbar title="Tabbar Labels" back-link="Back">
+      <f7-nav-right v-if="$theme.md">
+        <f7-link icon="material:compare_arrows" @click="toggleToolbarPosition">
+          <i class="icon material-icons rotate-icon">compare_arrows</i>
+        </f7-link>
+      </f7-nav-right>
+    </f7-navbar>
+    <f7-toolbar tabbar labels>
+      <f7-link tab-link="#tab-1" tab-link-active text="Tab 1" icon-if-ios="f7:email_fill" icon-if-md="material:email"></f7-link>
+      <f7-link tab-link="#tab-2" text="Tab 2" icon-if-ios="f7:today_fill" icon-if-md="material:today"></f7-link>
+      <f7-link tab-link="#tab-3" text="Tab 3" icon-if-ios="f7:cloud_fill" icon-if-md="material:file_upload"></f7-link>
+    </f7-toolbar>
+
+    <f7-tabs>
+      <f7-tab id="tab-1" class="page-content" tab-active>
+        <f7-block>
+          <p>Tab 1 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
           <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
@@ -49,11 +24,11 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-      <div id="tab-2" class="page-content tab">
-        <div class="block">
-          <p><b>Tab 2 content</b></p>
+        </f7-block>
+      </f7-tab>
+      <f7-tab id="tab-2" class="page-content">
+        <f7-block>
+          <p>Tab 2 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
           <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
@@ -61,11 +36,11 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-      <div id="tab-3" class="page-content tab">
-        <div class="block">
-          <p><b>Tab 3 content</b></p>
+        </f7-block>
+      </f7-tab>
+      <f7-tab id="tab-3" class="page-content">
+        <f7-block>
+          <p>Tab 3 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
           <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
@@ -73,24 +48,22 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-    </div>
+        </f7-block>
+      </f7-tab>
+    </f7-tabs>
   </f7-page>
 </template>
-<style scoped>
-  .rotate-icon {
-    transform: rotate(90deg);
-  }
-</style>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar, f7NavRight } from 'framework7-vue';
 
   export default {
+    components: {
+      f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar, f7NavRight,
+    },
     methods: {
-      toggleToolbarPosition: function () {
+      toggleToolbarPosition() {
         this.$$(this.$el).find('.toolbar, .tabbar').toggleClass('toolbar-bottom-md');
       },
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/tabbar-scrollable.vue b/examples/kitchen-sink/pages/tabbar-scrollable.vue
index c4c331b..9fe1422 100644
--- a/examples/kitchen-sink/pages/tabbar-scrollable.vue
+++ b/examples/kitchen-sink/pages/tabbar-scrollable.vue
@@ -1,60 +1,56 @@
 <template>
-  <f7-page>
-    <div class="navbar">
-      <div class="navbar-inner sliding">
-        <div class="left">
-            <a href="#" class="link back">
-              <i class="icon icon-back"></i>
-              <span class="ios-only">Back</span>
-            </a>
-          </div>
-        <div class="title">Tabbar Scrollable</div>
-        <div class="right md-only">
-          <a class="link" @click="toggleToolbarPosition">
-            <i class="icon material-icons rotate-icon">compare_arrows</i>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="toolbar tabbar tabbar-scrollable">
-      <div class="toolbar-inner">
-        <a v-for="(tab, index) in tabs" :key="tab" :href="`#tab-${tab}`"
-         class="tab-link" :class="{ 'tab-link-active' : index === 0 }">
-         Tab {{tab}}
-         </a>
-      </div>
-    </div>
-    <div class="tabs">
-      <div v-for="(tab, index) in tabs" :key="tab" :id="`tab-${tab}`" class="page-content tab" :class="{ 'tab-active' : index === 0 }">
-        <div class="block">
+  <f7-page :page-content="false">
+    <f7-navbar title="Tabbar Scrollable" back-link="Back">
+      <f7-nav-right v-if="$theme.md">
+        <f7-link icon="material:compare_arrows" @click="toggleToolbarPosition">
+          <i class="icon material-icons rotate-icon">compare_arrows</i>
+        </f7-link>
+      </f7-nav-right>
+    </f7-navbar>
+    <f7-toolbar tabbar scrollable>
+      <f7-link
+        v-for="(tab, index) in tabs"
+        :key="tab"
+        :tab-link="`#tab-${tab}`"
+        :tab-link-active="index === 0"
+        >Tab {{tab}}</f7-link>
+    </f7-toolbar>
+    <f7-tabs>
+      <f7-tab
+        v-for="(tab, index) in tabs"
+        :key="tab"
+        :id="`tab-${tab}`"
+        class="page-content"
+        :tab-active="index === 0"
+      >
+        <f7-block>
           <p><b>Tab {{tab}} content</b></p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corrupti, quos asperiores unde aspernatur illum odio, eveniet. Fugiat magnam perspiciatis ex dignissimos, rerum modi ea nesciunt praesentium iusto optio rem?</p>
           <p>Illo debitis et recusandae, ipsum nisi nostrum vero delectus quasi. Quasi, consequatur! Corrupti, explicabo maxime incidunt fugit sint dicta saepe officiis sed expedita, minima porro! Ipsa dolores quia, delectus labore!</p>
           <p>At similique minima placeat magni molestias sunt deleniti repudiandae voluptatibus magnam quam esse reprehenderit dolor enim qui sed alias, laboriosam quaerat laborum iure repellat praesentium pariatur dolorum possimus veniam! Consectetur.</p>
           <p>Sunt, sed, magnam! Qui, suscipit. Beatae cum ullam necessitatibus eligendi, culpa rem excepturi consequatur quidem totam eum voluptates nihil, enim pariatur incidunt corporis sed facere magni earum tenetur rerum ea.</p>
           <p>Veniam nulla quis molestias voluptatem inventore consectetur iusto voluptatibus perferendis quisquam, cupiditate voluptates, tenetur vero magnam nisi animi praesentium atque adipisci optio quod aliquid vel delectus ad? Dicta deleniti, recusandae.</p>
-        </div>
-      </div>
-    </div>
+        </f7-block>
+      </f7-tab>
+    </f7-tabs>
   </f7-page>
 </template>
-<style scoped>
-  .rotate-icon {
-    transform: rotate(90deg);
-  }
-</style>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar, f7NavRight } from 'framework7-vue';
 
   export default {
-    data: function () {
+    components: {
+      f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar, f7NavRight,
+    },
+    data() {
       return {
-        tabs: [1,2,3,4,5,6,7,8,9,10],
-      }      },
+        tabs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      };
+    },
     methods: {
-      toggleToolbarPosition: function () {
+      toggleToolbarPosition() {
         this.$$(this.$el).find('.toolbar, .tabbar').toggleClass('toolbar-bottom-md');
       },
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/tabbar.vue b/examples/kitchen-sink/pages/tabbar.vue
index 9f3a667..d694401 100644
--- a/examples/kitchen-sink/pages/tabbar.vue
+++ b/examples/kitchen-sink/pages/tabbar.vue
@@ -1,32 +1,22 @@
 <template>
-  <f7-page>
-    <div class="navbar">
-      <div class="navbar-inner sliding">
-        <div class="left">
-            <a href="#" class="link back">
-              <i class="icon icon-back"></i>
-              <span class="ios-only">Back</span>
-            </a>
-          </div>
-        <div class="title">Tabbar</div>
-        <div class="right md-only">
-          <a class="link" @click="toggleToolbarPosition">
-            <i class="icon material-icons rotate-icon">compare_arrows</i>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="toolbar tabbar">
-      <div class="toolbar-inner">
-        <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
-        <a href="#tab-2" class="tab-link">Tab 2</a>
-        <a href="#tab-3" class="tab-link">Tab 3</a>
-      </div>
-    </div>
-    <div class="tabs">
-      <div id="tab-1" class="page-content tab tab-active">
-        <div class="block">
-          <p><b>Tab 1 content</b></p>
+  <f7-page :page-content="false">
+    <f7-navbar title="Tabbar" back-link="Back">
+      <f7-nav-right v-if="$theme.md">
+        <f7-link icon="material:compare_arrows" @click="toggleToolbarPosition">
+          <i class="icon material-icons rotate-icon">compare_arrows</i>
+        </f7-link>
+      </f7-nav-right>
+    </f7-navbar>
+    <f7-toolbar tabbar>
+      <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
+      <f7-link tab-link="#tab-2">Tab 2</f7-link>
+      <f7-link tab-link="#tab-3">Tab 3</f7-link>
+    </f7-toolbar>
+
+    <f7-tabs>
+      <f7-tab id="tab-1" class="page-content" tab-active>
+        <f7-block>
+          <p>Tab 1 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
           <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
@@ -34,11 +24,11 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-      <div id="tab-2" class="page-content tab">
-        <div class="block">
-          <p><b>Tab 2 content</b></p>
+        </f7-block>
+      </f7-tab>
+      <f7-tab id="tab-2" class="page-content">
+        <f7-block>
+          <p>Tab 2 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
           <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
@@ -46,11 +36,11 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-      <div id="tab-3" class="page-content tab">
-        <div class="block">
-          <p><b>Tab 3 content</b></p>
+        </f7-block>
+      </f7-tab>
+      <f7-tab id="tab-3" class="page-content">
+        <f7-block>
+          <p>Tab 3 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
           <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
@@ -58,24 +48,22 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-    </div>
+        </f7-block>
+      </f7-tab>
+    </f7-tabs>
   </f7-page>
 </template>
-<style scoped>
-  .rotate-icon {
-    transform: rotate(90deg);
-  }
-</style>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar, f7NavRight } from 'framework7-vue';
 
   export default {
+    components: {
+      f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar, f7NavRight,
+    },
     methods: {
-      toggleToolbarPosition: function () {
+      toggleToolbarPosition() {
         this.$$(this.$el).find('.toolbar, .tabbar').toggleClass('toolbar-bottom-md');
       },
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/tabs-animated.vue b/examples/kitchen-sink/pages/tabs-animated.vue
index 843be7b..fa6868d 100644
--- a/examples/kitchen-sink/pages/tabs-animated.vue
+++ b/examples/kitchen-sink/pages/tabs-animated.vue
@@ -1,17 +1,14 @@
 <template>
-<f7-page>
-  <f7-navbar title="Animated Tabs" back-link="Back"></f7-navbar>
-  <div class="toolbar tabbar">
-    <div class="toolbar-inner">
-      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
-      <a href="#tab-2" class="tab-link">Tab 2</a>
-      <a href="#tab-3" class="tab-link">Tab 3</a>
-    </div>
-  </div>
-  <div class="tabs-animated-wrap">
-    <div class="tabs">
-      <div id="tab-1" class="page-content tab tab-active">
-        <div class="block">
+  <f7-page :page-content="false">
+    <f7-navbar title="Animated Tabs" back-link="Back"></f7-navbar>
+    <f7-toolbar tabbar>
+      <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
+      <f7-link tab-link="#tab-2">Tab 2</f7-link>
+      <f7-link tab-link="#tab-3">Tab 3</f7-link>
+    </f7-toolbar>
+    <f7-tabs animated>
+      <f7-tab id="tab-1" class="page-content" tab-active>
+        <f7-block>
           <p>Tab 1 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
@@ -20,10 +17,10 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-      <div id="tab-2" class="page-content tab">
-        <div class="block">
+        </f7-block>
+      </f7-tab>
+      <f7-tab id="tab-2" class="page-content">
+        <f7-block>
           <p>Tab 2 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
@@ -32,10 +29,10 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-      <div id="tab-3" class="page-content tab">
-        <div class="block">
+        </f7-block>
+      </f7-tab>
+      <f7-tab id="tab-3" class="page-content">
+        <f7-block>
           <p>Tab 3 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
@@ -44,14 +41,17 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</f7-page>
+        </f7-block>
+      </f7-tab>
+    </f7-tabs>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/tabs-routable.vue b/examples/kitchen-sink/pages/tabs-routable.vue
index 1f93e49..97186e9 100644
--- a/examples/kitchen-sink/pages/tabs-routable.vue
+++ b/examples/kitchen-sink/pages/tabs-routable.vue
@@ -1,22 +1,24 @@
 <template>
-<f7-page>
-  <f7-navbar title="Tabs Routable" back-link="Back"></f7-navbar>
-  <div class="toolbar tabbar">
-    <div class="toolbar-inner">
-      <a href="./" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
-      <a href="tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
-      <a href="tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>
-    </div>
-  </div>
-  <div class="tabs">
-    <div class="page-content tab" id="tab1"></div>
-    <div class="page-content tab" id="tab2"></div>
-    <div class="page-content tab" id="tab3"></div>
-  </div>
-</f7-page>
+  <f7-page :page-content="false">
+    <f7-navbar title="Tabs Routable" back-link="Back"></f7-navbar>
+    <f7-toolbar tabbar>
+      <f7-link tab-link href="./" route-tab-id="tab1">Tab 1</f7-link>
+      <f7-link tab-link href="tab2/" route-tab-id="tab2">Tab 2</f7-link>
+      <f7-link tab-link href="tab3/" route-tab-id="tab3">Tab 3</f7-link>
+    </f7-toolbar>
+    <f7-tabs routable>
+      <f7-tab class="page-content" id="tab1"></f7-tab>
+      <f7-tab class="page-content" id="tab2"></f7-tab>
+      <f7-tab class="page-content" id="tab3"></f7-tab>
+    </f7-tabs>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/tabs-static.vue b/examples/kitchen-sink/pages/tabs-static.vue
index b92f666..03664ff 100644
--- a/examples/kitchen-sink/pages/tabs-static.vue
+++ b/examples/kitchen-sink/pages/tabs-static.vue
@@ -1,65 +1,57 @@
 <template>
-<f7-page>
-  <div class="navbar">
-    <div class="navbar-inner sliding">
-      <div class="left">
-          <a href="#" class="link back">
-            <i class="icon icon-back"></i>
-            <span class="ios-only">Back</span>
-          </a>
-        </div>
-      <div class="title">Static Tabs</div>
-    </div>
-  </div>
-  <div class="toolbar tabbar">
-    <div class="toolbar-inner">
-      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
-      <a href="#tab-2" class="tab-link">Tab 2</a>
-      <a href="#tab-3" class="tab-link">Tab 3</a>
-    </div>
-  </div>
-  <div class="tabs">
-    <div id="tab-1" class="page-content tab tab-active">
-      <div class="block">
-        <p>Tab 1 content</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
-        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
-        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
-        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!</p>
-        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
-        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
-        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-      </div>
-    </div>
-    <div id="tab-2" class="page-content tab">
-      <div class="block">
-        <p>Tab 2 content</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
-        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
-        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
-        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!</p>
-        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
-        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
-        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-      </div>
-    </div>
-    <div id="tab-3" class="page-content tab">
-      <div class="block">
-        <p>Tab 3 content</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
-        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
-        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
-        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!</p>
-        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
-        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
-        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-      </div>
-    </div>
-  </div>
-</f7-page>
+  <f7-page :page-content="false">
+    <f7-navbar title="Static Tabs" back-link="Back"></f7-navbar>
+    <f7-toolbar tabbar>
+      <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
+      <f7-link tab-link="#tab-2">Tab 2</f7-link>
+      <f7-link tab-link="#tab-3">Tab 3</f7-link>
+    </f7-toolbar>
+    <f7-tabs>
+      <f7-tab id="tab-1" class="page-content" tab-active>
+        <f7-block>
+          <p>Tab 1 content</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
+          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
+          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
+          <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!</p>
+          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
+          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
+          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
+        </f7-block>
+      </f7-tab>
+      <f7-tab id="tab-2" class="page-content">
+        <f7-block>
+          <p>Tab 2 content</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
+          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
+          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
+          <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!</p>
+          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
+          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
+          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
+        </f7-block>
+      </f7-tab>
+      <f7-tab id="tab-3" class="page-content">
+        <f7-block>
+          <p>Tab 3 content</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
+          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
+          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
+          <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!</p>
+          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
+          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
+          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
+        </f7-block>
+      </f7-tab>
+    </f7-tabs>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/tabs-swipeable.vue b/examples/kitchen-sink/pages/tabs-swipeable.vue
index ad59dce..150000d 100644
--- a/examples/kitchen-sink/pages/tabs-swipeable.vue
+++ b/examples/kitchen-sink/pages/tabs-swipeable.vue
@@ -1,17 +1,14 @@
 <template>
-<f7-page>
-  <f7-navbar title="Swipeable Tabs" back-link="Back"></f7-navbar>
-  <div class="toolbar tabbar">
-    <div class="toolbar-inner">
-      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
-      <a href="#tab-2" class="tab-link">Tab 2</a>
-      <a href="#tab-3" class="tab-link">Tab 3</a>
-    </div>
-  </div>
-  <div class="tabs-swipeable-wrap">
-    <div class="tabs">
-      <div id="tab-1" class="page-content tab tab-active">
-        <div class="block">
+  <f7-page :page-content="false">
+    <f7-navbar title="Swipeable Tabs" back-link="Back"></f7-navbar>
+    <f7-toolbar tabbar>
+      <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
+      <f7-link tab-link="#tab-2">Tab 2</f7-link>
+      <f7-link tab-link="#tab-3">Tab 3</f7-link>
+    </f7-toolbar>
+    <f7-tabs swipeable>
+      <f7-tab id="tab-1" class="page-content" tab-active>
+        <f7-block>
           <p>Tab 1 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
@@ -20,10 +17,10 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-      <div id="tab-2" class="page-content tab">
-        <div class="block">
+        </f7-block>
+      </f7-tab>
+      <f7-tab id="tab-2" class="page-content">
+        <f7-block>
           <p>Tab 2 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
@@ -32,10 +29,10 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-      <div id="tab-3" class="page-content tab">
-        <div class="block">
+        </f7-block>
+      </f7-tab>
+      <f7-tab id="tab-3" class="page-content">
+        <f7-block>
           <p>Tab 3 content</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
           <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
@@ -44,14 +41,17 @@
           <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
           <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
           <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</f7-page>
+        </f7-block>
+      </f7-tab>
+    </f7-tabs>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/tabs.vue b/examples/kitchen-sink/pages/tabs.vue
index f3d18c6..6478364 100644
--- a/examples/kitchen-sink/pages/tabs.vue
+++ b/examples/kitchen-sink/pages/tabs.vue
@@ -1,44 +1,23 @@
 <template>
-<f7-page>
-  <f7-navbar title="Tabs" back-link="Back"></f7-navbar>
-  <div class="page-content">
-    <div class="list">
-      <ul>
-        <li>
-          <a href="/tabs-static/" class="item-content item-link">
-            <div class="item-inner">
-              <div class="item-title">Static Tabs</div>
-            </div>
-          </a>
-        </li>
-        <li>
-          <a href="/tabs-animated/" class="item-content item-link">
-            <div class="item-inner">
-              <div class="item-title">Animated Tabs</div>
-            </div>
-          </a>
-        </li>
-        <li>
-          <a href="/tabs-swipeable/" class="item-content item-link">
-            <div class="item-inner">
-              <div class="item-title">Swipeable Tabs</div>
-            </div>
-          </a>
-        </li>
-        <li>
-          <a href="/tabs-routable/" class="item-content item-link">
-            <div class="item-inner">
-              <div class="item-title">Routable Tabs</div>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</f7-page>
+  <f7-page>
+    <f7-navbar title="Tabs" back-link="Back"></f7-navbar>
+    <f7-list>
+      <f7-list-item link="/tabs-static/" title="Static Tabs"></f7-list-item>
+      <f7-list-item link="/tabs-animated/" title="Animated Tabs"></f7-list-item>
+      <f7-list-item link="/tabs-swipeable/" title="Swipeable Tabs"></f7-list-item>
+      <f7-list-item link="/tabs-routable/" title="Routable Tabs"></f7-list-item>
+    </f7-list>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7List, f7ListItem } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7List,
+      f7ListItem,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/timeline-horizontal-calendar.vue b/examples/kitchen-sink/pages/timeline-horizontal-calendar.vue
index 0fc9d7b..0f2d7b7 100644
--- a/examples/kitchen-sink/pages/timeline-horizontal-calendar.vue
+++ b/examples/kitchen-sink/pages/timeline-horizontal-calendar.vue
@@ -1,17 +1,6 @@
 <template>
-<f7-page>
-  <div class="navbar no-shadow">
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a href="#" class="link back">
-          <i class="icon icon-back"></i>
-          <span class="ios-only">Back</span>
-        </a>
-      </div>
-      <div class="title">Horizontal Timeline Calendar</div>
-    </div>
-  </div>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar no-shadow title="Horizontal Timeline Calendar" back-link="Back"></f7-navbar>
     <div class="timeline timeline-horizontal col-33 tablet-15">
       <div class="timeline-year">
         <div class="timeline-year-title"><span>2016</span></div>
@@ -756,12 +745,16 @@
         </div>
       </div>
     </div>
-  </div>
-
-</f7-page>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7BlockTitle,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/timeline-horizontal.vue b/examples/kitchen-sink/pages/timeline-horizontal.vue
index b1fa87f..f6977ee 100644
--- a/examples/kitchen-sink/pages/timeline-horizontal.vue
+++ b/examples/kitchen-sink/pages/timeline-horizontal.vue
@@ -1,17 +1,6 @@
 <template>
-<f7-page>
-  <div class="navbar no-shadow">
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a href="#" class="link back">
-          <i class="icon icon-back"></i>
-          <span class="ios-only">Back</span>
-        </a>
-      </div>
-      <div class="title">Horizontal Timeline</div>
-    </div>
-  </div>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar no-shadow title="Horizontal Timeline" back-link="Back"></f7-navbar>
     <div class="timeline timeline-horizontal col-33 tablet-20">
       <div class="timeline-item">
         <div class="timeline-item-date">21 <small>DEC</small></div>
@@ -114,12 +103,16 @@
         </div>
       </div>
     </div>
-  </div>
-
-</f7-page>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar,
+      f7Page,
+      f7BlockTitle,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/timeline-vertical.vue b/examples/kitchen-sink/pages/timeline-vertical.vue
index b240741..5478809 100644
--- a/examples/kitchen-sink/pages/timeline-vertical.vue
+++ b/examples/kitchen-sink/pages/timeline-vertical.vue
@@ -1,7 +1,6 @@
 <template>
-<f7-page>
-  <f7-navbar title="Vertical Timeline" back-link="Back"></f7-navbar>
-  <div class="page-content">
+  <f7-page>
+    <f7-navbar title="Vertical Timeline" back-link="Back"></f7-navbar>
     <f7-block-title>Default</f7-block-title>
     <div class="timeline">
       <div class="timeline-item">
@@ -221,8 +220,7 @@
         </div>
       </div>
     </div>
-  </div>
-</f7-page>
+  </f7-page>
 </template>
 <script>
   import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
@@ -232,6 +230,6 @@
       f7Navbar,
       f7Page,
       f7BlockTitle,
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/timeline.vue b/examples/kitchen-sink/pages/timeline.vue
index c92de57..d0ac4da 100644
--- a/examples/kitchen-sink/pages/timeline.vue
+++ b/examples/kitchen-sink/pages/timeline.vue
@@ -1,24 +1,19 @@
 <template>
-<f7-page>
-  <f7-navbar title="Timeline" back-link="Back"></f7-navbar>
-  <div class="list links-list">
-    <ul>
-      <li>
-        <a href="/timeline-vertical/">Vertical Timeline</a>
-      </li>
-      <li>
-        <a href="/timeline-horizontal/">Horizontal Timeline</a>
-      </li>
-      <li>
-        <a href="/timeline-horizontal-calendar/">Calendar Timeline</a>
-      </li>
-    </ul>
-  </div>
-
-</f7-page>
+  <f7-page>
+    <f7-navbar title="Timeline" back-link="Back"></f7-navbar>
+    <f7-list>
+      <f7-list-item link="/timeline-vertical/" title="Vertical Timeline"></f7-list-item>
+      <f7-list-item link="/timeline-horizontal/" title="Horizontal Timeline"></f7-list-item>
+      <f7-list-item link="/timeline-horizontal-calendar/" title="Calendar Timeline"></f7-list-item>
+    </f7-list>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7List, f7ListItem } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar, f7Page, f7List, f7ListItem,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/toast.vue b/examples/kitchen-sink/pages/toast.vue
index edb9abf..0e78fb1 100644
--- a/examples/kitchen-sink/pages/toast.vue
+++ b/examples/kitchen-sink/pages/toast.vue
@@ -1,58 +1,61 @@
 <template>
   <f7-page>
     <f7-navbar title="Toast" back-link="Back"></f7-navbar>
-    <div class="block">
+    <f7-block>
       <p>Toasts provide brief feedback about an operation through a message on the screen.</p>
       <p>
-        <a href="#" class="button button-raised" @click="showToastBottom">Toast on Bottom</a>
+        <f7-button raised @click="showToastBottom">Toast on Bottom</f7-button>
       </p>
       <p>
-        <a href="#" class="button button-raised" @click="showToastTop">Toast on Top</a>
+        <f7-button raised @click="showToastTop">Toast on Top</f7-button>
       </p>
       <p>
-        <a href="#" class="button button-raised" @click="showToastCenter">Toast on Center</a>
+        <f7-button raised @click="showToastCenter">Toast on Center</f7-button>
       </p>
       <p>
-        <a href="#" class="button button-raised" @click="showToastIcon">Toast with icon</a>
+        <f7-button raised @click="showToastIcon">Toast with icon</f7-button>
       </p>
       <p>
-        <a href="#" class="button button-raised" @click="showToastLargeMessage">Toast with large message</a>
+        <f7-button raised @click="showToastLargeMessage">Toast with large message</f7-button>
       </p>
       <p>
-        <a href="#" class="button button-raised" @click="showToastWithButton">Toast with close button</a>
+        <f7-button raised @click="showToastWithButton">Toast with close button</f7-button>
       </p>
       <p>
-        <a href="#" class="button button-raised" @click="showToastWithCustomButton">Toast with custom button</a>
+        <f7-button raised @click="showToastWithCustomButton">Toast with custom button</f7-button>
       </p>
       <p>
-        <a href="#" class="button button-raised" @click="showToastWithCallback">Toast with callback on close</a>
+        <f7-button raised @click="showToastWithCallback">Toast with callback on close</f7-button>
       </p>
-    </div>
+    </f7-block>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Block, f7Button } from 'framework7-vue';
 
   export default {
+    components: {
+      f7Navbar, f7Page, f7Block, f7Button,
+    },
     methods: {
-      showToastBottom: function () {
-        var self = this;
+      showToastBottom() {
+        const self = this;
         // Create toast
         if (!self.toastBottom) {
           self.toastBottom = self.$f7.toast.create({
-            message: 'This is default bottom positioned toast',
+            text: 'This is default bottom positioned toast',
             closeTimeout: 2000,
           });
         }
         // Open it
         self.toastBottom.open();
       },
-      showToastTop: function () {
-        var self = this;
+      showToastTop() {
+        const self = this;
         // Create toast
         if (!self.toastTop) {
           self.toastTop = self.$f7.toast.create({
-            message: 'Top positioned toast',
+            text: 'Top positioned toast',
             position: 'top',
             closeTimeout: 2000,
           });
@@ -60,12 +63,12 @@
         // Open it
         self.toastTop.open();
       },
-      showToastCenter: function () {
-        var self = this;
+      showToastCenter() {
+        const self = this;
         // Create toast
         if (!self.toastCenter) {
           self.toastCenter = self.$f7.toast.create({
-            message: 'I\'m on center',
+            text: 'I\'m on center',
             position: 'center',
             closeTimeout: 2000,
           });
@@ -73,13 +76,13 @@
         // Open it
         self.toastCenter.open();
       },
-      showToastIcon: function () {
-        var self = this;
+      showToastIcon() {
+        const self = this;
         // Create toast
         if (!self.toastIcon) {
           self.toastIcon = self.$f7.toast.create({
             icon: self.$theme.ios ? '<i class="f7-icons">start</i>' : '<i class="material-icons">start</i>',
-            message: 'I\'m on center',
+            text: 'I\'m on center',
             position: 'center',
             closeTimeout: 2000,
           });
@@ -87,36 +90,36 @@
         // Open it
         self.toastIcon.open();
       },
-      showToastLargeMessage: function () {
-        var self = this;
+      showToastLargeMessage() {
+        const self = this;
         // Create toast
         if (!self.toastLargeMessage) {
           self.toastLargeMessage = self.$f7.toast.create({
-            message: 'This toast contains a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quae, ab. Delectus amet optio facere autem sapiente quisquam beatae culpa dolore.',
+            text: 'This toast contains a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quae, ab. Delectus amet optio facere autem sapiente quisquam beatae culpa dolore.',
             closeTimeout: 2000,
           });
         }
         // Open it
         self.toastLargeMessage.open();
       },
-      showToastWithButton: function () {
-        var self = this;
+      showToastWithButton() {
+        const self = this;
         // Create toast
         if (!self.toastWithButton) {
           self.toastWithButton = self.$f7.toast.create({
-            message: 'Toast with additional close button',
+            text: 'Toast with additional close button',
             closeButton: true,
           });
         }
         // Open it
         self.toastWithButton.open();
       },
-      showToastWithCustomButton: function () {
-        var self = this;
+      showToastWithCustomButton() {
+        const self = this;
         // Create toast
         if (!self.toastWithCustomButton) {
           self.toastWithCustomButton = self.$f7.toast.create({
-            message: 'Custom close button',
+            text: 'Custom close button',
             closeButton: true,
             closeButtonText: 'Close Me',
             closeButtonColor: 'red',
@@ -125,18 +128,18 @@
         // Open it
         self.toastWithCustomButton.open();
       },
-      showToastWithCallback: function () {
-        var self = this;
+      showToastWithCallback() {
+        const self = this;
         // Create toast
         if (!self.toastWithCallback) {
           self.toastWithCallback = self.$f7.toast.create({
-            message: 'Callback on close',
+            text: 'Callback on close',
             closeButton: true,
             on: {
-              close: function () {
+              close() {
                 self.$f7.dialog.alert('Toast closed');
               },
-            }
+            },
           });
         }
         // Open it
@@ -144,12 +147,12 @@
       },
     },
     on: {
-      pageBeforeOut: function () {
-        var self = this;
+      pageBeforeOut() {
+        const self = this;
         self.$f7.toast.close();
       },
-      pageBeforeRemove: function () {
-        var self = this;
+      pageBeforeRemove() {
+        const self = this;
         // Destroy toasts when page removed
         if (self.toastBottom) self.toastBottom.destroy();
         if (self.toastTop) self.toastTop.destroy();
@@ -160,6 +163,6 @@
         if (self.toastWithCustomButton) self.toastWithCustomButton.destroy();
         if (self.toastWithCallback) self.toastWithCallback.destroy();
       },
-    }
-  }
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/toolbar-hide-scroll.vue b/examples/kitchen-sink/pages/toolbar-hide-scroll.vue
index 7c1ead8..8751323 100644
--- a/examples/kitchen-sink/pages/toolbar-hide-scroll.vue
+++ b/examples/kitchen-sink/pages/toolbar-hide-scroll.vue
@@ -1,17 +1,14 @@
 <template>
-<f7-page>
-  <f7-navbar title="Hide Toolbar On Scroll" back-link="Back"></f7-navbar>
-  <div class="toolbar toolbar-bottom-md">
-    <div class="toolbar-inner">
-      <a class="link">Left Link</a>
-      <a class="link">Right Link</a>
-    </div>
-  </div>
-  <div class="page-content hide-toolbar-on-scroll">
-    <div class="block block-strong">
+  <f7-page hide-toolbar-on-scroll>
+    <f7-navbar title="Hide Toolbar On Scroll" back-link="Back"></f7-navbar>
+    <f7-toolbar bottom-md>
+      <f7-link>Left Link</f7-link>
+      <f7-link>Right Link</f7-link>
+    </f7-toolbar>
+    <f7-block strong>
       <p>Toolbar will be hidden if you scroll bottom</p>
-    </div>
-    <div class="block">
+    </f7-block>
+    <f7-block>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos maxime incidunt id ab culpa ipsa omnis eos, vel excepturi officiis neque illum perferendis dolorum magnam rerum natus dolore nulla ex.</p>
       <p>Eum dolore, amet enim quaerat omnis. Modi minus voluptatum quam veritatis assumenda, eligendi minima dolore in autem delectus sequi accusantium? Cupiditate praesentium autem eius, esse ratione consequuntur dolor minus error.</p>
       <p>Repellendus ipsa sint quisquam delectus dolore quidem odio, praesentium, sequi temporibus amet architecto? Commodi molestiae, in repellat fugit! Laudantium, fuga quia officiis error. Provident inventore iusto quas iure, expedita optio.</p>
@@ -42,12 +39,15 @@
       <p>Aperiam velit sed sit quaerat, expedita tempore aspernatur iusto nobis ipsam error ut sapiente delectus in minima recusandae dolore alias, cumque labore. Doloribus veritatis magni nisi odio voluptatum perferendis placeat!</p>
       <p>Eaque laboriosam iusto corporis iure nemo ab deleniti ut facere laborum, blanditiis neque nihil dignissimos fuga praesentium illo facilis eos beatae accusamus cumque molestiae asperiores cupiditate? Provident laborum officiis suscipit!</p>
       <p>Exercitationem odio nulla rerum soluta aspernatur fugit, illo iusto ullam similique. Recusandae consectetur rem, odio autem voluptate similique atque, alias possimus quis vitae in, officiis labore deserunt aspernatur rerum sunt?</p>
-    </div>
-  </div>
-</f7-page>
+    </f7-block>
+  </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Toolbar, f7Link, f7Block } from 'framework7-vue';
 
-  export default {}
+  export default {
+    components: {
+      f7Navbar, f7Page, f7Toolbar, f7Link, f7Block,
+    },
+  };
 </script>
diff --git a/examples/kitchen-sink/pages/toolbar-tabbar.vue b/examples/kitchen-sink/pages/toolbar-tabbar.vue
index cc15f51..4621906 100644
--- a/examples/kitchen-sink/pages/toolbar-tabbar.vue
+++ b/examples/kitchen-sink/pages/toolbar-tabbar.vue
@@ -1,54 +1,37 @@
 <template>
   <f7-page>
-    <div class="navbar">
-      <div class="navbar-inner sliding">
-        <div class="left">
-          <a href="#" class="link back">
-            <i class="icon icon-back"></i>
-            <span class="ios-only">Back</span>
-          </a>
-        </div>
-        <div class="title">Toolbar & Tabbar</div>
-      </div>
-    </div>
-    <div class="toolbar">
-      <div class="toolbar-inner">
-        <a class="link">Left Link</a>
-        <a class="link">Right Link</a>
-      </div>
-    </div>
-    <div class="list links-list">
-      <ul>
-        <li>
-          <a href="./tabbar/">Tabbar</a>
-        </li>
-        <li>
-          <a href="./tabbar-labels/">Tabbar With Labels</a>
-        </li>
-        <li>
-          <a href="./tabbar-scrollable/">Tabbar Scrollable</a>
-        </li>
-        <li>
-          <a href="./toolbar-hide-scroll/">Hide Toolbar On Scroll</a>
-        </li>
-      </ul>
-    </div>
-    <div class="block-title md-only">Toolbar Position</div>
-    <div class="block md-only">
+    <f7-navbar title="Toolbar & Tabbar" back-link="Back"></f7-navbar>
+    <f7-toolbar>
+      <f7-link>Left Link</f7-link>
+      <f7-link>Right Link</f7-link>
+    </f7-toolbar>
+    <f7-list>
+      <f7-list-item link="./tabbar/" title="Tabbar"></f7-list-item>
+      <f7-list-item link="./tabbar-labels/" title="Tabbar With Labels"></f7-list-item>
+      <f7-list-item link="./tabbar-scrollable/" title="Tabbar Scrollable"></f7-list-item>
+      <f7-list-item link="./toolbar-hide-scroll/" title="Hide Toolbar On Scroll"></f7-list-item>
+    </f7-list>
+    <f7-block-title v-if="$theme.md">Toolbar Position</f7-block-title>
+    <f7-block v-if="$theme.md">
       <p>Material (MD) theme toolbar supports both top and bottom positions. Click the following button to change its position.</p>
-      <p><a class="button button-raised" @click="toggleToolbarPosition">Toggle Toolbar Position</a></p>
-    </div>
+      <p>
+        <f7-button raised @click="toggleToolbarPosition">Toggle Toolbar Position</f7-button>
+      </p>
+    </f7-block>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7Toolbar, f7List, f7ListItem, f7Button, f7Link, f7BlockTitle, f7Block } from 'framework7-vue';
 
   export default {
+    components: {
+      f7Navbar, f7Page, f7Toolbar, f7List, f7ListItem, f7Button, f7Link, f7BlockTitle, f7Block,
+    },
     methods: {
-      toggleToolbarPosition: function () {
+      toggleToolbarPosition() {
         this.$$(this.$el).find('.toolbar, .tabbar').toggleClass('toolbar-bottom-md');
       },
-    }
-  }
+    },
+  };
 </script>
 
diff --git a/examples/kitchen-sink/pages/virtual-list.vue b/examples/kitchen-sink/pages/virtual-list.vue
index 79fa118..86074cd 100644
--- a/examples/kitchen-sink/pages/virtual-list.vue
+++ b/examples/kitchen-sink/pages/virtual-list.vue
@@ -1,94 +1,72 @@
 <template>
   <f7-page>
-    <div class="navbar">
-      <div class="navbar-inner sliding">
-        <div class="left">
-          <a href="#" class="link back">
-            <i class="icon icon-back"></i>
-            <span class="ios-only">Back</span>
-          </a>
-        </div>
-        <div class="title">Virtual List</div>
-        <div class="subnavbar">
-          <form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
-            <div class="searchbar-inner">
-              <div class="searchbar-input-wrap">
-                <input type="search" placeholder="Search"/>
-                <i class="searchbar-icon"></i>
-                <span class="input-clear-button"></span>
-              </div>
-              <span class="searchbar-disable-button">Cancel</span>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-    <div class="searchbar-backdrop"></div>
-    <div class="block">
+    <f7-navbar title="Virtual List" back-link="Back">
+      <f7-subnavbar :inner="false">
+        <f7-searchbar
+          search-container=".virtual-list"
+          search-item="li"
+          search-in=".item-title"
+        ></f7-searchbar>
+      </f7-subnavbar>
+    </f7-navbar>
+    <f7-block>
       <p>Virtual List allows to render lists with huge amount of elements without loss of performance. And it is fully compatible with all Framework7 list components such as Search Bar, Infinite Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable.</p>
       <p>Here is the example of virtual list with 10 000 items:</p>
-    </div>
-    <div class="list simple-list searchbar-not-found">
+    </f7-block>
+    <f7-list class="searchbar-not-found">
+      <f7-list-item title="Nothing found"></f7-list-item>
+    </f7-list>
+    <f7-list
+      class="searchbar-found"
+      medial-list
+      virtual-list
+      :virtual-list-params="{ items, searchAll, renderExternal, height: $theme.ios ? 63 : 73}"
+    >
       <ul>
-        <li>Nothing found</li>
+        <f7-list-item
+          v-for="(item, index) in vlData.items"
+          :key="index"
+          media-item
+          link="#"
+          :title="item.title"
+          :subtitle="item.subtitle"
+          :style="`top: ${vlData.topPosition}px`"
+        ></f7-list-item>
       </ul>
-    </div>
-    <div class="list virtual-list media-list searchbar-found"></div>
+    </f7-list>
   </f7-page>
 </template>
 <script>
-  import { f7Navbar, f7Page } from 'framework7-vue';
+  import { f7Navbar, f7Page, f7List, f7ListItem, f7Subnavbar, f7Searchbar, f7Block } from 'framework7-vue';
 
   export default {
-    data: function() {
-      var items = [];
-      for (var i = 1; i <= 10000; i++) {
+    components: {
+      f7Navbar, f7Page, f7List, f7ListItem, f7Subnavbar, f7Searchbar, f7Block,
+    },
+    data() {
+      const items = [];
+      for (let i = 1; i <= 10000; i += 1) {
         items.push({
-          title: 'Item ' + i,
-          subtitle: 'Subtitle ' + i
+          title: `Item ${i}`,
+          subtitle: `Subtitle ${i}`,
         });
       }
       return {
-        items: items
+        items,
+        vlData: {},
       };
     },
-    on: {
-      pageBeforeRemove: function () {
-        var self = this;
-        self.virtualList.destroy();
+    methods: {
+      searchAll(query, items) {
+        const found = [];
+        for (let i = 0; i < items.length; i += 1) {
+          if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
+        }
+        return found; // return array with mathced indexes
       },
-      pageInit: function() {
-        var self = this;
-        var $el = self.$$(self.$el);
-        self.virtualList = self.$f7.virtualList.create({
-          // List Element
-          el: $el.find('.virtual-list'),
-          // Pass array with items
-          items: self.items,
-          // Custom search function for searchbar
-          searchAll: function (query, items) {
-            var found = [];
-            for (var i = 0; i < items.length; i++) {
-              if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
-            }
-            return found; //return array with mathced indexes
-          },
-          // List item Template7 template
-          itemTemplate:
-            '<li>' +
-              '<a href="#" class="item-link item-content">' +
-                '<div class="item-inner">' +
-                  '<div class="item-title-row">' +
-                    '<div class="item-title">{{title}}</div>' +
-                  '</div>' +
-                  '<div class="item-subtitle">{{subtitle}}</div>' +
-                '</div>' +
-              '</a>' +
-            '</li>',
-          // Item height
-          height: self.$theme.ios ? 63 : 73,
-        });
-      }
-    }
-  }
+      renderExternal(vl, vlData) {
+        this.vlData = vlData;
+      },
+    },
+  };
 </script>