Cover Install Vue.js 3 di Laravel
Cover Install Vue.js 3 di Laravel

Install Vue 3 di Laravel

profil
Febri Hidayan
31 December 2020 ยท Baca 4 menit

Awalnya saya menginstal Laravel 8 untuk merencanakan tutorial CRUD Vue.js dan Laravel. Tetapi saya mengalami kesulitan kenapa paket Vue 3 tidak bisa di panggil dengan mudah dan tidak seperti biasanya saat menggunakan Vue 2. Setelah mendapatkan informasi dari dokumen Laravel Mix ternyata Vue 3 baru akan di dukung pada versi 6 yang saat ini sudah memasuki versi stabil. Maka saya membuat tutorial ini barang kali bisa menjadi acuan yang baik untuk dicoba.

Daftar isi:

Instal Laravel

Jangan lupa menginstal Laravel terlebih dahulu ya!, pasti Anda sudah tidak asing lagi tentang instal Laravel:

Yang sudah menginstal Laravel installer

laravel new mulai-laravel-vue3

Cara lain

composer create-project --prefer-dist laravel/laravel mulai-laravel-vue3

Meningkatkan Laravel Mix 6 dan instal Vue.js 3

Sejak Laravel Mix 6 semua dukungan terbarui sudah bisa menggunakan dependensi Webpack 5, PostCSS 8, Vue Loader 16, dan banyak lagi. Silakan lakukan peningkatan versi Laravel Mix, instal Vue.js 3 dan paket lainnya:

npm instal laravel-mix@latest @vue/compiler-sfc postcss@^8 vue@next vue-loader@^16.0.0-beta.9 vue-template-compiler

atau menggunakan yarn:

yarn add laravel-mix@latest @vue/compiler-sfc postcss@^8 vue@next vue-loader@^16.0.0-beta.9 vue-template-compiler

Catatan: Saya sengaja untuk menginstal beberapa paket lainnya agar lebih memudahkan Anda.

Konfigurasi

Berkas packages.js

Silakan untuk menyesuaikan skrip pada berkas packages.js seperti skrip dibawah ini:

"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}

Berkas webpack.mix.js

Karena Laravel 8 tidak lagi mendukung SASS secara bawaan dan saya memisahkan skrip seperti dibawah ini antar Javascript dan CSS.

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

mix.js('resources/js/app.js', 'public/js').vue();

mix.postCss('resources/css/app.css', 'public/css', [
    //
]);

Perlu diketahui jika Anda masih belum bisa move on dari Vue.js 2 masih bisa menggunakan Laravel Mix terbaru dengan melakukan ini:

mix.js('resources/js/app.js', 'public/js').vue({
    version: 2
});

Berkas app.blade.php

Buatlah berkas app.blade.php pada direktori resources/views kemudian salin dan tempelkan skrip dibawah ini:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<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>{{ config('app.name') }}</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Berkas web.php

Lakukan konfirgurasi berkas web.php pada direktori routes jadikan seperti dibawah ini:

Route::get('/{path}', function () {
    return view('app');
})->where('path', '.*');

Catatan: Saya melakukannya untuk Anda yang sedang belajar Laravel SPA dengan Vue.js jadi untuk semua rute dilakukan di Vue.js dengan Vue Router.

Bermain di direktori js

Berkas App.vue

Buatlah berkas App.vue pada direktori resources/js kemudian salin dan tempelkan skrip dibawah ini atau bisa menyesuaikan sendiri:

<template>
    <h1>Hai semuanya</h1>
    <p>Bersama saya Febri Hidayan</p>
</template>

<script>
export default {
}
</script>

Berkas app.js

Jangan lupa untuk memanggil Vue dan berkas App.vue yang bisa Anda lakukan seperti skrip dibawah ini:

require('./bootstrap');

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)

app.mount('#app')

Menjalankan

Saatnya yang di tunggu dan jalankan yang satu ini di terminal yang berbeda:

Jalankan Laravel

php artisan serve

Jalankan saja

npm run watch

atau menggunakan yarn:

yarn watch

Hasil running:

gambar 1

Hasil yang didapat dari http://127.0.0.1:8000 seperi ini:

gambar 2

Sekarang waktunya Anda untuk mencoba!

Tidak ingin lelah untuk mengikuti tutorial ini langsung saja lihat repositori Github di Mulai Laravel Vue 3


profil

DITULIS OLEH

Febri Hidayan

Berikan saya sponsor terbaik Anda agar saya tetap semangat menulis artikel yang bermanfaat. Terimakasih ๐Ÿ˜Š