Catatan Kuliah: Pengenalan Nux.js

Apa itu Nux.js?

• Nux.js adalah View Framework yang dibangun berdasarkan Vue.js.
• Penting untuk memahami Vue.js sebelum menggunakan Nux.js.

Keunggulan Nux.js dibandingkan Vue.js

1. Auto-import
   • Penggunaan komponen dan modul tanpa perlu mengimpor secara manual.
   • Contoh: Menggunakan ref langsung tanpa import di Nux.js.
2. File-based routing
   • Routing sudah tersedia secara default.
   • Nama file atau direktori menjadi route.
   • Vue.js memerlukan setup manual untuk routing.
3. Server-side rendering (SSR)
   • Nux.js secara default menggunakan SSR.
   • Vue.js menggunakan Client Side Rendering (CSR).
   • Nux.js mendukung penggunaan CSR dan kombinasi SSR dengan CSR.

Instalasi Nux.js

• Pastikan Node.js terinstal.
• Buka terminal dan ketik: npx nux i atletas init nama_project.
  • Contoh: npx nux i atletas init belajar-nux
• Pilih Packet Manager (npm).
• Pindah ke direktori project: cd nama_project.
• Buka dengan text editor (misal VS Code): kode .

Struktur Project Nux.js

• Terdapat direktori nux untuk aplikasi Vue.
• Direktori server untuk membuat API.
• NuxConfig untuk konfigurasi Nux.js, termasuk DevTools dan TxConfig.

Menjalankan Aplikasi

• Buka terminal, ketik: npm run dev dan klik "open in browser".
• Tampilan default berasal dari komponen Nux Welcome.

Routing di Nux.js

• Buat direktori pages di root project untuk routing.
• File index.vue dalam pages menjadi root route.
• Untuk menampilkan routing, gunakan komponen NuxPatch di app.vue.
• Untuk dynamic route, buat file dengan nama [slug].vue.

Navigasi antar Halaman

• Gunakan komponen NuxLink untuk navigasi.
• Contoh penggunaan di index.vue untuk membuat navbar.

Layout di Nux.js

• Buat komponen navbar dan directory layouts untuk layout umum.
• Jika tidak ingin menggunakan layout, bisa menggunakan composable definePageMeta.

Styling di Nux.js

• Tambahkan file CSS di direktori assets dan import di NuxConfig.

Menangani Data

Fetching Data

1. Mutasi Data: Gunakan API seperti JSON placeholder.
2. Query Data: Gunakan composable useFetch untuk mengambil data dari API.

Error Handling

• Buat halaman error 404 dengan file error.vue.
• Gunakan createError untuk menangani error di dynamic route.

Penutup

• Untuk informasi lebih lanjut, silakan baca dokumentasi Nux.js.
• Eksplorasi lebih lanjut dan terima kasih.