Imported npm package not working

Ionic Framework Ionic Vue
1

Hi all!

I am developing an app which has a list of objects that I want to paginate. I found vuejs-paginate plugin but I can’t make it work in my view.

After installing it via npm and importing in the view, its tag is in fact in the HTML skeleton of the page, but it shows nothing. No error is displayed in the console either, only this Vue warning:

[Vue warn]: Failed to resolve component: paginate

Might it be a problem with the import? Could you help me?

I attach part of my code so you can see how I’ve declared it.

<template>
  <ion-page>
    <ion-content>
      <paginate
        :pageCount="10"
        :containerClass="'pagination'"
        :clickHandler="clickCallback"
      >
      </paginate>
    </ion-content>
  </ion-page>
</template>

<script>
import {
  IonContent,
  IonPage,
} from "@ionic/vue";

import { defineComponent } from "vue";
import { VuejsPaginate } from "vuejs-paginate";

export default defineComponent({
  name: "Gestion",
  components: {
    'paginate': VuejsPaginate,
  },
  methods: {
    clickCallback: function(page) {
      console.log(page)
  },
});
</script>

This has also happened to me when trying to import other “external” components. Could it be a problem related to Ionic?

Thank you in advance!

2

Try removing the single quotes around paginate:

  components: {
    paginate: VuejsPaginate,
  },

BTW, Vue’s style guide strongly recommends using multi-word component names to avoid conflicts with HTML elements.

Consider changing Paginate to something like VuePaginate or VPaginate.

      <v-paginate
        :pageCount="10"
        :containerClass="'pagination'"
        :clickHandler="clickCallback"
      >
      </paginate>
3

I also think that the import statement should be:

import Paginate from 'vuejs-paginate'

So, the curly brackets should be removed.

4

Thank you for you recommendations, Treigh!

Unfortunately, none of them could solve my problem. I think the problem has to do with the import statement, because if I remove the braces around Paginate, the component doesn’t even render and I got this error message:

image

I don’t know if I’m importing the right “export” name, because the docs establish both the ‘Paginate’ and the ‘VuejsPaginate’ imports. This last one is the one which appears in the package index.js exports.

Could you help me to find the right solution?

5

If you’re using Vue 3 with Ionic 5, as I assumed, you should also make sure that the vuejs-paginate library is compatible with Vue 3.

There’s another library that seems to be aimed at Vue 3. I’ve never used it, but it wouldn’t hurt to give it a try.

2 Likes
6

Hi, treigh

You were right, vuejs-paginate is not compatible with Vue 3 yet. Instead I’ve used the other one you recommended, v-pagination-3 and it works like a charm!

Thank you very much for your help.

7

I’m glad it worked, Francis!

1 Like