Instal dan Konfigurasi Nuxt.js

Saya sangat senang sekali dengan Nuxt.js karena sangat mudah digunakan untuk SSR, apalagi Anda yang kesehariannya menggunakan kerangka kerja Vue.js itu akan menyenangkan. Pada tahapan ini Anda akan menginstal hal-hal yang diperlukan dan tentunya sangat banyak di pelajari. Saya akan menggunakan packages spesial di tutorial ini agar di bagian form nanti akan jauh lebih mudah dan memberikan validasi yang baik.

Daftar isi:

Langkah 1 - Instal Nuxt.js

Ada beberapa cara melakukan instalasi Nuxt.js yaitu manual dan memulai cepat, akan tetapi saya akan menggunakan cara cepat saja. Cara cepat memungkinkan Anda memanfaatkan create-nuxt-app, jadi Anda akan membuatnya siap pakai.

Sebelum menginstal Nuxt.js, setidaknya Anda sudah menginstal Node.js minimal v8.9.x atau terbaru lebih baik. Sekedar info penting saya sangat rekomendasikan untuk memilih Node.js v12.x, karena ketika saya menginstal Node.js v14.x akan terjadi galat saat menjalankan Nuxt.js.

Anda bisa menginstal Nuxt.js pada direktori yang sama pada projek Laravel tutorial ini atau memisahkannya di direktori lain. Akan tetapi saya menginstalnya pada direktori utama Laravel dan nama projek Nuxt.js yaitu client. Hal tersebut akan membuat direktori client pada direktori utama Laravel.

Cara menginstal dengan NPM,

npm init nuxt-app@latest client

Atau menginstal dengan Yarn, dan

yarn create nuxt-app client

Atau menginstal dengan NPX.

npx create-nuxt-app client

Tetapi saya menginstal dengan NPM dan menggunakan package manager Yarn, ikutilah gambar di bawah ini untuk instalasi Nuxt.js.

1.1 instal nuxt

Catatan: Gunakan package manager Yarn agar proses instalasi jauh lebih cepat ketimbang menggunakan NPM dan lihat pada gambar diatas.

Langkah 2 - Instal dan Konfigurasi Bulma

Bulma adalah kerangka kerja CSS bersifat sumber terbuka yang menyediakan frontend siap pakai dan sangat mudah digunakan pada halaman web yang responsif. Kerangka kerja Bulma tidak membutuhkan JavaScript secara bawaan, jadi Anda bisa berintegrasi dengan lingkungan JavaScript kapanpun. Silakan lakukan penginstalan seperti di bawah ini.

yarn add bulma

Setelah berhasil menginstal Bulma sekarang buatlah direktori baru pada direktori assets dengan nama css dan buat juga nama berkas baru app.css. Kemudian salin dan tempelkan skrip di bawah ini pada berkas tersebut.

@import 'bulma/css/bulma.css';

Jangan lupa juga untuk tambahkan skrip di bawah ini pada berkas nuxt.config.js. Konfigurasi ini akan membuat skrip CSS Anda menjadi global dan bisa digunakan di semua halaman berkas.

css: [
    '~/assets/css/app.css'
],

Langkah 3 - Instal dan Konfigurasi vForm

vForm sebuah pustaka kecil untuk Vue.js 2 dan 3 yang membantu Anda dengan form dan validasi saat menggunakan Laravel sebagai back-end. Jadi, vForm memanfaatkan pengiriman HTTP menggunakan Axios untuk membungkus data dengan nyaman dan mengirimkannya ke aplikasi Laravel. Silakan tambahkan pustaka ini ke Nuxt.js pada terminal Anda.

yarn add vform

Sekarang buatlah berkas baru vform.js pada direktori plugins, kemudian salin dan tempelkan skrip di bawah ini. Skrip ini digunakan untuk melakukan konfigurasi Axios di vForm dengan modul Axios Nuxt.js.

import Form from 'vform'

export default ({ $axios }) => {
    Form.axios = $axios
}

Tambahkan skrip di bawah ini untuk mentautkan berkas vform.js pada berkas nuxt.config.js.

plugins: [
    `~/plugins/vform.js`
],

Langkah 4 - Konfigurasi Axios

Jangan lupa juga untuk menambahkan konfigurasi baseURL axios di berkas nuxt.config.js dan lakukan seperti skrip di bawah ini.

axios: {
    baseURL: 'http://127.0.0.1:8000/api',
},

Karena alamat API Laravel dengan prefix api maka harus mengubah baseURL Axios dengan alamat URL tersebut. Jadi vForm juga akan menggunakan baseURL yang sama karena sudah melakukan konfigurasi axios di vForm.

Langkah 5 - Sistem Perutean Nuxt.js

Karena di Nuxt.js akan membuat jalur dan nama perutean berdasarkan direktori dan berkasnya, maka saya akan bahas dahulu sejak awal agar lebih mudah di pahami. Semua berkas perutean ada pada direktori pages dan jika Anda membuat berkas about.vue pada direktori tersebut maka jalur tautan dan nama perutean menjadi /about dan about.

Karena saya fokus pada tutorial CRUD ini jadi seperti skrip di bawah inilah struktur berkas pada direktori pages.

`---pages
|   `---index.vue
|   `---users
|       `---create.vue
|       `---index.vue
|       `---_id
|           `---edit.vue
|           `---index.vue

Berikut nama dan jalur peruteannya:

- users-create (http://.../users/create)
- users (http://.../users)
- users-id-edit (http://.../users/{id}/edit)
- users-id (http://.../users/{id})

Jadi jangan sampai nanti sedikit kebingungan karena nama perutean dari mana berasal dan sebenarnya membuat perutean Nuxt.js bisa secara manual dengan package @nuxtjs/router.

Langkah 6 - Membuat Tata Letak

Secara bawaan Nuxt.js secara langsung sudah membuat tata letak pada direktori layouts dengan nama berkas default.vue. Silakan salin dan tempelkan skrip di bawah ini untuk mengantikan skrip tata letak bawaan pada berkas tersebut.

<template>
    <div>
        <nav class="navbar has-shadow">
            <div class="container">
                <div class="navbar-brand">
                    <NuxtLink to="/" class="navbar-item">Home</NuxtLink>
                    <a
                        @click="isNavbar = !isNavbar"
                        :class="['navbar-burger', {
                        'is-active': isNavbar
                        }]"
                    >
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                    </a>
                </div>
                <div
                    :class="['navbar-menu', {
                        'is-active': isNavbar
                    }]"
                >
                    <div class="navbar-end">
                        <NuxtLink
                            :to="{ name: 'users' }"
                            class="navbar-item is-tab"
                        >
                            Users
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </nav>

        <section class="section">
            <div class="container">
                <Nuxt />
            </div>
        </section>

        <footer class="footer">
            <div class="content has-text-centered">
                <p>
                    <strong>&copy;2021 Febri Hidayan</strong>
                </p>
            </div>
        </footer>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            isNavbar: false
        }
    }
}
</script>

Variabel isNavbar saya gunakan untuk bagian navigasi yang mana jika aplikasi berada pada tampilan yang lebih kecil dari 1024px, maka Anda akan menekan tombol baris tiga horizontal. Jadi variabel tersebut akan bernilai true jika Anda tekan dan begitu sebaliknya, hal itu untuk menampilkan menu pada navigasi.

Pada Nuxt.js Anda bisa membuat tag <a> HTML dengan <nuxt-link> atau <NuxtLink> untuk membuat tautan.

// 1 - tautan manual
<NuxtLink to="/" class="navbar-item">Home</NuxtLink>
// 2 - menggunakan nama perutean
<NuxtLink
    :to="{ name: 'users' }"
    class="navbar-item is-tab"
>
    Users
</NuxtLink>

Semua komponen akan dimuat apa elemen <Nuxt /> yang membuat aplikasi Nuxt.js akan jauh lebih cepat

<div class="container">
    <Nuxt />
</div>

Langkah 7 - Menjalankan Nuxt.js

Setelah semua langkah di atas selesai saatnya untuk menjalankan aplikasi Nuxt.js. Buka tab terminal baru kemudian masuk ke projek Laravel tutorial ini dan cd client dan jalankan skrip di bawah ini pada terminal.

# cara 1 (rekomendasi)
yarn dev
# cara 2
npm run dev

Maka akan memberikan alamat http://localhost:3000.

Catatan: Setelah menjalankan aplikasi Nuxt.js akan melakukan proses kompiler setiap kali ada perubahan pada skrip Nuxt.js.