Halo semua, apa kabar? Kali ini kita akan belajar Nux.js Tapi sebelum itu, saya bahas sedikit teorinya Jadi, apa itu Nux.js? Nux.js adalah View Framework Artinya, Nux.js ini dibangun berdasarkan View.js Jadi, kalau ingin menggunakan Nux.js, harus bisa View.js Lalu, kenapa kita harus menggunakan Nux.js dibandingkan View.js biasa?
Karena, Nux.js memiliki beberapa keunggulan. Yang pertama, yaitu auto-import, yang artinya kita tinggal langsung menggunakan komponen ataupun modul yang kita miliki. Jadi kita tidak perlu lagi mengimport secara manual seperti yang ada di Vue.js.
Contohnya, kita ingin menggunakan ref, maka kalau di Vue.js biasa, kita harus mengimportnya, sedangkan di Nux.js, kita tinggal langsung menggunakannya. Kemudian, file-based routing. LinuxJS secara default sudah ada routingnya, jadi kita tinggal langsung menggunakannya. Dan file-based routing, yang artinya ketika kita membuat file ataupun directory, maka namanya menjadi route.
Sedangkan di Vue.js tidak ada routing. Kalau ingin menggunakan routing, kita harus setupnya secara manual. Dan kemudian di LinuxJS secara default menggunakan server-side rendering. atau disingkat SSR, sedangkan di Vue.js menggunakan Client Set Rendering. Tentu saja di Nux.js kita juga bisa menggunakan Client Set Rendering, atau bahkan kita bisa menggabungkan SSR dengan CSR, berikutnya dan lain-lain.
Nah untuk lebih lengkap tentang Nux.js, silakan teman-teman baca dokumentasinya saja. Oke cukup tentang pengenalan singkatnya. Selanjutnya kita akan langsung menggunakan Nux.js. Oke, di sini kita akan menginstall Nux.js.
Pastikan Node.js telah terinstall. Dan silakan buka terminalnya. Kemudian ketikan npx nux i atletas init nama projectnya.
Di sini saya berikan namanya belajar strip nux. Kemudian tekan enter. Setelah itu akan ada pertanyaan, Packet Manager mana yang akan kita gunakan. Di sini kita menggunakan npm, jadi pilih npm.
Tinggal tunggu instalasinya. Setelah itu akan ada pertanyaan lagi, kita pilih nos saja untuk init gitnya. Kemudian silakan pindah directory ke projectnya. Ketikan cd spasi nama projectnya, yaitu di sini namanya belajar nox.
Kemudian saya akan membukanya di text editor. Saya ketikan kode spasi titik. Di sini saya menggunakan VS Code sebagai text editornya.
Dan kalau kita lihat di struktur projectnya, agak berbeda ya dengan yang ada di view. Di sini ada tambahan directory titik nooks. Directory ini digunakan untuk mengenerate aplikasi view-nya. Kemudian ada directory bernama server. di directory ini digunakan untuk membuat API, jadi kita bisa menggunakan Nux sebagai full stack, dan kemudian terdapat NuxConfig, ini digunakan untuk memberikan konfigurasi pada Nuxnya, contohnya di sini sudah ada DevTools, dan di bawahnya sini terdapat TxConfig, yang mana Nux ini sudah terdapat type-nya, walaupun kita tidak menggunakan TypeScript.
Oke, kalau kita lihat di app.vue, isinya seperti ini, Dan kalau kita perhatikan lagi di struktur projectnya, sudah tidak ada index.html. Nah di sini, NUX secara otomatis akan mengenerate index.html. Jadi kita tidak perlu secara manual membuat index.html.
Kemudian kalau kita lihat aplikasinya, silakan buka terminal, tekan ctrl-backtick, kemudian ketikan npm run dev, klik open in browser. Dan ini adalah tampilan default dari Nux. Nah tampilan ini berasal dari komponen Nux Welcome. Dan bisa teman-teman lihat ya, komponennya langsung bisa digunakan karena ada fitur auto-import. Oke berikutnya, share default file app.vue ini menjadi entry point di Nux.js.
Dan untuk sistem routingnya, sifatnya opsional. Yang artinya kita diberikan kebebasan mau menggunakan routing atau tidak. kalau ingin menggunakan routing, kita tinggal buat directory yang bernama page di root projectnya ya kemudian di dalamnya tinggal kita buat file disini saya akan buat rootpadnya, index.view, saya buat template, saya berikan h1, segisinya, ini rootpad, save tapi disini untuk routingnya tidak langsung bisa digunakan, untuk menggunakannya ada dua cara yang pertama silahkan ke app.view, hapus divnya, kita gunakan komponen bawaan dari nuke yang bernama NuxPatch.
Dengan menggunakan komponen ini, maka akan menampilkan routingnya. Save, kita lihat di browser, refresh, maka tampil patchnya. Dan untuk cara kedua, kita ganti entry pointnya, yang awalnya app.view, kita ganti menjadi index.view.
Caranya, tinggal kita hapus, update view, maka secara otomatis index view nya menjadi entry point nya, kalau kita lihat ke browser, refresh, maka tetap tampil root path, kemudian kalau teman-teman perhatikan ya di bawah sini ini adalah dev tool ya, jadi kalau kita klik gambar gunung ini, disini tinggal kita klik get started, nah disini ada informasi tentang NUX nya, untuk versi view nya kemudian patchnya, componentsnya, dan lain-lain disini cara penggunaannya gampang saja misalnya teman-teman ingin mengetahui patch yang teman-teman buat tinggal teman-teman klik patchnya maka disini tampil informasinya oke, itu tentang DevTool saya kembalikan lagi kembali ke TX Editor tapi disini saya akan menggunakan cara pertama yaitu saya akan menggunakan Nux Patch di App.View jadi saya kembalikan lagi app.view nya oke berikutnya saya akan menambahkan routing lagi ke page buat directory yang bernama post kemudian buat file di dalam directory post yang bernama index.view buat template, kita berikan dulu h1 isinya kita berikan ini, post, save seperti yang saya bilang sebelumnya untuk membuat routing kita bisa membuat file ataupun directory dan file index yang di dalam directory post menjadi rootnya ya root dari post jadi kalau kita ke browser kemudian di urlnya kita buat slash post maka tampil ini post jadi teman-teman jangan buat lagi nama filenya post ya karena nanti hasilnya seperti ini post slash post kemudian untuk membuat dynamic route, kita bisa membuatnya seperti ini saya buat di directory post, buat file cara buatnya kita berikan kurung siku, kemudian di dalam kurung siku itu kita buat parameter disini saya berikan namanya slug, dan di tutup sikunya kita berikan ekstensinya yaitu.view saya berikan template h1, saya buat ini dynamic root, save ke browser, kita coba di urlnya kita ketikan slash post slash 1, maka seharusnya tampil dinamik rootnya enter, oke tampil ya, kita coba lagi, kita berikan 2, maka tampil dinamik rootnya kembali ke text editor, oke berikutnya, kalau kita ingin menangkap semua rootnya, contohnya saya akan menangkap semua root Setelah add post, untuk membuatnya caranya mirip ketika kita membuat dynamic route, tinggal kita menambahkan titik 3 di depan nama parameternya. Jadi saya akan membuat dynamic route ini akan menangkap semua route-nya. Tinggal kita tambahkan titik 3 di depan slug-nya, 1, 2, 3, enter.
Kita coba ke browser, kita tambahkan di URL-nya, plus 3. ntar akan tampil halaman dinamik route nya oke berikutnya saya akan membahas tentang nested route untuk membuat nested route kita harus membuat satu file dan satu directory untuk menampung child nya contohnya saya akan membuat route post ini menjadi nested pertama saya akan mengubah nama index post nya menjadi post ya karena kita akan menjadikannya sebagai parent nya kemudian kita membuatnya satu level dengan directory pos jadi saya keluarkan sudah satu level dan perlu teman-teman catat kalau nama direktorinya harus sama dengan nama perannya ya dan setelah itu di file postnya kita tambahkan komponen NuxPatch untuk menampilkan childnya di bawah satu buat NuxPatch save kita coba ke urlnya ke post dan kita ke dinamic route nya kita buat 2 enter, angka tampil di bawahnya. Oke cukup tentang route-nya, saya akan kembalikan lagi, karena saya tidak akan menggunakan nested route, dan juga saya tidak akan menangkap semua route-nya. Berikutnya, untuk melakukan navigasi antara halamannya, kita bisa menggunakan komponen yang bernama nox link. Jadi di index patch-nya, kita buat navbar, dan di dalam L ini, kita gunakan komponen nox link. Untuk isinya saya berikan home, dan di komponen Nuxlink ini kita harus memberikan props yang bernama to kita berikan path-nya disini slash yaitu root path-nya kemudian kita buat lagi ini untuk pos-nya dan kita berikan path-nya yaitu pos save kita lihat ke root path-nya pos maka dipindahkan ke halaman pos Berikutnya saya akan membahas tentang layout.
Nah biasanya kan ketika kita membuat aplikasi, biasanya ada navbar, kemudian ada footer. Dan navbar dan footer tersebut biasanya digunakan di semua halaman. Nah disinilah kita akan membuat layout untuk menampilkan navbar di semua halaman.
Jadi balik ke text editor, untuk navnya kita jadikan komponen cut. untuk membuat komponen sama seperti yang ada di Vue biasa tinggal kita buat directory yang bernama components kemudian kita buat komponennya disini saya akan beri nama navbar.vue buat template, kemudian kita paste, save setelah itu di root projectnya kita buat directory yang bernama layouts kemudian kita buat file yang bernama default.vue Kemudian di dalamnya kita buat template. Di sini kita gunakan komponen kita, yaitu navbar. Dan setelah itu, untuk menampilkan halamannya, kita gunakan tag slot. Kemudian save.
Perlu teman-teman perhatikan ya, ketika teman-teman tidak menggunakan app component, maka secara otomatis layoutnya akan membungkus patchnya. Tapi ketika menggunakan app.vue, maka kita harus menggunakan komponen. yang pertama, nux layout, kemudian kita bungkus nux pathnya kemudian save, kita lihat, refresh, oke telah tampil untuk navbar nya ke home, oke telah tampil juga dan kalau kita tidak ingin menggunakan layout, kita bisa menggunakan yang namanya composable composable itu bisa teman-teman anggap sebagai function helper bawaan dari nux ya contohnya kita tidak menggunakan layout pada root post ya jadi ke text editor, ke index post untuk menggunakan composable, kita buat script nama composable nya yaitu define-patch-meta dan disini kita berikan argumen nya yaitu object, dan kita berikan key nya yang bernama layout, dan value nya yaitu false dengan begini road postnya tidak menggunakan layout save kita lihat ke browser refresh maka tidak tampil layoutnya dan tentu saja kita bisa menggunakan custom layout ya jadi kita bisa menggunakan lebih dari satu layout contohnya kita akan menggunakan layout khusus untuk road post kembali ke text editor di directory layouts kita buat lagi file yang bernama custom.view kita buat template, misalnya kita buat h1 yang isinya ini custom dan kita berikan slot save, kemudian ke index post, untuk value nya di bagian layout kita ganti yaitu kita berikan string kemudian nama layout nya disini custom, save ke text editor, refresh, angka tampil layout ini custom kembali ke text editor, disini saya akan menggunakan satu layout, jadi saya akan kembalikan lagi Oke berikutnya saya akan membahas tentang styling ya.
Untuk styling di Nux mirip ya ketika kita menggunakan view biasa. Cuma disini ada tambahan yaitu nanti kita akan mengimport file CSSnya di Nux config. Jadi di root projectnya kita buat lagi directory yang bernama assets buat file CSSnya. Disini saya beri nama main.css.
Saya akan styling sederhana saja yaitu saya akan reset. Setelah itu. ke next config, disini kita tambahkan lagi property yang bernama css untuk value nya kita berikan array kemudian kita berikan string yaitu path dari css nya kemudian save, dan kalau kita lihat maka disini telah berhasil di reset ya, kalau kita inspect ke bawah, nah disini sudah diterapkan ya, untuk reset nya oke close lagi dev tool nya dan disini saya akan memberikan styling untuk navbarnya supaya tampilannya tidak terlalu buruk kembali ke text editor, ke navbar untuk proses stylingnya saya akan skip karena kita hanya fokus ke nux oke saya juga menambahkan logo disini kita lihat ke browser, saya buat seperti ini kemudian untuk meningkatkan user experience kita akan membuat linknya akan aktif sesuai dengan route nya Jadi ke text editor, untuk membuatnya, pertama kita berikan props untuk komponen nox linknya, yaitu class.
Dan di sini kita akan bind, setelah itu kita berikan objek. Nah di sini saya telah membuat class yang bernama active, jadi saya berikan di sini active. Dan kemudian untuk value-nya, kita akan cek untuk route-nya.
Cara untuk menangkap route-nya, kita bisa menggunakan objek yang bernama $route. titik, path, kita akan cek kita berikan petik 1, kita berikan pathnya dan juga kita copy kita gunakan di komponen bawahnya disini kita ubah kita berikan post, save petik selitor, disini bisa teman-teman head ya postnya aktif kalau kita ke home, maka disini warnanya biru kemudian saya akan membahas tentang head ya disini bisa teman-teman lihat, untuk title-nya belum ada untuk cara memberikan title-nya, kita bisa membuatnya di nuxconfig, ke text editor, ke nuxconfig kita berikan property baru yang bernama app, kemudian kita berikan value-nya object disini kita berikan property yang bernama head, kita berikan lagi object, value-nya disini kita berikan property yang bernama title, misalnya saya berikan title-nya belajar dan disini kita akan tambahkan meta jadi kita buat lagi property yang bernama meta value nya yaitu array kita berikan object kemudian kita berikan disini nama meta nya kita berikan description kemudian kita berikan kontennya belajar-nox kemudian save kita lihat di browser maka bisa teman-teman lihat ya di title nya telah tampil belajar dan kalau kita inspect di headnya, kita lihat disini telah tampil meta bernama description kontennya belajar nux jadi seperti itu untuk membuat meta tag dan juga title kemudian saya akan membahas tentang transisi di nux memiliki fitur untuk memberikan transisi jadi nanti ketika kita berpindah halaman maka akan tampil transisi untuk membuatnya kita bisa membuatnya seperti ini dibawah head kita buat, klik transisi disini kita berikan value nya object kemudian kita berikan property yang pertama yaitu name disini kita berikan path untuk namenya karena kita memberikan transisi untuk path kemudian kita berikan property yang kedua yaitu mode mode yang kita gunakan yaitu out in setelah itu save kemudian kita berikan CSS nya untuk CSS nya kita akan gunakan di App.View atau juga bisa teman-teman gunakan di menu CSS disini saya gunakan di App.View, dibawahnya kita buat style disini kita buat style nya global, kemudian kita tambahkan CSS nya teman-teman bisa membuatnya seperti ini untuk transisi nya untuk nama class nya ini, ini berasal dari nox bukan saya buat sendiri jadi teman-teman bisa cek di dokumentasinya, setelah itu save ke browser, kita coba ya. Ketika saya ke pos, maka telah tampil efek transisinya.
Saya ke home, tampil efek transisinya. Jadi seperti itu tentang efek transisinya. Untuk lebih jelasnya silahkan teman-teman ke dokumentasinya.
Selanjutnya saya akan membahas tentang fetching data. Yang pertama kita akan melakukan mutasi data. Untuk mutasi datanya kita buat di road pos.
Dan di sini. nanti kita buat form datanya nah untuk simulasi mutasi datanya kita akan menggunakan API silahkan teman-teman ke websitenya yang bernama fake API pilih yang JSON placeholder kemudian pilih GUIDE dan kita copy untuk API nya dari https sampai dengan POST setelah itu ke text editor kita akan simpan API nya di file.env secara default, Nux.js mendukung file.env jadi kita langsung bisa membuat file.env nya kita buat di root project nya.env disini kita buat nama variabel nya misalnya saya buat base url dan paste nah disini kita akan menggunakan file.env ini di Nux.config jadi di depan base URL nya, kita tambahkan prefix yang bernama nox underscore public underscore save ke nox config kemudian di bawah app kita buat runtime config untuk value nya object kemudian kita buat public, kemudian untuk value nya kita berikan lagi object dan setelah itu kita beri nama variable nya untuk nama variable nya kita harus samakan dengan yang ada di variable.env yaitu base url disini ya. Jadi kita berikan disini base url dan untuk value-nya yaitu kita berikan string kosong. Nanti value-nya akan di-override dengan variable.env yang ini. Dan perlu teman-teman ketahui ketika kita menambahkan nuks underscore public maka disini variable.env-nya bisa diakses di client.
kalau tidak ingin diakses oleh client, maka silakan teman-teman hapus publicnya seperti ini ya, tapi disini kita gunakan di client, jadi kita gunakan di public kembali ke nuxconfig, dan disini untuk styling dari nama propertynya, yaitu menggunakan camelcache setelah itu save, dan kita gunakan di index post dan disini kita buat form datanya, nah untuk pembuatan form datanya saya akan skip karena caranya sama saja seperti yang ada di Vue biasa oke saya telah membuatnya dan kalau kita lihat di browser saya refresh saya buat form datanya seperti ini oke kita akan mulai untuk melakukan mutasi datanya ke text editor yang pertama kita gunakan Composable yang bernama use runtime config dengan menggunakan Composable use runtime config kita bisa menggunakan variable.env yang telah kita setting di nuxtconfig dan disini berarti turn object, kita tangkap kita buat const, saya beri nama runtime kemudian kita lakukan mutasi datanya di function submit, kita tambahkan asing kemudian kita buat await kita gunakan utility function yang bernama $fetch nah utility function ini menerima beberapa argumen yang pertama Kita berikan urlnya, runtime.public.name.env, yaitu base url. Dan kemudian untuk argumen kedua, sifatnya opsional. Di sini kita bisa setting, kita berikan objek. Kemudian kita gunakan add hot, kita berikan methodnya, post.
Dan kita berikan datanya, yaitu body. Di sini datanya, yaitu form data.value. Ini nama state saja, kalau nama state teman-teman beda silahkan sesuaikan saja. Dan setelah kita melakukan mutasi data, kita akan redirect ke halaman home. Untuk melakukannya, kita bisa menggunakan utility function yang bernama navigate2.
Jadi di bawahnya kita buat await navigate2, kita berikan path-nya, disini kita berikan slash. Kemudian save, kita coba disini title-nya. kita berikan test, kontennya test, klik posting, maka diarahkan ke root pathnya Selanjutnya kita akan melakukan query data di root path-nya. Jadi ke text editor, ke index.patch, di test template, kita buat script. Yang pertama kita gunakan lagi variable env-nya.
Dan untuk melakukan query data, kita tidak menggunakan utility function $fetch, tapi kita menggunakan composable yang bernama useFetch. Jadi di bawah useRuntime, kita buat useFetch. dan kita berikan argumennya, yaitu url-nya.
Di sini kita berikan runtime.public.baseurl. Nah, komposable ini monitor object, jadi kita tangkap, kita buat const, di sini saya langsung destructing, saya akan ambil datanya, kemudian saya buat aliasnya. Lain property data, saya dapat property yang lainnya, contohnya, pending. Untuk lebih lengkapnya, silakan teman-teman cek di dokumentasinya. tinggal kita gunakan untuk postnya kita gunakan di bawah sini di template, kita buat main kita pindahkan h1 ke dalam hapus isi h1, kita buat list post di bawah ini kita buat div disini saya berikan class, grid content kita berikan directive vif kita yang menampilkan grid contentnya kalau ada postnya selanjutnya di dalamnya kita buat cardnya nah cardnya ini saya akan bungkus di dalam komponen Nux link karena nanti ketika kita klik cardnya maka akan diarahkan ke detail postnya jadi kita buat nux link untuk komponen Nux linknya kita berikan directive before kita berikan alias yaitu post of post disini saya akan ambil 10 datanya saja jadi saya slice index ke 0 saya ambil 10 data Kemudian kita berikan props2, kita bind, kemudian kita berikan template literal, kita berikan post, slash, yaitu post id.
Dan juga kita berikan key, yaitu post id. Setelah itu di dalamnya kita buat div, saya berikan class, namanya card, di dalamnya saya buat h3, kemudian isinya kita berikan text interpolasi. yaitu post, title, dibawahnya paragraph, yaitu post, body kemudian untuk stylenya, saya akan skip saja teman-teman bisa buat sendiri setelah itu save, kita lihat di browser oke disini datanya telah berhasil didapatkan oke berikutnya, kita akan tangani detail postnya karena saat ini kalau kita klik untuk cardnya disini masih tampil static datanya jadi balik ke text editor ke dynamic route nya buat script kita gunakan lagi variable uinv nya nah disini kita akan tangkap untuk params nya untuk menangkap params nya kita bisa menggunakan composable yang bernama useRoute jadi di bawah useRuntime kita buat useRoute composable ini berleter objek jadi kita tangkap const saya beri nama route Kemudian kita query datanya.
Kita gunakan use fetch. Kita berikan template literal. Karena kita akan gabungkan variable env dengan paramsnya. Runtime public base url slash route.
Untuk menangkapnya kita gunakan params. Nama paramsnya. Yaitu disini slug.
Ini ya slug. tinggal kita tangkap, kita buat const structing, kita ambil datanya kemudian kita buat alias yaitu pos tinggal kita gunakan dih1 nya, kita abscissi nya kita gunakan text interpolation kemudian kita buat pos yaitu title dibawahnya paragraph pos body dan disini dibawahnya kita buat lagi paragraph kita buat pos id yaitu post id, save ke browser, datanya telah tampil, kita coba lagi ke home, oke sepertinya ada bug nanti kita fix, saat ini kita lanjut dulu, kita refresh kemudian saya klik untuk card keduanya maka disini telah ditampilkan detail post untuk card 2, nah untuk fixnya Kita lihat dulu pesan errornya. Klik kanan, inspect, atas. disini untuk pesan errornya tidak bisa menerapkan efek transisi di route dynamic untuk fixnya kita harus memberikan elemen parent atau elemen pembungkusnya jadi balik ke text editor disini kita harus bungkus semua elemen ini jadi saya akan membuat elemen main sebagai parentnya atau elemen pembungkusnya kemudian kita pindahkan semuanya ke dalam main save kalau kita lihat di browser, refresh, maka disini sudah tidak ada pesan errornya kalau kita ke home lagi, maka efek transisi nya telah berhasil diterapkan terus lagi dev tool nya, dan yang terakhir saya akan membahas tentang error 404 jadi misalnya kalau kita ke root yang belum ada, misalnya disini saya buat abc maka disini diarahkan ke halaman 404 Nah disini kita bisa meng-customize untuk halaman 404-nya ke text editor, di root project-nya, buat file yang bernama error.view, kita buat script, kemudian kita buat props, define props, kita berikan nama props-nya yaitu error, dan setelah itu kita buat template-nya. Nah disini kita bisa gunakan object error, object error ini tersedia secara global.
Misalnya saya buat disini h1 error.statusCode. Selain status code, kita bisa menggunakan property message. Jadi di bawah h1, buat paragraph error.message. Save ke browser, refresh.
Maka tampil halaman custom error yang telah kita buat. Disini ada status codenya, dan juga disini adalah message-nya. Nah biasanya kan di halaman 404, ada tombol untuk kembali ke halaman sebelumnya. Nah untuk membuatnya, kita tidak menggunakan komponen noxlink ya, tapi kita menggunakan elemen button. Jadi ke text editor, di bawah paragraphnya kita buat button, misalnya back to home, kita berikan event.
Untuk function handlernya kita buat handle clear error, di scriptnya kita buat function. handle clear error, dan untuk isinya kita berikan utility functionnya yaitu clear error, dan di sini kita bisa berikan options yaitu berupa object, dan untuk optionnya kita bisa isi dengan redirect, kita berikan redirectnya ke alaman home. Jadi ketika kita klik button ini, maka function clear error ini akan membersihkan error yang ada.
Kemudian save, kita coba, kita klik. back to home, maka diarahkan ke halaman home dan juga disini untuk errornya telah dibersihkan ya lalu bagaimana kalau kita ke halaman dynamic route, kemudian di route tersebut tidak ada datanya contohnya seperti ini, kita ke pause kemudian saya berikan abc nanti kita diarahkan ke halaman dynamic route, tapi disini tidak ada datanya nah untuk itu, kita akan mengarahkan halaman dynamic route yang tidak ada datanya, ke halaman 404. Ketik editor, ke dynamic route-nya, di script-nya, kita akan cek if host.value itu kosong, maka di sini kita akan throw error, throw dari utility function nox, yang bernama create error, di sini kita berikan options-nya, itu object, yang pertama kita berikan status code nya, kita berikan 404, kemudian kita berikan message nya, match not found, dan yang terakhir kita berikan fatal, nilainya true, kita mau error ini di handle di sisi client semuanya, save, kita coba, maka disini langsung diarahkan ke halaman 404, kita klik lagi back to home, kemudian kita coba, Slash pos, slash abc, enter, maka diarahkan ke halaman 404. Oke, itu saja yang bisa saya sampaikan tentang basic NUX JS. Selanjutnya silakan teman-teman explore sendiri lagi.
Semoga bermanfaat, dan terima kasih.