_vm.paginated is not a function

[benbagley]

Hi, so I have tried using this plugin, however, I'm seeing the following error.

_vm.paginated is not a function 

Here is my code:

<template>
  <section class="flex justify-center h-screen w-screen uppercase leading-loose">
    <section class="flex flex-wrap w-full max-w-md m-0">
      <section class="flex flex-wrap justify-center items-center w-full">
        <section>
          <h1 class="font-thin text-black text-center w-full">Search Cruises</h1>

          <form class="px-8 pt-6 pb-8">
            <section class="mb-4">
              <input class="shadow hover:shadow-md bg-transparent appearance-none border-2 border-grey rounded py-2 px-3 text-grey-darker"
                style="outline:none" type="text" placeholder="Search Cruises">
            </section>
            <section class="flex items-center justify-between">
              <a class="flex justify-center bg-grey-darker hover:bg-grey-darkest w-full text-white font-semibold py-3 px-4 border rounded-sm shadow" style="outline:none" @click="toggle">
                Search
              </a>
            </section>
          </form>
        </section>

        <section :class="open ? 'block': 'hidden'"> <!-- Start Results -->
          <h1 class="font-thin text-black text-center w-full">Cruise Results</h1>

          <section class="flex flex-wrap">
            <paginate name="cruises" :list="cruises" :per="3">
              <section class="shadow p-4 mb-4 w-full" v-for="cruise in paginated('cruises')" :key="cruise.id">
                <span class="text-md font-bold">{{ cruise.title }}</span>
                <span class="text-sm font-semibold">{{ cruise.summary }}</span>

                <section class="flex">
                  <section class="text-lg">
                    <span class="text-black">Inside</span> <br>
                    <span class="text-red">£{{ cruise.inside }}</span>
                  </section>
                  <span class="pr-8"></span>
                  <section class="text-lg">
                    <span class="text-black">Balcony</span> <br>
                    <span class="text-red">£{{ cruise.balcony }}</span>
                  </section>
                </section>
              </section>
            </paginate>
          </section>
          <paginate-links for="cruises" :show-step-links="true"></paginate-links>
        </section> <!-- Cruise Results -->
      </section>
    </section>
  </section>
</template>

<script>
import firebase from '@/middleware/firebase'
import VuePaginate from 'vue-paginate'

const database = firebase.database()

export default {
  components: {
    VuePaginate
  },
  data: function () {
    return {
      cruises: [],
      open: false,
      paginate: ['cruises']
    }
  },
  methods: {
    toggle () {
      this.open = !this.open
    }
  },
  mounted () {
    database.ref('cruises').on('child_added', snapshot => this.cruises.push(snapshot.val()))
  }
}
</script>

Not sure where I'm going wrong.

[TahaSh]

@benbagley please make sure you've installed the plugin first:

import VuePaginate from 'vue-paginate'
Vue.use(VuePaginate)

This error means that the mixin that has the paginated function isn't installed. If you still see this error, please try to reproduce the issue in a jsfiddle and send me the link.