Can't get virtual list example to work

Hello, I cannot get the virtual list example to work at all. I copied code (I changed the misspelling : virtual-list-params):

<!-- <f7-navbar back-link="Back" title="Virtual List"></f7-navbar> -->
  Searchbar to search thorugh VL Items
  List to search specified in "search-list" prop

<!-- This block will become visible when there is nothing found -->
<f7-list class="searchbar-not-found">
  <f7-list-item title="Nothing found"></f7-list-item>

<!-- Search through this list -->
  :virtual-list-params="{ items: items, height: 63, searchAll: searchAll, renderExternal: renderExternal }"
    <!-- we will get the items we need to render from VL render external callback -->
      v-for="(item, index) in vlData.items"
      :style="`top: ${vlData.topPosition}px`"

  export default {
data: function () {
  var items = [];
  for (var i = 1; i <= 10000; i++) {
      title: 'Item ' + i,
      subtitle: 'Subtitle ' + i
  return {
    items: items,
    vlData: {},
methods: {
  // Function to proceed search results
  searchAll: function (query, items) {
    var found = [];
    for (var i = 0; i < items.length; i += 1) {
        if (items[i].title.toLowerCase().indexOf(query) >= 0 || query.trim() === '') found.push(i);
    return found; // return array with mathced indexes
  renderExternal(vl, vlData) {
    this.vlData = vlData;

I put this code in my virtual-list.vue file. I see the blue search bar but nothing shows up in the list and nothing happens when I type into the search. I consoled the list items and I do see all of them. I also put a console.log in searchAll and renderExternal but I see nothing.

<div class="list-block searchbar-found media-list" id="search-list" virtual-list="" virtual-list-params="[object Object]"><ul></ul></div>

is rendered?

Any thoughts on what might be wrong?

Documentation is for v2. You are using v1, check

Just curious why you think I am using V1? I am indeed using V2.

Here is my main.js

// Import Vue
import vue from 'vue'

// Import F7
 import framework7 from 'framework7'

// Import F7 Vue Plugin
 import framework7Vue from 'framework7-vue'

 // Material Theme:
 import framework7Theme from 'framework7/dist/css/framework7.material.min.css'
 import framework7ThemeColors from 'framework7/dist/css/framework7.material.colors.min.css'

// Import App Custom Styles
import appStyles from './assets/sass/main.scss'

// Import Routes
import routes from './routes.js'

// Import Components
import login from './assets/vue/components/login.vue'
import dashboard from './assets/vue/components/dashboard.vue'

// Import js
import moment from 'moment';
vue.prototype.moment = moment;

import testGlobals from './assets/js/testGlobals.js';

// Init F7 Vue Plugin

// Init App
var myApp = new vue({
el: '#app',
template: '<app/>',
data: {
  moment: moment
// Init Framework7 by passing parameters here
framework7: {
  root: '#app',
  material: true,
  routes: routes
components: {
  app: localStorage.getItem('client') === null ? login : dashboard
mixins: [ testGlobals]

This is my first time using F7 V2 and Vue so I apologize if I missing something simple.

The code I see is related to v1

Refer to original v2 webpack template

This is where I got the template from, is it wrong?


it says v2? Am I missing something?


I just checked and it is in fact 1.6.5. Thanks!