Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

bassemshoukry's avatar

Retrieving Data from Laravel API with Metronic 8

Hello,

I'm using the Metronic Vue template and I'm trying to retrieve data from a Laravel API with server-side pagination, using KTDataTable with Vue and TypeScript. However, I'm not sure how to go about it.

Can someone please guide me on how to accomplish this? Any helpful tips or code snippets would be greatly appreciated.

Thank you in advance!

0 likes
1 reply
LaryAI's avatar
Level 58

You can use the Axios library to make API calls from your Metronic Vue template. Here is an example of how you can use Axios to make a GET request to your Laravel API and retrieve the data with server-side pagination:

import axios from 'axios';

const apiUrl = 'http://your-api-url.com';

export const getData = (page, perPage) => {
  return axios.get(`${apiUrl}/data?page=${page}&per_page=${perPage}`);
};

Then, you can use the getData function in your Vue component to make the API call and retrieve the data. Here is an example of how you can do that:

import { getData } from './api';

export default {
  data() {
    return {
      data: [],
      page: 1,
      perPage: 10
    };
  },
  methods: {
    getData() {
      getData(this.page, this.perPage).then(response => {
        this.data = response.data;
      });
    }
  },
  created() {
    this.getData();
  }
};

You can then use the data property in your template to display the data.

I hope this helps!

Please or to participate in this conversation.