Laravel 7 dan Vue 2.6 — Integrasi Tailwindcss ke Laravel + Vue

6 min readJun 21, 2020

Artikel Sebelumnya :

Laravel 7 + Vue 2.6 — Menggunakan Vue Router untuk Web SPA (Singgle Page Application)

Di artikel kali ini kita akan mencoba membuat projek fresh baru, kita tidak akan melanjutkan artikel sebelumnya okai. Bagi kalian yang masih awam dengan vuejs dan laravel, saya sarankan melihat artikel sebelumnya yang sudah saya buat tentang “Membuat Projek Laravel + Vue” serta “Menggunakan Vue Router Untuk Web SPA”.

Link Artikel :
#1 Laravel 7 + Vue 2.6 — Instalasi dan Membuat Projek Laravel dan Vue
#2 Laravel 7 + Vue 2.6 — Menggunakan Vue Router untuk Web SPA (Singgle Page Application)

Membuat Projek Laravel Baru

Mari kita buat projek fresh laravel, berikut perintahnya menggunakan composer :

composer create-project --prefer-dist laravel/laravel laravue-tailwind

generate scafollding / fresh project laravel

Disini saya membuat nama projek baru ini dengan “laravue-tailwind”. Tunggu sampai proses generate scafollding ini selesai.

Setelah Selesai, mari sekarang kita masuk ke folder Laravel kita menggunakan perintah cd :

cd laravue-tailwind

Memasang Package Laravel UI

Kenapa kita menggunakan package ini? karena di laravel 7 semua bagian ui dari laravel terpisah dan di buatkan sebuah package baru yang bernama laravel ui.

Kita membutuhkan ini untuk membuat preset vue js kita kedalam laravel, sebenarnya kita bisa lakukan secara manual. Tapi kalau ada yang mudah kenapa yang susah ? ehehe

composer require laravel/ui

intall package larave/ui to laravel project

Dan Tunggu sampai selesai teman teman, dan berikut output perintahketika sudah selesai memasang package laravel/ui :

Selanjutnya, kita generate vue scafollding dengan laravel/ui ini, menggunakan perintah simpel berikut :

php artisan ui vue

generate vue scafollding for laravel project

Tara.. scafollding sudah berhasil di generate!! Kalau kalian bingung apa yang dilakukan oleh laravel/ui ini, jadi dia mengenerate preset untuk package.json kita agar bisa kita npm install , dan juga dia menggenerate main.js yang ada di folder resources/js/ dan mengenerate base css kita di resources/sass/app.scss

Memasang Tailwindcss

cukup simpel, gunakan perintah berikut :

npm install tailwindcss --save-dev

atau jika kalian pake yarn bisa dengan perintah :

yarn add tailwindcss --dev

Karena saya pake yarn jadi saya mencoba menggunakan perintah kedua.
Tunggu proses nya sampai selesai yah :

Dan akhirnya selesai juga :

Selanjutnya, kita perlu menggenerate file config untuk tailwind, berikut perintahnya :

npx tailwind init

atau :

./node_modules/.bin/tailwind init

Setelah menjalankan perintah diatas, harusnya akan ada file baru di root projek kalian bernama tailwind.config.js . File ini nantinya bisa kita gunakan untuk melakukan config seperti menambah variants, plugins, dll

Selanjutnya kita integrasikan ke webpack atau laravel-mix kita, edit file webpack.mix.js yang ada di root projek folder kalian. tambahkan beberapa fungsi untuk mengikut sertakan tailwind kita :

const mix = require('laravel-mix');const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')    .sass('resources/sass/app.scss', 'public/css')    .options({        processCssUrls: false,        postCss: [ tailwindcss('./tailwind.config.js') ],    });

disini kita gunakan postcss, lalu require tailwindcss dan mengapply config tailwind kita.

Selanjutnya pastinya kita edit file resources/sass/app.scss menjadi :

@tailwind base;@tailwind components;@tailwind utilities;

Oh iya, karena kita pake scafollding vue dari laravel/ui, kita harus edit ulu dibagian resources/js/bootstrap.js

di file tersebut ada bagian ini :

try {    window.Popper = require('popper.js').default;    window.$ = window.jQuery = require('jquery');    require('bootstrap');} catch (e) {}

Oke, jika kalian tidak berencana menggunakan bootstrap, sekiranya hapus saja bagian require('bootstrap') dan lainya misal window.Popper = require('popper.js').default

Jika kalian tidak menggunakan popper dan bootstrap tersebut, ganti menjadi :

try {    window.$ = window.jQuery = require('jquery');} catch (e) {}

Oh iya kita lupa menghapus resources/sass/_variable.scss . ini hasil generate dari bootstrap scafollding, karena kita mengganti menjadi _variable.scss danmungkin kalian tidak menggunakanya. jadi hapus saja file tersebut.

Compiling Assets

oke, saatnya compiling. Gunakan perintah berikut untuk sekali compiling ke mode production :

npm run prod

Dan jika berhasil dan tidak ada error satu pun harusnya muncul seperti ini :

Membuat Blade dan mengalihkan Request Laravel

arahkan semua request dari laravel ke vuejs, agar route dipegang penuh oleh vue-router juga.

Edit routes/web.php :

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

Fungsi diatas, kita membuat sebuah route point, dimana parameter {any} akan kita beri regex pattern. Fungsinya agar semua request route akan diarahkan ke satu template yaitu view layouts.vue .

Sekarang kita buat view file nya untuk me load vuejs dan tailwind kita, buat file resources/views/layouts/vue.blade.php

<!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 - Vuejs - Tailwindcss</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  </head>
  <body>
    <div id="app"></div>
    <script src="{{ asset('js/app.js') }}"></script>
  </body>
</html>

File blade kita sangat simpel, hanya untuk mengambil assets css dan js dari tailwind css dan membuat base vue js nya yaitu div#app .

Integrasi Vue ke Laravel

Buat beberapa file yang akan kita butuhkan nanti :

selanjutnya, kita akan mengedit main js dari vue kita, edit file resources/js/app.js

import './bootstrap'
import Vue from 'vue'
import Home from './components/Home.vue'new Vue({
  el: '#app',
  render: h => h(Home)
})

Lalu jangan lupa buat juga resources/js/components/Home.vue :

<template>
  <div>
    <h1 class="text-xl">Laravel + Vue + Tailwind Test!</h1>
    <button
      class="bg-blue-500 hover:bg-blue-700
      text-white font-bold py-2 px-4 rounded"
      >
     Tailwind Button
    </button>
   </div>
</template>

Sekarang ulangi lagi, kita compiling asset kita dengan perintah :

npm run prod

atau

npm run dev

Atau kalau kalian mau menggunakan fitur Hot Reload (Hot Module Replacement) milik vue js yang bisa membuat compiling automatis ketika terdeteksi ada perubahan file, gunakan :