How to import LaravelVuePagination library in Vue3 Script Setup

Question

When I try to import the library using script setup it doesn't work.

<script setup>
import LaravelVuePagination from "laravel-vue-pagination";
.....
<script>

Documentation has only included importing by components

import LaravelVuePagination from 'laravel-vue-pagination';

export default {
    components: {
        'Pagination': LaravelVuePagination
    }
}

Well I can't use the following code in template with script setup

<Pagination
      style="page"
      :data="supplier.data"
      @pagination-change-page="pageData"
    />
  </div>

score 0 · Answer 1 · answered Aug 19 '22 at 22:17

the above code should work if you have installed it.

npm install laravel-vue-pagination
// or
yarn add laravel-vue-pagination

if it's already installed and it's not importing then you can try importing from app.js or main.js where you have initialized your Vue object.

require('./bootstrap');

require('alpinejs');

import { createApp } from 'vue'
import App from '@/App.vue'
import router from "@/routes"
import axios from 'axios'
import Vuex from 'vuex'
import store from './store'
import LaravelVuePagination from 'laravel-vue-pagination';

const app = createApp(App)

app.config.globalProperties.$axios = axios;

app.component('Pagination',LaravelVuePagination);
app.use(router);
app.use(store);
app.use(Vuex);
app.mount('#app')

Visit https://www.npmjs.com/package/laravel-vue-pagination

How to import LaravelVuePagination library in Vue3 Script Setup

1 Answers1