Instalasi

Memulai Nuxt.js itu ternyata sangat mudah. Satu proyek sederhana hanya memerlukan dependency nuxt.

Menggunakan templat awal Nuxt.js

Untuk memulai dengan cepat, tim Nuxt.js telah membuat templat awal.

Unduh .zip templat awal atau instal dengan vue-cli:

$ vue init nuxt-community/starter-template <nama-proyek>

Jika Vue CLI tidak terinstal, silakan instal dengan npm install -g @vue/cli @vue/cli-init

lalu instal the dependencies:

$ cd <nama-proyek>
$ npm install

dan jalankan proyek dengan:

$ npm run dev

Kini aplikasi berjalan pada http://localhost:3000.

Nuxt.js akan memantau perubahan file di dalam direktori pages, jadi tidak perlu me-restart aplikasi saat menambahkan halaman baru.

Untuk mengetahui lebih banyak tentang struktur direktori sebuah proyek: Dokumentasi Struktur Direktori.

Mulai dari awal

Membuat aplikasi Nuxt.js dari awal juga sangat mudah, hanya memerlukan 1 file dan 1 direktori. Mari kita buat satu direktori kosong untuk mulai membuat aplikasinya:

$ mkdir <nama-proyek>
$ cd <nama-proyek>

Info: tukar <nama-proyek> dengan nama proyek yang diinginkan.

package.json

Proyek memerlukan file package.json untuk memperinci bagaimana untuk memulai nuxt:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

scripts akan menjalankan Nuxt.js melalui npm run dev.

Memasang nuxt

Setelah package.json selesai dibuat, tambahkan nuxt ke dalam proyek melalui npm:

npm install --save nuxt

Direktori pages

Nuxt.js akan mengubah setiap file *.vue di dalam direktori pages sebagai rute untuk aplikasi.

Buat direktori pages:

$ mkdir pages

lalu buat halaman pertama dalam pages/index.vue:

<template>
  <h1>Hello world!</h1>
</template>

dan jalankan proyek dengan:

$ npm run dev

Kini aplikasi berjalan pada http://localhost:3000.

Nuxt.js akan memantau perubahan file di dalam direktori pages, jadi tidak perlu me-restart aplikasi saat menambahkan halaman baru.

Untuk mengetahui lebih lanjut tentang struktur direktori pada proyek: Dokumentasi Struktur Direktori.

Jumpa kesalahan atau ingin berkontribusi pada dokumentasi ini? Sunting halaman ini di GitHub!