Cara menggunakan Laravel dengan Vue.js 3

Vue.js adalah salah satu framevorks JavaScript yang paling banyak digunakan untuk membuat antarmuka web dan aplikasi halaman tunggal, bersama dengan Laravel menjadi alat pengembangan yang sangat kuat.

Untuk pengembangan aplikasi web, alat yang banyak digunakan adalah vuejs, dan dalam artikel ini kita akan melihat cara memasang dan menggunakannya dengan Laravel. Kerangka kerja Vue.js adalah defimemusatkan kerangka progresif karena ia berspesialisasi dalam pembuatan tampilan HTML, dan memungkinkan Anda untuk dengan mudah mengintegrasikan dengan komponen pustaka dan proyek lain.

Kesuksesan Vue.js juga karena pilihan LARAVEL untuk menyarankannya sebagai kerangka kerja frontend, sehingga mengarah ke rilis versi 2.0.

Pembuatan proyek Laravel

Langkah pertama, tentu saja, membuat proyek baru di Laravel. Jika Anda memilikinya di komputer Anda, gunakan atau Anda dapat membuat yang baru hanya untuk tutorial ini.

composer create-project laravel/laravel guide-laravel-vue

Setelah proyek dimulai, Anda perlu menginstal file npm kecanduan. Untuk melakukannya, jalankan perintah berikut di dalam direktori proyek Anda:

npm install

Setelah dependensi terinstal, jalankan perintah berikut untuk membangun sumber daya dan pastikan semuanya benar-benar berfungsi:

npm run dev

Perintah npm run dev melakukan berbagai pemeriksaan dan pembangunan, khususnya Laravel Mix kompilasi file resources/js/app.js dan berkas resources/css/app.css dalam file public/js/app.js e public/css/app.css.

Setelah selesai jika semuanya berfungsi dengan baik, Anda akan melihat sesuatu seperti ini:

Menginstal Vue.js

Setelah menyiapkan proyek Laravel, kita dapat melanjutkan untuk menginstal Vue.js 3. Untuk melakukannya, jalankan perintah berikut di direktori proyek Anda:

npm install --save-dev vue

Ini akan menginstal Vue.js sebagai salah satu dependensi pengembangan. Setelah mengkompilasi aset, file JavaScript produksi Anda akan berdiri sendiri, jadi Anda hanya perlu menginstal Vue.js sebagai dependensi pengembangan.

Untuk memastikan Vue 3 terinstal dengan benar, buka file tersebut package.json (hadir di root proyek) dan cari "vue" di bagian ini "devDependencies":

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

Seperti yang Anda lihat, nomor versi menunjukkan bahwa Vue.js 3 telah diinstal. 

Percobaan pertama Vue.js

Di file welcome.blade.php Anda, masukkan kode berikut:

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

Seperti yang Anda lihat, kami telah membuat sebuah elemen div dengan id "vue-app“. Di dalam elemen skrip kita telah membuat sebuah instance dari Vue, di mana kita meneruskan ke konstruktor sebuah objek yang memungkinkan kita untuk melakukannya defiselesaikan beberapa parameter aplikasi, seperti data dan perilaku, dalam kasus kita:

• el: Referensi ke elemen div defiselesai di html
• tanggal: kumpulan data

Segera setelah objek dibuat, Vue mengakuisisi div dengan id vue-app dan menangani penggantian placeholder {{ text }} dengan nilai yang terkandung dalam objek data. Tentu saja, objek ini dapat berisi lebih dari satu properti, bahkan dari tipe yang berbeda: angka, larik, dan objek bersarang lainnya valid

Selain penggantian ini, Vue juga telah mengaktifkan mesinnya dan membuat aplikasi menjadi responsif, artinya setiap perubahan pada properti teks akan menyebabkan pembaruan instan dari elemen terkait di HTML.

Tes kedua Vue.js

Untuk melanjutkan ke uji coba kedua, pertama-tama Anda harus memberi contoh aplikasi untuk membuat komponen baru. Anda buka resources/app.js (o resources/js/app.js) dan perbarui isinya sebagai berikut:

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

Dalam file ini kita membuat instance Vue.js baru, dan untuk melakukan ini kita memerlukan komponen Vue yang kita sebut HelloVue.vue. Untuk informasi lebih lanjut berkonsultasi dengan dokumen resmi . 

Buat berkas baru resources/components/HelloVue.vue dan masukkan kode berikut:

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

File yang baru saja kita buat adalah komponen dasar Vue.js yang mencetak Hello Vue! bagaimana header1 di halaman. Akhirnya, buka webpack.mix.js file di root proyek dan perbarui isinya sebagai berikut:

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Dalam file ini, pemanggilan metode .vue() akan mengkompilasi kode Vue.js apa pun dan membundelnya ke dalam file JavaScript produksi. Fungsi menerima objek di mana Anda bisa defiselesaikan versi Vue.js yang Anda gunakan. 

Setelah mengedit file webpack.mix.js Anda perlu mengkompilasi kode javascript. Untuk melakukan ini, kami menjalankan perintah lagi npm run dev.

Terakhir, untuk mencoba Vue secara operasional, buka file tersebut resources/views/welcome.blade.php dan masukkan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Vue</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <hello-vue />
    </div>
</body>
</html>

Kode, bersama dengan komponen yang dibuat sebelumnya, akan menghasilkan pesan video Halo Vue!, karena instance Vue.js dipasang pada elemen HTML dengan id app.

Jalankan aplikasi Anda menggunakan php artisan serve, dan buka di browser favorit Anda.

Ercole Palmeri

Anda mungkin juga tertarik dengan ...

• Penyedia Layanan di Laravel: apa itu dan bagaimana menggunakan Penyedia Layanan di Laravel
• Cara menginstal ChatGPT secara lokal di komputer Anda
• Cara menyesuaikan pencetakan proyek Gantt di Microsoft Project
• Apa itu Kerangka Kerja dalam Rekayasa Perangkat Lunak, defipengertian dan jenis framework
• Inilah surat wasiat digital pertama blockchain