Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Cara Install dan Menggunakan Vue Js di Laravel 7

2 min read

Cara Install dan Menggunakan Vue Js di Laravel 7

Hello artisan, jika Anda membutuhkan tutorial cara install dan menggunakan Vue Js di Laravel 7, Anda berada pada artikel yang tepat.

Pada tutorial kali ini, Anda akan mempelajari:

  1. Cara install vue js di laravel 7
  2. Cara running vue js di laravel 7
  3. Contoh program menggunakan vue js di laravel 7

Buat Anda yang penasaran gimana cara install dan menggunakan Vue Js di Laravel 7, mari kita mulai.

Let’s go!

Pendahuluan

Vue Js merupakan framework JavaScript yang bersifat progresif, open source untuk membangun antarmuka pengguna / UI.

Pertama kali Vue Js diperkenalkan oleh Evan You pada pada bulan Februari 2014, kemudian sampai ke versi stabil pada bulan Desember 2019 versi 2.6.11.

Untuk melakukan integrasi menggunakan JavaScript lainnya mudah dilakukan dengan Vue Js karena ia dirancang untuk bisa berjalan hanya di beberapa bagian halaman web.

Jadi, kita bisa menggunakan Vue Js untuk keperluan Front End website.

… yang lebih menarik, Laravel sudah bisa diintegrasikan dengan Vue Js.

Penasaran gimana cara menggunakannya?

Yuk kita mulai ngoding!

Tools yang Diperlukan

1# Laravel 7

Anda bisa membaca artikel berikut untuk penduannya:

Baca: Cara install dan menjalankan Laravel 7 dengan Composer

2# Node Js

Saya menggunakan Node Js versi ke 12.6.2

3# Composer

Silahkan download software composer di sini.

4# Webserver

Xampp, Wamp, Nginx, Laragon dan lain-lain.

Cek Kelengkapan Tools

Buka command promp atau terminal, kemudian cek apakah Node Js dan NPM sudah terinstall dengan baik atau belum.

Anda bisa menggunakan command node -v dan npm -v.

Perhatikan gambar di bawah ini:

Jika muncul seperti pada gambar di atas, maka proses installasi Node Js dan Npm sudah berhasil.

Perlu dicatat, saat kita install Node Js biasanya sudah terinstall Npm juga.

Sekarang, cek apakah composer Anda sudah aktif apa belum.

Gunakan command composer.

Perhatikan gambar di bawah ini:

Jika muncul tampilan di atas saat kita ketik command composer, artinya composer sudah tersinstall dengan baik di perangkat Anda.

Selanjutnya kita bisa menggunakan tools di atas untuk menginstall Vue Js pada project kita.

Tutorial Install dan Menggunakan Vue Js di Laravel 7

Nah, ini pembahasan utamanya.

Yuk!

Membuat Project Laravel

Pertama-tama, silahkan install Laravel 7 terlebih dahulu. Anda bebas menginstall di direktori apa saja. Misalnya D, C, documents ataupun downloads.

Kebetulan saya install di direktori D:\laragon\www\laravel.

Jika sudah memutuskan, silahkan ketik command berikut:

composer create-project --prefer-dist laravel/laravel blog_vue

Masih di terminal, silahkan masuk kke direktori project blog_vue:

cd blog_vue

Aktifkan web server Anda dan coba jalankan Laravelnya:

php artisan serve

Lalu pergi ke browser dan cobalah ketik URL localhost:8000:

Hasilnya:

Cara Install dan Menggunakan Vue Js di Laravel 7

Memasang Package Laravel UI

Kita memerlukan salah satu package bernama laravel/ui untuk membuat scaffolding Vue Js.

Sebenarnya kita bisa manual menambahkan langsung modul-modul untuk Vue Js, tapi kita kan sudah disediakan Package laravel/ui ini.

… sayang kalau tidak kita manfaatkan.

Oke, masih di terminal dengan direktori blog_vue, tambahkan command berikut:

composer require laravel/ui

Integrasi Vue Js di Laravel 7

Untuk menggenerate Vue Scaffolding, ketik command berikut:

php artisan ui vue

Install Node Js di Laravel dengan command:

npm install

Selanjutnya apa?

Tambahkan route di bawah ini pada file routes/web.php:

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

Kemudian buat file bernama app.blade.php dan simpan di direktori resourses/views.

Ketik kode berikut:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Vue Laravel</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app"></div>

    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Cara Install dan Menggunakan Vue Js di Laravel 7

Simpan.

Selanjutnya buka app.js yang ada di direktori resourses/js.

Hapus semua kode yang ada di app.js dan ubah menjadi:

import './bootstrap'
import Vue from 'vue'
import App from './components/ExampleComponent'

const vm = new Vue({
    el: '#app',
    render: h => h(App)
})
Cara Install dan Menggunakan Vue Js di Laravel 7

Simpan.

Compiling dan Testing Vue Js di Laravel 7

Terakhir adalah Anda bisa lakukan compiling dan testing pada project blog_vue.

Anda bisa menggunakan perintah npm run dev atau npm run watch untuk otomatis mengcompile ketika mennyimpan file.

Perintah tersebut akan otomatis melakukan compile ketika dia mendeteksi adanya perubahan file projek.

npm run dev

Sekarang, Anda bisa membuka kembali localhost:8000 atau lakukan refresh.

Maka hasilnya:

Cara Install dan Menggunakan Vue Js di Laravel 7

Oke, sampai di sini selamat. Anda sudah berhasil mengintegrasikannya.

Apa Selanjutnya?

Alhamdulillah tutorial cara install dan menggunakan vue js dan laravel 7 sudah selesai.

… tapi jangan puas dulu.

Masih ada yang perlu Anda pelajari, di antaranya:

  1. Cara Install dan Menjalankan React Js di Laravel 7
  2. Tutorial CRUD menggunakan Laravel 7 dan React Js
  3. Tutorial CRUD menggunakan Laravel 7 dan Vue Js

Selamat belajar …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

2 Replies to “Cara Install dan Menggunakan Vue Js di Laravel 7”

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.