Laravel 9 and Vue, Inertia – Menampilkan Data

Dalam artikel ini, kita akan membahas bagaimana menampilkan data menggunakan Laravel 9, Vue, dan Inertia.

Laravel 9

Laravel adalah framework PHP yang sangat populer untuk pengembangan aplikasi web. Dengan rilisnya Laravel 9, ada banyak fitur baru dan perbaikan yang membuatnya lebih kuat dan efisien.

Vue

Vue.js adalah sebuah framework JavaScript yang ringan dan fleksibel untuk membangun antarmuka pengguna. Dengan integrasi Vue dalam proyek Laravel, Anda dapat membuat komponen UI yang responsif dan dinamis.

Inertia

Inertia adalah sebuah library untuk membuat aplikasi web di Laravel tanpa memerlukan pembaruan halaman. Hal ini memungkinkan pengembang untuk membuat aplikasi single-page dengan menggunakan server-side routing tanpa memerlukan API.

Menampilkan Data

Untuk menampilkan data dalam proyek Laravel 9, Vue, dan Inertia, Anda dapat menggunakan komponen Vue untuk mengambil data dari backend dan menampilkannya dalam halaman web.

Sebagai contoh, Anda dapat membuat komponen Vue seperti berikut untuk menampilkan daftar pengguna:

  <template>
    <div>
      <h2>Daftar Pengguna</h2>
      <ul>
        <li v-for="user in users" :key="user.id">
          {{ user.name }}
        </li>
      </ul>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        users: []
      };
    },
    methods: {
      getUsers() {
        axios.get('/users')
          .then(response => {
            this.users = response.data;
          })
          .catch(error => {
            console.error(error);
          });
      }
    },
    mounted() {
      this.getUsers();
    }
  }
  </script>
  

Dalam contoh di atas, kita menggunakan axios untuk mengambil daftar pengguna dari backend Laravel. Kemudian, kita menampilkan daftar pengguna dalam halaman web menggunakan v-for directive dari Vue.

Dengan menggunakan Laravel 9, Vue, dan Inertia, Anda dapat dengan mudah menampilkan data dalam proyek Anda tanpa memerlukan pembaruan halaman. Hal ini memungkinkan Anda untuk membuat aplikasi web yang lebih responsif dan efisien.