Melanjutkan dari tulisan saya mengenai Installasi Nuxt Js. Sekarang saya akan mencoba untuk membuat templating page menggunakan Nuxt JS.

Okey langsung saja ya, cara membuat templating page di Nuxt Js.

Membuat Template Default

Untuk membuat template default kita bisa membuatnya di dalam folder layouts. Layouts adalah tempat untuk meletakkan bagian-bagian ketika kita ingin mengubah tampilan dan tema pada aplikasi Nuxt.js kita, baik memasukkan topbar, sidebar maupun memiliki layout berbeda untuk perangkat mobile dan desktop. Layout dibagi menjadi 2 :

• Layout default adalah layout yang digunakan pada semua halaman yang tidak kita tentukan nama layoutnya.
• Layout custom adalah layout yang digunakan pada halaman tertentu dan harus membuat properti layout pada halaman yang kita inginkan.

Disini kita mencoba untuk membuat layout default dulu ya.

• Buat satu file bernama default.vue di dalam folder layouts, lalu masukkan code berikut :

<template>
    <div>
        <Header />
        <main>
            <Nuxt />
        </main>
    </div>
</template>

Membuat Navigasi

Kita bisa membuat navigasi web kita di dalam folder components. Components adalah tempat untuk meletakkan bagian-bagian yang bisa digunakan kembali di dalam halaman Nuxt Js. Components juga bisa di impor ke dalam layouts, pages, atau komponen lainnya. Disini kita akan membuat komponen header yang akan kita jadikan menu.

Berikut tahapnya :

• Buka file nuxt.config.js lalu tambahkan components: true seperti berikut :

export default {

  
  components: true,

  ...

}

• Setelah itu buat file dengan nama Header.vue di dalam folder components, lalu masukkan code berikut :

<template>
    <header class="navigasi">
        <div class="container">
            <nav>
                <NuxtLink class="nav-link active" to="/">Home</NuxtLink>
                <NuxtLink class="nav-link" to="/about">About</NuxtLink>
                <NuxtLink class="nav-link" to="/portofolio">Portofolio</NuxtLink>
                <a class="nav-link" href="https://www.melihatdunia.com" target="_blank">Blog</a>
                <NuxtLink class="nav-link" to="/contact">Contact</NuxtLink>
            </nav>
        </div>
    </header>
</template>

Membuat Halaman Index

Kita bisa membuat halaman index di folder pages. Pages adalah tempat yang berisikan halaman web kita. Halaman-halaman ini lah yang akan memakai layout dan component yang sudah kita buat tadi.

• Buat file index.vue di dalam folder pages, lalu masukkan code berikut :

<template>
  <div class="container">
    <div class="content">
      <h3>Home</h3>
    </div>
  </div>
</template>

Note : Untuk halaman lain seperti About, Portofolio, Contact, bisa kita lakukan seperti tahapan diatas.

Membuat Style.css

Setiap website tentunya harus dibuat style cssnya dong agar lebih menarik dan berwarna. Folder Assets berisi aset kita seperti css, gambar atau font.

• Buat file styles.css di dalam folder assets, lalu masukkan code berikut :

html, body{
    height: 100%;
    margin: 0;
}

.container{
    width: 1136px !important;
    max-width: 1136px !important;
    padding: 0px !important;
    margin: auto;
}

.navigasi{
    background-color: #4e9eee;
    padding: 16px 0px;
}

.navigasi .nav-link{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    padding: 16px 20px;
}

.navigasi .nav-link:hover, .navigasi .nav-link:focus{
    text-decoration: none;
    color: #fff;
}

.content{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #272827;
    padding-top: 30px;
}

Nah setelah itu, coba kalian running dengan command npm run dev. dan kalian bisa lihat hasilnya, semoga berhasil.