Adicionei peshanghiwa/vue-awesome-paginate ao meu aplicativo laravel 11 /vuejs 3 e declarei VueAwesomePaginate em resources/js/app.js:
import VueAwesomePaginate from "vue-awesome-paginate";
import "vue-awesome-paginate/dist/style.css";
// Vue.component("broadcaster", require("./components/Broadcaster.vue").default);
// Vue.component("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)
.component('inertia-link', Link)
.component('vue-awesome-paginate', VueAwesomePaginate)
.component('file-upload', VueUploadComponent)
.component('multiselect', Multiselect)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
Mas quando eu uso o arquivo vue:
<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>
No arquivo acima eu não declarei o componente paginate - suponho que ele deve ser global...
Vejo erro no 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=
...
e a paginação não é visível.
Como devo definir o Componente para fazê-lo funcionar?
Importe-o
.use
em vez de.component
documentos conformes: https://www.npmjs.com/package/vue-awesome-paginate#installationEle registrará o componente para você.