BLACK FRIDAY - Get 35% off your Mastering Nuxt license!

Views

Bagian Tampilan menjelaskan semua yang perlu Anda ketahui untuk mengonfigurasi data dan tampilan untuk rute tertentu di Aplikasi Nuxt.js Anda. Tampilan terdiri dari templat aplikasi, layout, dan halaman yang sebenarnya. Selain itu, Anda dapat menentukan tag meta kustom untuk bagian kepala setiap halaman yang penting untuk SEO (Search Engine Optimization).

Composition of a View in Nuxt.js

Komposisi Tampilan di Nuxt.js

Pages

Setiap komponen Halaman adalah komponen Vue tetapi Nuxt.js menambahkan atribut dan fungsi khusus untuk membuat pengembangan aplikasi Anda semudah mungkin.

pages/index.vue
<template>
  <h1 class="red">Halo Dunia</h1>
</template>

<script>
  export default {
    head() {
      // Atur Tag Meta untuk Halaman ini
    }
    // ...
  }
</script>

<style>
  .red {
    color: red;
  }
</style>

Properti komponen halaman

Ada banyak properti dari komponen halaman seperti properti head pada contoh di atas.

See the Directory Structure book to learn more about all the properties can use on your page

Layouts

Layout sangat membantu saat Anda ingin mengubah tampilan dan nuansa aplikasi Nuxt.js Anda. Misalnya Anda ingin menyertakan bilah sisi atau memiliki layouts yang berbeda untuk seluler dan desktop.

Layout Default

Anda dapat mendefinisikan layout default dengan menambahkan file default.vue di dalam direktori layouts. Ini akan digunakan untuk semua halaman yang layout tidak ditentukan. Satu-satunya hal yang perlu Anda sertakan dalam layout adalah komponen <Nuxt /> yang merender komponen halaman.

layouts/default.vue
<template>
  <Nuxt />
</template>

Pelajari lebih lanjut tentang Komponen Nuxt di bab komponen.

Layout Kustom

Anda dapat membuat layout kustom dengan menambahkan file .vue ke direktori layout. Untuk menggunakan layout khusus, Anda perlu menyetel properti layout di komponen halaman tempat Anda ingin menggunakan layout itu. Nilainya akan menjadi nama layout khusus yang telah Anda buat.

Untuk membuat layout blog, tambahkan file blog.vue ke direktori layout layouts/blog.vue Anda:

layouts/blog.vue
<template>
  <div>
    <div>Bilah navigasi blog saya di sini</div>
    <Nuxt />
  </div>
</template>

Pastikan untuk menambahkan komponen <Nuxt /> saat membuat layout untuk benar-benar menyertakan komponen halaman.

Kami kemudian menggunakan properti layout dengan nilai 'blog' di halaman di mana kami ingin layout itu digunakan.

pages/posts.vue
<template>
  <!-- Template Anda -->
</template>
<script>
  export default {
    layout: 'blog'
    // definisi komponen halaman
  }
</script>

Jika Anda tidak menambahkan properti layout ke halaman Anda, misalnya layout: 'blog' maka layout default.vue akan digunakan.

Halaman Eror

Halaman eror adalah komponen halaman yang selalu ditampilkan saat terjadi eror (yang tidak terjadi saat rendering sisi server).

Meskipun file ini ditempatkan di folder layouts, file ini harus diperlakukan sebagai halaman.

Seperti disebutkan di atas, layout ini spesial, karena Anda tidak boleh menyertakan komponen <Nuxt /> di dalam template-nya. Anda harus melihat layout ini sebagai komponen yang ditampilkan saat terjadi kesalahan (404, 500, dll.). Mirip dengan komponen halaman lainnya, Anda juga dapat menyetel layout kustom untuk halaman kesalahan dengan cara biasa.

Anda dapat menyesuaikan halaman kesalahan dengan menambahkan file layouts/error.vue:

layouts/error.vue
<template>
  <div>
    <h1 v-if="error.statusCode === 404">Halaman tidak ditemukan</h1>
    <h1 v-else>Terjadi kesalahan</h1>
    <NuxtLink to="/">Halaman beranda</NuxtLink>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    layout: 'error' // Anda dapat mengatur tata letak khusus untuk halaman kesalahan
  }
</script>

Document: App.html

Template aplikasi digunakan untuk membuat bingkai HTML sebenarnya dari dokumen Anda untuk aplikasi Nuxt.js Anda yang memasukkan konten serta variabel untuk head dan body. File ini dibuat secara otomatis untuk Anda dan secara umum jarang perlu dimodifikasi. Anda dapat menyesuaikan templat aplikasi HTML yang digunakan oleh Nuxt.js untuk menyertakan skrip atau kelas CSS bersyarat dengan membuat file app.html dalam direktori sumber proyek Anda yang secara default adalah direktori root.

Template default yang digunakan oleh Nuxt.js adalah:

app.html
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

Salah satu kasus penggunaan menggunakan template aplikasi kustom adalah menambahkan kelas CSS bersyarat untuk IE:

app.html
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

Meskipun Anda dapat menambahkan file JavaScript dan CSS di app.html, disarankan untuk menggunakan nuxt.config.js untuk tugas-tugas ini!.

Kontributor

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