I have added peshanghiwa/vue-awesome-paginate into my laravel 11 /vuejs 3 app and I have VueAwesomePaginate declared in resources/js/app.js :

import VueAwesomePaginate from "vue-awesome-paginate";
import "vue-awesome-paginate/dist/style.css";

// Vueponent("broadcaster", require("./components/Broadcaster.vue").default);
// Vueponent("viewer", require("./components/Viewer.vue").default);


const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import Multiselect from '@vueform/multiselect'

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue'),
        ),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(ElementPlus)
            ponent('inertia-link', Link)
            ponent('vue-awesome-paginate', VueAwesomePaginate)
            ponent('file-upload', VueUploadComponent)
            ponent('multiselect', Multiselect)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

But whe in vue file I use it :

<template>
    ...
    <div class="p-2" v-show="totalTicketsCount > 1">
        <vue-awesome-paginate
            :total-items="totalTicketsCount"
            :items-per-page="backendItemsPerPage"
            :max-pages-shown="5"
            v-model="currentPage"
            @click="paginateClick"
        />
    </div>

</template>

In the file above I did not declare paginate component - I suppose it must be global...

I see error in console :

app.js:44 [Vue warn]: Component is missing template or render function:
{install: ƒ}

  at <VueAwesomePaginate total-items=8 items-per-page=2 max-pages-shown=5  ... >
  at <PersonalLayout>
  at <PersonalTicketsList errors=
{}
 auth=
{user: {…}, loggedUserIsAdmin: false, loggedUserIsManager: false, loggedUserIsSalesperson: false}
 ziggy=
... 

 

and pagination is not visible.

How have I to define the Component to make it working ?

I have added peshanghiwa/vue-awesome-paginate into my laravel 11 /vuejs 3 app and I have VueAwesomePaginate declared in resources/js/app.js :

import VueAwesomePaginate from "vue-awesome-paginate";
import "vue-awesome-paginate/dist/style.css";

// Vueponent("broadcaster", require("./components/Broadcaster.vue").default);
// Vueponent("viewer", require("./components/Viewer.vue").default);


const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import Multiselect from '@vueform/multiselect'

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue'),
        ),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(ElementPlus)
            ponent('inertia-link', Link)
            ponent('vue-awesome-paginate', VueAwesomePaginate)
            ponent('file-upload', VueUploadComponent)
            ponent('multiselect', Multiselect)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

But whe in vue file I use it :

<template>
    ...
    <div class="p-2" v-show="totalTicketsCount > 1">
        <vue-awesome-paginate
            :total-items="totalTicketsCount"
            :items-per-page="backendItemsPerPage"
            :max-pages-shown="5"
            v-model="currentPage"
            @click="paginateClick"
        />
    </div>

</template>

In the file above I did not declare paginate component - I suppose it must be global...

I see error in console :

app.js:44 [Vue warn]: Component is missing template or render function:
{install: ƒ}

  at <VueAwesomePaginate total-items=8 items-per-page=2 max-pages-shown=5  ... >
  at <PersonalLayout>
  at <PersonalTicketsList errors=
{}
 auth=
{user: {…}, loggedUserIsAdmin: false, loggedUserIsManager: false, loggedUserIsSalesperson: false}
 ziggy=
... 

 

and pagination is not visible.

How have I to define the Component to make it working ?

• laravel
• vuejs3

1 Answer 1

Import it via .use instead of ponent conform docs: https://www.npmjs/package/vue-awesome-paginate#installation

It will register the component for you.