Berkenalan Dengan NUXT

Jika mengikuti berita-berita terkait vue js pasti tidak akan melewati tools yang satu ini, ya NuxtJs framework untuk vue js ini memang sedang naik daun terlebih sekitar seminggu yang lalu Nuxt secara resmi rilis yang cukup membuat tenang kalau digunakan di produksi.

Silahkan baca tulisan tentang vue di serial catatan vue js

Apa itu Nuxt.

Menurut situs ofisialnya Nuxt itu

Nuxt.js is a framework for creating Universal Vue.js Applications.

Dalam nuxt sudah terdapat… kalau itumah baca ajalah di situs ofisialnya, tulisan di sini cuma ingin berbagi setelah kenalan dan nyoba-nyoba, karena kalau “copas” mah buat apa ? Tulisan ini tidak akan membahas banyak-banyak sekadar hal yang saya coba saja.

Pertama saat pertama kali nyoba Nuxt tidak terlalu beda jauh dengan vue, ada beberapa syntax tambahan, ada beberapa paket yang secara default terpasang, dan sejenisnya.

Salah satu yang sudah saya tulis terkait SSR atau Server Side Rendering yang lebih SEO Friendly silahkan tengok tulisan sebelumnya tentang SSR Vue.

Silahkan baca : Mencoba Nuxt

Route

Route berfungsi untuk mengatur “lalu lintas” web, saat mengakses url apa, maka yang dimunculkan halaman apa, dengan Nuxt pengaturan route dan halaman cukup mudah bahkan bisa dibilang sangat mudah. Untuk mengatur route sebuah halaman yang diperlukan hanyalah membuat satu berkas .vue di folder pages. Saat membuat satu berkas about.vue maka kita bisa langsung mengaksesnya di localhost:3000/about misalnya.

Ingat Case Sensitive about dan About itu berbeda.

Lalu bagaimana dynamic route ? Route dengan parameter di dalamnya. Itu juga tidak terlalu sulit, cukup buat satu berkas diawali dengan uderscore ( _ ), misalkan ingin membuat atu halaman “artikel” dan “artikel/demo-slug-artikel” maka struktur yang dibuat seperti berikut

├── about.vue
├── artikel
│   ├── index.vue
│   └── _slug.vue
├── index.vue
└── README.md

Untuk mengakses parameter kita bisa menggunakan context yang sudah disediakan oleh nuxt.

_slug.vue

Nuxt juga menyediakan ‘fasilitas’ apabila kita ingin mevalidasi parameter yang dikirimkan, misal jika hanya ingin parameter integer saja, tambahkan satu fungsi validate

Saat validate gagal maka akan langsung diarahkan ke halaman 404
Baca Juga : Vue Router

Layout

Dalam sebuah website tidak jarang memiliki beberapa layout, misalnya halaman beranda yang full width sedangkan konten di dalamnya memiliki sidebar di samping kiri atau kanan. Jika pernah menggunakan framework seperti laravel misalnya, di sana sudah ada fitur untuk menyusun layout dengan mudah, di nuxt pun seperti itu menyusun layout di nuxt tidak terlalu sulit cukup tambahkan satu layout di folder layouts.

Misal saya ingin ada layout “dark” dengan background warna hitam, saya cukup buat satu berkas dark.vue di dalam folder layouts seperti ini

├── dark.vue
├── default.vue
└── README.md

dark.vue

Lalu di halaman yang akan menggunakan layout tersebut tambahkan key layout

Silahkan akses halaman tersebut, seharusnya background sudah berwarna hitam.

Silahkan Baca : Layout dengan vue-cli

Root Alias

Kalau menggunakan vue-cli kita dapat menggunakan @ untuk menetukan root folder. ( Kadang fitur ini harus kita atus sendiri di webpack config ). Di Nuxt kita bisa menggunakan simbol ~. Jadi jika ingin memanggil komponen bisa seperti berikut

import Logo from '~/components/Logo.vue'

Silahkan baca : Vue Cli

Mode yang Tersedia

Ada tiga mode yang tersedia di Nuxt

1. Dev
2. Generate ( Statis )
3. Production

Dev

Ini digunakan saat pengembangan, ada fungsi hot reload saat menjalankan mode ini. Untuk mengaktifkan mode ini bisa gunakan perintah

nuxt

Atau

npm run dev

Yang kedua Generate mode ini akan menghasilkan halaman-halaman statis html. Bisa diaktifkan dengan perintah

nuxt generate

Atau

npm run generate

Yang terakhir untuk skala produksi dan bersifat “live” bukan statis html. Mode ini bisa diaktfkan dengan :

nuxt build
nuxt start

Atau

npm run build
npm run start

Pastikan sebelum melakukan “start” harap “di-build” terlebih dahulu.

Silahkan Baca : Memasang Nuxt di Server Debian

Sebenarnya ada satu lagi yang saya coba yaitu store management dengan vuex. tapi udah terlalu panjang ini tampaknya maka akan saya tulis di lain kesempatan.

Silahkan baca : Catatan Tentang Vuex

Sumber Referensi :
https://nuxtjs.org/guide