Laravel dengan Vite.js

Baru-baru ini Laravel baru saja melakukan pembaruan, yang salah satunya tidak memakai Laravel Mix lagi sebagai compiler assets nya. Melainkan menggunakan Vite.js.

3 min read

Published on 02 Jul, 2022 (updated: 17 Oct, 2022)

Written by Irsyad A. Panjaitan

Fill in LaravelViteTailwind CSSVite

ArticlesLaravel dengan Vite.js

Baru-baru ini Laravel baru saja melakukan pembaruan, yang salah satunya tidak memakai Laravel Mix lagi sebagai compiler assets nya. Melainkan menggunakan Vite.js.

Jadi sekarang, yang biasanya ada file webpack.mix.js di direktori utama, sekarang berubah menjadi vite.config.js yang kurang lebih isinya seperti:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

jsCopy

Install Tailwind CSS

Dalam artikel ini, kita akan mencoba untuk menggunakan Tailwind CSS sebagai front end kita.

Yang paling pertama, coba lakukan instalasi laravel dan kemudian instal dependencies yang ada by default dengan melakukan perintah berikut.

laravel new project
cd project
npm install

bashCopy

Jika sudah, sekarang instal tailwind css dengan menjalankan perintah berikut.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

bashCopy

Setelah itu, Anda bisa app.css yang ada dalam direktori resources/css dan masukkan tailwind directive nya seperti berikut:

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

cssCopy

Kemudian, Anda bisa buka resources/views/welcome.blade.php dan replace dengan ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div class="min-h-screen bg-blue-500 font-sans antialiased">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
</body>
</html>

htmlCopy

Jika sudah, sekarang Anda bisa jalan development server laravel dengan menjalankan perintah berikut.

php artisan serve

bashCopy

Setelah itu, Anda bisa buka 1 jendela terminal lagi untuk menjalankan compiler nya seperti:

npm run dev
...
	vite v2.9.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 107ms.


  Laravel v9.19.0

  > APP_URL: http://project.test

bashCopy

Dan sekarang harusnya Anda bisa melihat projectnya dengan mengunjungi http://127.0.0.1:8000/ di browser.

Laravel Breeze

Jika Anda sering menggunakan laravel breeze di dalam setiap pembuatan project yang Anda punya, harusnya ini akan sangat mudah sekali.

laravel new breeze-test
composer require laravel/breeze
php artisan breeze:install react
npm install
npm run dev

bashCopy

Dan sekarang, Anda bisa langsung jalankan artisan serve dan kemudian kunjungi http://localhost:8000/ di browser.

Oia, untuk vite.config.js kurang lebih sekarang seperti:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
        }),
        react(),
    ],
});

jsCopy

Breeze SSR

Jika Anda peduli dengan SEO, Anda bisa menggunakan fitur ssr yang diberikan oleh Inertia.js. Dengan breeze itu sangat mudah, hanya tinggal menambahkan flag --ssr sewaktu instalasi breeze seperti perintah berikut:

php artisan breeze:install react --ssr

bashCopy

Dan Anda sudah di beri setup by default dari breeze tersebut tanpa harus setup secara manual. Dan harusnya, untuk file vite.config.js akan sudah berubah menjadi seperti

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            ssr: 'resources/js/ssr.jsx',
        }),
        react(),
    ],
});

jsCopy

Oia, Anda mungkin bertanya, "Bagaimana jika saya sudah menggunakan laravel mix di dalam project saya yang sudah-sudah, apakah bisa di perbarui dengan menggunakan Vite?". Sudah pasti bisa, namun jika Anda malas, Anda bisa menggunakan jasa dari Laravel shift ya untuk melakukan hal itu.

Jika Anda ingin mempelajari bagaimana cara menggunakan Inertia tanpa breeze dari awal, Anda bisa lihat disini.

Semoga artikel ini bermanfaat ya.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.
Sponsor Saweria
4

Share on

Ready to binge

Laravel 8 Dari AwalBelajar Tailwind CSS 3Test Driven Laravel - TDDBelajar Laravel Queues Dari AwalMari Kita Belajar Basic React JSDatatable Dengan Laravel InertiaRealtime Dengan Laravel Echo & PusherMembangun Toko Online Dengan Payment GatewayMore
Parsinta is a online learning platform intended for web developers.Through series-series such as Laravel, Reactjs, Vuejs, InertiaJs, HTML, Bootstrap, Tailwind CSS, and more.

Parsinta is a Trademark of Irsyad A. Panjaitan.

© Copyright 2022 Parsinta. All rights reserved. Yes, all of them (EC00202255558).