Hallo teman-teman, ada yang tahu Nuxt.js ? Nuxt Js adalah sebuah framework untuk membuat aplikasi Vue.js, ini mungkin terdengar seperti framework dalam framework ya, karena Vue Js juga dikenal sebagai framework Javascript . Tapi klaim dari dari nuxtjs.org meyatakan, dengan memakai Nuxt Js pengembangan web menjadi sederhana dan efektif. *wow.

Yaudahlah kita coba install aja dulu ya. Berikut yang perlu di persiapkan :

Persiapan

1. Install Node Js, minimal v8.9.0 kalian bisa download sorcenya disini : https://nodejs.org/en/download/
2. Text Editor (Sublime, VSCode, Notepad ++, dll), tapi disini disarankan menggunakan VSCode, yang bisa kalian dapat disini : https://code.visualstudio.com/
3. Terminal (CMD, dll), tapi disini disarankan memakai Integrated Terminal VSCode.

Installasi

• Pada tahap installasi, kalian dapat menggunakan VSCode Terminal untuk membuat folder project baru, atau buat folder seperti biasa direktori localhost anda contohnya : Klik Kanan > New Folder > Nama folder anda. Disini saya memakai nama folder mddc-nuxt.
• Setelah folder yang anda buat sudah di buka di VSCode, buat file baru bernama package.json dengan mengklik icon new file dan isikan code berikut :

{
    "name": "mddc-nuxt",
    "scripts": {
      "dev": "nuxt",
      "build": "nuxt build",
      "generate": "nuxt generate",
      "start": "nuxt start"
    }
}

package.json disini adalah seperti kartu ID project kalian.

• Untuk menginstall Nuxt, buka terminal anda di VSCode, lalu jalankan perintah npm install nuxt. Perintah ini akan menambahkan Nuxt sebagai dependency pada proyek kalian dan akan ditambahkan didalam package.json.
• Setelah selesai proses installasi, coba kalian jalankan perintah npm run dev untuk menjalankan project Nuxt dan bisa kalian buka di localhost:3000.

Hello World

Setelah mencoba installasi, tidak afdhol kalau tidak mencoba halaman Hello World , langsung di coba aja.

• Buat satu folder dengan klik icon new folder, lalu beri nama pages,
• Dan buat satu file bernama index.vue didalam folder tersebut. Strukturnya seperti dibawah ini jadinya:

- .nuxt
- node_modules
- pages
---- index.vue
- package.json

• Lalu buka file index.vue dan isikan code berikut.

<template>
  <h1>Hello Dunia!</h1>
</template>

• Lalu jalankan kembali project Nuxt kalian. Jika Project kalian masih running, coba kalian matikan lalu jalankan kembali.

Note : Jika ada penambahan file, project Nuxt harus di running ulang, tapi kalau hanya perubahan css atau tulisan, tidak perlu di running ulang.

Okey mungkin cukup sekian sharing saya yang singkat ini, mungkin nanti pembahasan tentang Nuxt ini bisa saya lanjutkan kembali di lain waktu. Tetap Sehat, Tetap Semangat.