Laravel11+Vue3中使用VueAwesomePaginate报错的解决咨询

1. 修正全局注册方式 #

你遇到的「Component is missing template or render function: {install: ƒ}」警告，核心原因是错误地将插件对象当作组件直接注册，而非采用Vue 3的插件注册逻辑。

修改resources/js/app.js的配置：

import './bootstrap';
import { createApp } from 'vue';
// 导入插件及样式
import VueAwesomePaginate from "vue-awesome-paginate";
import "vue-awesome-paginate/dist/style.css";

const app = createApp({});

// 使用app.use注册插件（而非app.component）
app.use(VueAwesomePaginate);

// 挂载应用到指定DOM元素
app.mount('#app');

2. 局部注册方案（可选） #

若无需全局注册组件，可在单个Vue文件中局部引入：

<template>
  <vue-awesome-paginate 
    :total-items="100" 
    :current-page="currentPage" 
    :page-size="10"
  />
</template>

<script setup>
import { VueAwesomePaginate } from "vue-awesome-paginate";
import "vue-awesome-paginate/dist/style.css";
import { ref } from 'vue';

const currentPage = ref(1);
</script>

3. 确保传入必填Props #

组件正常渲染需要核心属性支撑，使用时务必传入以下参数：

• total-items：总数据条数
• current-page：当前页码（需为响应式变量）
• page-size：每页显示条数

完整使用示例：

<template>
  <div>
    <!-- 展示分页数据 -->
    <ul>
      <li v-for="item in paginatedList" :key="item.id">{{ item.title }}</li>
    </ul>
    
    <!-- 分页组件 -->
    <vue-awesome-paginate 
      :total-items="totalCount" 
      :current-page="currentPage" 
      :page-size="10"
      @page-changed="onPageChange"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 模拟数据
const totalCount = ref(150);
const currentPage = ref(1);
const pageSize = ref(10);

// 计算分页后的数据
const paginatedList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return Array.from({length: totalCount.value}, (_, i) => ({id: i+1, title: `内容 ${i+1}`})).slice(start, end);
});

// 页码切换回调
const onPageChange = (page) => {
  currentPage.value = page;
};
</script>

4. 额外排查点 #

• 确认依赖安装完整：执行npm install vue-awesome-paginate或yarn add vue-awesome-paginate，避免依赖缺失。
• 重新编译资源：运行npm run dev让Vite重新打包组件样式与代码，确保变更生效。

内容的提问来源于stack exchange，提问作者mstdmstd