Instalasi

Untuk memulai dengan Nuxt.js itu sangat mudah. suatu projek yang sederhana hanya memerlukan 'nuxt' dependency.

Menggunakan create-nuxt-app

Untuk memulai sebuah projek dengan cepat, tim Nuxt.js telah membuat suatu scaffolding tool create-nuxt-app.

Pastikan anda sudah menginstall npx (npx sudah terisntall secara default pada NPM 5.2.0)

$ npx create-nuxt-app <project-name>

atau dengan yarn:

$ yarn create nuxt-app <my-project>

Kemudian akan muncul beberapa pertanyaan:

  1. Pilih framework untuk integrasi server-side:

  2. Pilih framework UI kesukaan anda:

  3. Mode Nuxt yang anda inginkan (Universal or SPA)

  4. Menambah axios module untuk mempermudah melakukan HTTP request pada aplikasi anda.

  5. Menambah EsLint untuk memformat coding anda dengan lint pada saat menyimpan.

  6. Menambah Prettier untuk memformat coding anda dengan prettier pada saat menyimpan.

Setelah menjawab semua pertanyaan, semua dependencies yang dibutuhkan akan terinstall dan langkah selanjut nya adalah menjalankan aplikasi dengan:

$ npm run dev

Aplikasi sekarang berjalan pada http://localhost:3000.

Nuxt.js akan memantau perubahan pada file anda yang berada dalam direktori pages, jadi anda tidak perlu menjalankan ulang aplikasi anda ketika menambahkan halaman baru.

Untuk menemukan lebih lanjut mengenai struktur direktori pada projek : Directory Structure Documentation.

Memulai dari awal

Membuat suatu aplikasi dengan Nuxt.js dari awal itu mudah, anda hanya membutuhkan 1 file dan 1 direktori. Mari kita membuat direktor baru untuk memulai pengerjaan projek:

$ mkdir <nama-project>
$ cd <project-name>

Info: ganti <project-name> dengan nama project anda.

The package.json

Projek anda membutuhkan file package.json untuk menemukan bagaimana menjalankan nuxt:

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

scripts akan menjalankan Nuxt.js dengan npm run dev.

Instalasi nuxt

Setelah file package.json dibuat, tambahkan nuxt pada projek anda dengan npm:

$ npm install --save nuxt

Direktori pages

Nuxt.js akan men-transformasi setiap file *.vue yang berada dalam direktori pages sebagai route pada aplikasi anda

Membuat direktori pages:

$ mkdir pages

kemudian buat halaman pertama anda pada pages/index.vue:

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

dan jalankan projek dengan:

$ npm run dev

Aplikasi sekarang berjalan pada on http://localhost:3000.

Nuxt.js akan memantau perubahan pada file anda yang berada dalam direktori pages, jadi anda tidak perlu menjalankan ulang aplikasi anda ketika menambahkan halaman baru.

Untuk menemukan lebih lanjut mengenai struktur direktori pada projek : Directory Structure Documentation.

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