Komponen-Komponen Nuxt

Nuxt.js memiliki beberapa komponen penting bawaan. Komponen-komponen ini akan sangat membantu Anda dalam membangun aplikasi. Komponen-komponen ini tersedia secara global, yang berarti Anda tidak perlu mengimpornya sebelum menggunakannya.

Paragraf-paragraf berikut ini berisi penjelasan untuk setiap komponen tersebut.

Komponen Nuxt

Komponen <Nuxt> adalah komponen yang Anda gunakan untuk menampilkan komponen-komponen page Anda. Sederhananya, komponen ini akan ditimpa oleh apapun yang ada di dalam komponen page Anda tergantung pada halaman mana yang sedang ditampilkan. Maka dari itu, Anda harus menambahkan komponen <Nuxt> ke dalam berkas layout Anda.

layouts/default.vue
<template>
  <div>
    <div>Bar navigasi saya</div>
    <Nuxt />
    <div>Footer saya</div>
  </div>
</template>

Komponen <Nuxt> hanya dapat digunakan di dalam berkas-berkas layout.

Komponen <Nuxt> dapat menerima prop nuxt-child-key. Prop ini akan dioper ke <RouterView> agar transisi Anda dapat berjalan dengan sesuai dalam halaman-halaman dinamis.

Terdapat 2 cara untuk menangani prop key internal dari <RouterView>.

  1. Gunakan prop nuxt-child-key pada komponen <Nuxt> Anda.
layouts/default.vue
<template>
  <div>
    <Nuxt :nuxt-child-key="someKey" />
  </div>
</template>
  1. Tambahkan opsi key ke dalam komponen-komponen page sebagai string atau fungsi.
export default {
  key(route) {
    return route.fullPath
  }
}

Komponen NuxtChild

Komponen ini digunakan untuk menampilkan komponen-komponen anak dalam rute bersarang.

Contoh:

-| pages/
---| parent/
------| child.vue
---| parent.vue

Struktur berkas seperti ini akan menghasilkan rute seperti berikut:

;[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

Untuk menampilkan komponen child.vue, Anda harus menambahkan komponen <NuxtChild> ke dalam pages/parent.vue seperti berikut:

pages/parent.vue
<template>
  <div>
    <h1>Ini view parent</h1>
    <NuxtChild :foobar="123" />
  </div>
</template>

keep-alive

Komponen <Nuxt> dan <NuxtChild/> dapat menerima prop keep-alive dan keep-alive-props.

Untuk mempelajari lebih lanjut tentang keep-alive dan keep-alive-props, lihat dokumentasi Vue.js

layouts/default.vue
<template>
  <div>
    <Nuxt keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- Akan diubah menjadi seperti ini -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>
pages/parent.vue
<template>
  <div>
    <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- Akan diubah menjadi seperti ini -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>

Komponen <NuxtChild> juga dapat menerima properti layaknya komponen Vue biasa.

<template>
  <div>
    <NuxtChild :key="$route.params.id" />
  </div>
</template>

Untuk melihat contoh, kunjungi contoh rute bersarang.

Untuk navigasi antar halaman dalam aplikasi Anda, Anda sebaiknya menggunakan komponen <NuxtLink>. Komponen ini merupakan komponen bawaan Nuxt.js sehingga Anda tidak perlu mengimpornya terlebih dahulu layaknya komponen-komponen lainnya. Komponen ini mirip dengan tag <a> HTML, hanya saja Anda menggunakan to="/tetang-kami" dan bukannya href="/tentang-kami". Jika Anda pernah menggunakan vue-router sebelumnya, Anda bisa menganggap <NuxtLink> sebagai pengganti <RouterLink>.

Tautan sederhana ke komponen index.vue di dalam folder pages Anda:

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

Komponen <NuxtLink> sebaiknya digunakan untuk semua tautan internal. Ini berarti Anda sebaiknya menggunakan <NuxtLink> untuk setiap tautan yang mengarah pada halaman di situs web Anda. Tag <a> sebaiknya hanya digunakan untuk tautan-tautan yang mengarah ke halaman eksternal. Ini berarti Anda sebaiknya menggunakan tag <a> untuk tautan yang mengarah ke situs web lain.

<template>
  <div>
    <h1>Halaman beranda</h1>
    <NuxtLink to="/about">
      Tentang kami (tautan internal ke sebuah halaman di situs web Anda)
    </NuxtLink>

    <a href="https://nuxtjs.org">
      Tautan eksternal yang mengarah ke situs web lain
    </a>
  </div>
</template>

Jika Anda ingin mempelajari lebih lanjut tentang <RouterLink>, silakan baca dokumentasi Vue Router.

<NuxtLink> juga memiliki fitur smart prefetching bawaan.

Nuxt.js memiliki fitur smart prefetching bawaan. Ini berarti Nuxt.js dapat mendeteksi ketika sebuah tautan nampak pada pengguna, baik di dalam viewport ataupun ketika menggulir layar (scrolling). Jika tautan nampak, Nuxt.js akan melakukan prefetch skrip JavaScript untuk halaman-halaman tersebut agar halaman langsung siap diakses ketika pengguna mengeklik tautan tersebut. Nuxt.js hanya memuat sumber daya ketika browser sedang tidak sibuk dan melewatkan prefetching jika koneksi sedang offline atau jika Anda hanya memiliki konektivitas 2G.

Menonaktifkan prefetching untuk tautan-tautan tertentu

Dalam sebagian kasus, Anda mungkin ingin menonaktifkan fitur prefetching untuk tautan-tautan tertentu yang mengandung banyak JavaScript atau Anda memiliki banyak halaman yang harus di-prefetch atau Anda memiliki banyak pustaka pihak ketiga yang harus dimuat. Untuk menonaktifkan prefetching untuk tautan-tautan tertentu, Anda bisa menggunakan prop no-prefetch.

Sejak Nuxt.js versi 2.10.0, Anda juga bisa menyetel prop prefetch agar bernilai false.

<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>

Menonaktifkan prefetching secara global

Untuk menonaktifkan prefetching untuk semua tautan, setel nilai properti prefetchLinks ke false di dalam berkas nuxt.config.js Anda:

nuxt.config.js
export default {
  router: {
    prefetchLinks: false
  }
}

Sejak Nuxt.js versi 2.10.0, jika Anda sudah menyetel nilai prefetchLinks ke false tetapi Anda ingin mengaktifkan prefetch untuk tautan-tautan tertentu, Anda bisa menggunakan prop prefetch untuk tautan tersebut:

<NuxtLink to="/about" prefetch>About page pre-fetched</NuxtLink>

linkActiveClass

Cara kerja linkActiveClass sama dengan kelas vue-router untuk tautan-tautan aktif. Jika Anda ingin menampilkan tautan-tautan mana yang sedang aktif, Anda cukup membuat sebuah styling untuk kelas nuxt-link-active.

.nuxt-link-active {
  color: red;
}

CSS ini dapat ditambahkan ke komponen navigasi atau untuk halaman / layout tertentu atau di dalam berkas main.css Anda.

Jika Anda mau, Anda juga bisa mengubah nama kelasnya. Anda bisa melakukan ini dengan cara memodifikasi nilai linkActiveClass di dalam properti router dalam berkas nuxt.config.js Anda.

export default {
  router: {
    linkActiveClass: 'nama-kelas-yang-baru'
  }
}

Opsi ini dioper langsung ke linkActiveClass milik vue-router. Lihat dokumentasi vue-router untuk informasi lebih lanjut.

linkExactActiveClass

Cara kerja linkExactActiveClass sama dengan kelas vue-router untuk tautan-tautan aktif eksak. Jika Anda ingin menampilkan tautan-tautan mana yang sedang aktif dengan pencocokan persis, Anda hanya perlu membuat styling untuk kelas nuxt-link-exact-active.

.nuxt-link-exact-active {
  color: green;
}

CSS ini dapat ditambahkan ke komponen navigasi atau untuk halaman / layout tertentu atau di dalam berkas main.css Anda.

Jika Anda mau, Anda juga bisa mengubah nama kelasnya. Anda bisa melakukan ini dengan cara memodifikasi nilai linkExactActiveClass di dalam properti router dalam berkas nuxt.config.js Anda.

nuxt.config.js
export default {
  router: {
    linkExactActiveClass: 'nama-kelas-tautan-aktif-eksak-yang-baru'
  }
}

Opsi ini dioper langsung ke linkExactActiveClass milik vue-router. Lihat dokumentasi vue-router untuk informasi lebih lanjut.

linkPrefetchedClass

linkPrefetchedClass memungkinkan Anda untuk menambahkan style untuk semua tautan yang telah di-prefetch. Hal ini berguna untuk mengetes tautan mana yang sedang di-prefetch setelah memodifikasi perilaku bawaannya. Secara bawaan,linkPrefetchedClass tidaklah aktif. Jika Anda ingin mengaktifkannya, Anda harus menambahkannya ke properti router dalam berkas nuxt.config.js Anda.

nuxt.config.js
export default {
  router: {
    linkPrefetchedClass: 'nuxt-link-prefetched'
  }
}

Lalu Anda bisa menambahkan style untuk kelas tersebut.

.nuxt-link-prefetched {
  color: orangeRed;
}

Di contoh ini kami menggunakan nama kelas nuxt-link-prefetched. Anda bisa menggunakan nama lain jika Anda suka.

Komponen client-only

Komponen ini digunakan untuk secara sengaja me-render komponen hanya pada sisi klien. Untuk mengimpor komponen hanya di sisi klien, daftarkan komponen di dalam sebuah plugin yang hanya akan dijalankan di sisi klien.

pages/example.vue
<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- Komponen ini hanya akan di-render di sisi klien -->
      <comments />
    </client-only>
  </div>
</template>

Gunakan slot sebagai placeholder sampai komponen <client-only /> terpasang (mounted) di sisi klien.

pages/example.vue
<template>
  <div>
    <sidebar />
    <client-only>
      <!-- Komponen ini hanya akan di-render di sisi klien -->
      <comments />

      <!-- Indikator sedang memuat, di-render di sisi server -->
      <comments-placeholder slot="placeholder" />
    </client-only>
  </div>
</template>

Jika Anda menggunakan Nuxt versi di bawah 2.9.0, gunakan <no-ssr> sebagai pengganti <client-only>.

Kontributor

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