The pagination is not showing using Vue.js v.3, what could be the problem?

[alcarazolabs]

Hi guys, I just installed this package to my laravel project however the pagination is not showing.
I'm using composition api, I just followed the example from LaravelDaily channel:
https://www.youtube.com/watch?v=Ie7zZ4E4u2Y
and his recommendations but in my case does not work.
I thought that the problem was because I was using bootstrap 5 however after downgrade the version to bootstrap 4 the problem remains happening.

Here is my repositorio:
https://github.com/alcarazolabs/laravel-vue3-crud-composition-api-spanish

If you can see in my app,js I'm importing and registering this component:

import { createApp, defineComponent  } from "vue";

import router from './router'
import CompaniesIndex from './components/companies/CompaniesIndex'
import CompaniesCreate from './components/companies/CompaniesCreate'
import CompaniesEdit from './components/companies/CompaniesEdit'

import LaravelVuePagination from "laravel-vue-pagination";

const root = defineComponent({ 
    CompaniesIndex
    })

const app = createApp(root)

app.use(router)

app.component('CompaniesIndex', CompaniesIndex);
app.component('CompaniesCreate', CompaniesCreate);
app.component('CompaniesEdit', CompaniesEdit);

app.component('Pagination', LaravelVuePagination);


app.mount('#app')

In my composition file :

  const getCompanies = async(page) => {
        axios.get('/api/companies?page=' + page)
        .then(response => {
            companies.value = response.data.data
        })
       
    }

I'm using and api resource, but all my first 5 items from the pagination are showing but the pagination:

I'm implementing the pagination inside the CompaniesIndex componente, here part of the code:

.....html....
.....
      <Pagination :data="companies" @pagination-change-page="getCompanies"/> 


</template>


<script>
import useCompanies from "../../composables/companies";
import { onMounted } from "vue";

export default {


   setup(){
         const {companies, getCompanies, destroyCompany } = useCompanies()

         onMounted(getCompanies)

         const deleteCompany = async (id) => {
            if(!window.confirm("Estas seguro?")){
               return 
            }
            await destroyCompany(id)
            await getCompanies()
         }

      return {
         companies,
         getCompanies,
         deleteCompany  

      }
   }

}

</script>

I don´t know where is the problem, I teste laravel ui with bootstrap and now laravel ui with vue.js but it continues not showing.

Any idea to fix the problem I will appreciate, thanks so much.

[gilbitron]

Hey @alcarazolabs. In your composition file, you're doing companies.value = response.data.data. The pagination component expects the full Laravel paginator response for the data attribute, not just the data portion of the response. So this line should probably be companies.value = response.data.

[alcarazolabs]

Thanks for the advice, but tried two ways of return the data from my controller:

1. Using a normal json response without ApiResource file:
   return response()->json(Company::paginate(5));
2. And using Resource:
   return CompanyResource::collection(Company::paginate(5));

in both cases I needed of use response.data.data, if I use response.data not data is comming.

No idea why the pagination is not showing.

[gilbitron]

Can you share an example response payload from your getCompanies method?

[alcarazolabs]

This is the response from response.data.data

{
  "data": [
    {
      "id": 8,
      "name": "Thomas Norman",
      "email": "[email protected]",
      "address": "Consequatur Laborum",
      "website": "https://www.sodar.org.au"
    },
    {
      "id": 9,
      "name": "Lacey Hays",
      "email": "[email protected]",
      "address": "Et nihil voluptas co",
      "website": "https://www.lihiroh.me.uk"
    },
    {
      "id": 14,
      "name": "Craig Rasmussen",
      "email": "[email protected]",
      "address": "In qui et voluptatem",
      "website": "https://www.qozasap.cm"
    },
    {
      "id": 15,
      "name": "Yuri Garrett",
      "email": "[email protected]",
      "address": "Labore fugiat velit",
      "website": "https://www.bivulunem.tv"
    },
    {
      "id": 16,
      "name": "Angelica Eaton",
      "email": "[email protected]",
      "address": "Tempor doloribus bea",
      "website": "https://www.wudelumarov.biz"
    }
  ],
  "links": {
    "first": "http://laravel-crud-vue3.test/api/companies?page=1",
    "last": "http://laravel-crud-vue3.test/api/companies?page=2",
    "prev": null,
    "next": "http://laravel-crud-vue3.test/api/companies?page=2"
  },
  "meta": {
    "current_page": 1,
    "from": 1,
    "last_page": 2,
    "links": [
      {
        "url": null,
        "label": "« Previous",
        "active": false
      },
      {
        "url": "http://laravel-crud-vue3.test/api/companies?page=1",
        "label": "1",
        "active": true
      },
      {
        "url": "http://laravel-crud-vue3.test/api/companies?page=2",
        "label": "2",
        "active": false
      },
      {
        "url": "http://laravel-crud-vue3.test/api/companies?page=2",
        "label": "Next »",
        "active": false
      }
    ],
    "path": "http://laravel-crud-vue3.test/api/companies",
    "per_page": 5,
    "to": 5,
    "total": 10
  }
}

[alcarazolabs]

And output is from response.data console.log():

The component has been registered app.component('Pagination', LaravelVuePagination); but not showing.

[alcarazolabs]

Fixed
I forgot change companies = [] to companies = {} and also I needed to update my v-for in the table from v-for="item in companies" to v-for="item in companies.data"

this datails were ignore due my first experience with this package.
thanks so much.

[gilbitron]

Glad you figured it out 👍