3. Layouts

tech

Table of Content

• Introduction
• App.vue
• Layouts
• Pages

Introduction

Gue baru nyoba Layout Nuxt3 ini sangat memudahkan developer lohh. Contoh deh kalo di Laravel kita harus @include() kalo disini langsung aja pake tag standar mereka.

App.vue

<template>
	<div>
		<NuxtLayout>
			<NuxtPage />
		</NuxtLayout>
	</div>
</template>

Penjelasan:

• NuxtLayout akan merujuk pada folder layouts
• NuxtPage akan merujuk pada folder pages.

Layouts

layouts/default.vue

<template>
    <div>
      <nav style="background-color: #333; color: white; padding: 10px;">
        <ul style="display: flex; gap: 20px; list-style: none;">
          <li><NuxtLink to="/">Home</NuxtLink></li>
          <li><NuxtLink to="/about">About</NuxtLink></li>
        </ul>
      </nav>
  
      <main style="padding: 20px;">
        <slot />
      </main>
    </div>
</template>
  
  <script>
  export default {
    name: 'DefaultLayout',
  };
  </script>
  
  <style>
  a {
    color: white;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  </style>

Penjelasan:

• <NuxtLink> dirancang untuk navigasi internal di dalam aplikasi Nuxt.js. Ini berarti jika kita menggunakan <NuxtLink>, Nuxt.js akan memuat halaman secara dinamis tanpa perlu me-refresh seluruh halaman (mirip dengan Single Page Application/SPA).
• <NuxtLink> bekerja dengan sistem routing otomatis Nuxt.js, sehingga Anda tidak perlu menulis konfigurasi routing secara manual. Cukup buat file di folder pages/, dan <NuxtLink> akan langsung mengenali rute yang sesuai berdasarkan struktur folder.

Pages

pages/index.vue

<template>
	<div>
		<h1>Index</h1>
	</div>
</template>

Date: 18-04-2025