Tutorial Laravel8 Vue JS #1 Installasi dan Persiapan

Tutorial Laravel8 Vue JS #1 Installasi dan Persiapan

Pada tutorial kali ini membahas mengenai tutorial laravel8 dengan vue js , dimana mencangkup tahapan installasi dan juga persiapan, oleh karena itu tutorial laravel8 dengan vue js ini dibuat secara khusus dan mudah untuk dimengerti bagi kalian yang baru belajar.

Pada saat laravel versi 6 hadir banyak sekali penambahan fitur baru, website yang dibuat dengan laravel dirombak total dan menampilkan logo barunya. Perbedaan yang lainnya akan terasa ketika kita men generate komponen authentication pada laravel atau scafolding dengan menggunakan perintah make auth.

Pada laravel 6 ke atas, Tim dari laravel menghilangkan perintah php artisan make:auth, jadi jika kalian ingin menjalankan sistem authentication secara otomatis pada laravel 6 ke atas, kalian harus mengintal dulu paket yang bernama laravel ui, paket tersebut merupakan paket yang dikembangkan langsung oleh laravel dan memecahkan bagian interface dari laravelnya menjadi suatu paket tersendiri, dengan berikut memungkinkan kalian untuk beralih dan menggunakan library yang lainnya.

Karena pada sebelumnya yaitu laravel versi 5.8 secara default aplikasi laravelnya sudah memiliki UI yang dibutuhkan yaitu menggunakan bootstrap dan menggunakan vue.js padahal tidak semua orang akan menggunakan UI tersebut makanya tim dari Larvel berinisiatif untuk mengubahnya dimana pada versi laravel 6 keatas UI nya sudah terpisah dan dijadikan sebagai modul yang bernama laravel UI.

Pengenalan Vue

Tutorial laravel8 dengan vue js ini tentunya kita harus mengenal Apa itu VueJS? Vue js adalah sistem JavaScript reformis dan open source untuk membangun antarmuka/UI situs yang dibuat oleh Evan You. Struktur ini pertama kali disampaikan pada Februari 2014 dan bentuk stabil disampaikan pada Desember 2019.

Vue JS didukung oleh perpustakaan Javascript total dan sangat mudah untuk dijalankan. Semua hal dianggap sama, Vue JS bagaimanapun dapat digabungkan dengan dialek HTML dan CSS yang tidak banyak berubah. Dengan demikian, Anda tidak akan mengalami kesulitan mempelajarinya.

Vue (artikulasi/vjuː/, seperti tampilan) adalah struktur reformis untuk membangun UI. Berbeda dengan struktur padat lainnya, Vue direncanakan mulai dari tahap paling awal untuk dirangkul secara perlahan. Pustaka pusat dipusatkan di sekitar lapisan tampilan saja, dan tidak sulit untuk didapatkan dan digabungkan dengan pustaka yang berbeda atau usaha yang ada. Selain itu, Vue juga dilengkapi sepenuhnya untuk membuat aplikasi SPA yang disempurnakan ketika bergabung dengan pustaka pendukung, seperti Vue Router dan lainnya.

Vue JS pertama kali dikerjakan oleh Evan You pada tahun 2013, dimana saat itu ia bekerja sebagai Creative Technologist di Google Creative Labs. Setelah dua tahun di Google, ia pindah ke Meteor, di mana ia merakit struktur JavaScript open source Meteor Js. Setelah itu dia memusatkan perhatian pada pembuatan Vue JS hingga saat ini

Oke selanjutnya kita akan melakukan installasi framework laravel dan menerapkan vue,js kedalam project laravel yang kita buat, silahkan kalian simak pembahasan dibawah ini:

Installasi Framework Laravel

Pada bagian instalasi framework laravel ini kita akan menginstal dengan menggunakan composer, pastikan teman-teman sudah menginstall composer pada PC yang kalian gunakan dan pastikan juga terhubung dengan koneksi. Pertama tama silahkan kalian membuat folder baru dengan nama BelajarVue pada folder tersebut kita akan gunakan untuk direktori installasi dari project laravel yang kita install. Setelah itu buka command prompt dan masuk kedalam direktori folder tadi selanjutnya kerikan perintah berikut ini:

composer create-project laravel/laravel BelajarVue

Pada berintah diatas kita akan menginstal project laravel dengan nama BelajarVue, untuk penerapannya sendiri silahkan kalian perhatikan gambar dibawah ini:

Tutorial Laravel8 Vue JS #1 Installasi dan Persiapan
Installasi Laravel

Pada gambar diatas kita dapat melihat direktori installasi dari project laravel, silahkan tunggu sampai proses installasi selesai. Jika sudah maka akan tampil seperti gambar berikut:

Tutorial Laravel8 Vue JS #1 Installasi dan Persiapan
installasi Selesai

Jika sudah selesai proses instalasi framework laravel maka kita akan masuk pada tahap SETUP Laravel dan Vue. Silahkan teman-teman simak pembahasan dibawah ini.

Setup Laravel dan Vue

Untuk melakukan setup Laravel dan Vue, kita dapat menggunakan 2 cara yaitu kita membuat setup sendiri dan kita dapat secara otomatis dibuatkan setupnya ketika kita menjalankan perintah

composer require laravel/ui

dan tunggu sampai proses installasi laravel UI itu selesai, maka jika berhasil installasi kita akan melihat seperti gambar dibawah ini.

Tutorial Laravel8 Vue JS #1 Installasi dan Persiapan
Install laravel/ui

Untuk mengecek apakah installasi laravel/ui berhasil atau tidak maka kita dapat membuka file composer.json lalu cari pada bagian require maka akan terlihat seperti gambar berikut:

Tutorial Laravel8 Vue JS #1 Installasi dan Persiapan
composer.json

Jika sudah berhasil berarti kalian dapat melakukan atau membuat template scaffolding, ada beberapa yang dapat kita gunakan tentunya untuk membuat schafolding teman-teman dapat melihat pada perintah dibahaw ini:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

Sekedar untuk pengetahuan saja, para laravel menggunakan Laravel MIX yang dapat menyediakan API yang baik dan dapat digunakan untuk compailing. Pada Laravel MIX ini juga kita dapat menggunakannya untuk integrasi dengan Vue.

Karena pada tutorial kali ini kita akan berfokus membuat aplikasi sederhana dengan menggunakan SPA Vue saja tampa adanya authetication maka kita akan menjalankan perintah seperti berikut:

php artisan ui vue

Jika berhasil maka terdapat penambahan beberapa componen baru pada direktori resources/js dan pada file packages.json akan muncul seperti gambar dibawah ini.

Tutorial Laravel8 Vue JS #1 Installasi dan Persiapan
packages.json

File packages.json merupakan suatu file yang digunakan untuk kebutuhan javascript yaitu pada bagian backend atau frontend, dimana setingan UI memberikan setingan awal untuk proses developmentnya.

Memperkenalkan Node JS di Laravel

Saat ini Anda dapat memperkenalkan Node JS di Laravel dengan menggunakan perintah npm memperkenalkan. Seperti yang kita bicarakan sebelumnya, jika Anda telah memperkenalkan Node Js, biasanya menyertakan npm. Oleh karena itu kita dapat menggunakan perintah pengenalan npm.

Sebelum melakukan compiling css dan javascript, kalian tentunya harus menginstall dependensis untuk melakukan note packages manager (NPM). Untuk melakukannya kita akan mengitikan perintah berikit untuk mendownload semua paketnya:

npm install

Untuk proses installasinya seperti berikut ini:

Tutorial Laravel8 Vue JS #1 Installasi dan Persiapan
Install NPM

Installasi sudah berhasil, semua dependensis sudah dipasang kedalam project laravel, maka jika kita lihat pada project terdapat penambahan folder baru dengan nama node_modules, jika sudah berhasil melakukan proses installasi dependensis maka kita akan menjalanan perintah:

npm run dev

Tahap developmen atau tahap building akan dilakukan oleh Laravel-MIX, semua setingan dari laravel MIX terdapat pada folder resource untuk CSS dan JS nya.

Silahkan tunggu untuk proses dalam menjalankan perintah npm run dev, kita kalian berhasil untuk menjalankannya maka akan tampil seperti gambar berikut:

Tutorial Laravel8 Vue JS #1 Installasi dan Persiapan
npm run dev

Jika sudah berhasil maka kita siap untuk membuat aplikasi dari framework laravel dengan vue js. Untuk tahap pertama ini mungkin sekian yang dapat saya sampaikan, semoga teman-teman dapat memahami apa yang sudah saya jelaskan diatas.

Terimakasi telah berkunjung dan membaca artikel ini mengenai Tutorial Laravel Vue JS #1 Installasi dan Persiapan, semoga bermanfaat. Baca juga Belajar Framework Laravel8 Pemula

Salam Success, By: Muhammad Rizal Supriadi

Leave a Comment

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