Adding external librairies

[hroma]

Hi, I am a total newbie to Vue and I’m trying to implement a pagination component inside a kirby panel vue but without success (datas comes from an array) .

I'm stuck with the loading of external components like this one: HENNGE/vue3-pagination (github.com) or other(s) that would live inside index.js (I think...).

I don't know where to start: kirbyup.config.js? Please, would you mind to point me in the right direction?

Thank in advance for your help.

[jonaskuske]

Hi! There isn't anything specific to kirbyup about using libraries, so you can follow the normal Installation / Get Started instructions of the respective package. For the library you linked to, that means:

1. From the plugin's main directory, where composer.json and package.json are located, run npm install @hennge/vue3-pagination to download the respective package
2. In the .vue file where you want to use the component (not index.js), add the import at the top of the <script> section:
   import VPagination from "@hennge/vue3-pagination";

3. Then further down in the <script> section, you can register the component:

   export default {
     components: { VPagination }
   }

⚠️ However, note that the library you linked to is built for Vue 3, but Kirby is using Vue 2, so the library is not compatible. You'll need a library for Vue 2, something like this: https://www.npmjs.com/package/vuejs-paginate (though I didn't try that one and can't give any recommendations here)

I'm not sure at which point exactly you are stuck, so let me know if you have further questions.