test: layouts

layouts/display.vue

@@ -0,0 +1,11 @@
+<template>
+	<App>
+		<Header />
+
+		<div class="flex w-full max-w-3xl flex-col gap-4">
+			<slot name="content" />
+		</div>
+	</App>
+</template>
+
+<script setup lang="ts"></script>

nuxt.config.ts

@@ -6,6 +6,10 @@ export default defineNuxtConfig({
 		'nuxt-icon',
 		'@pinia/nuxt',
 	],
+	app: {
+		pageTransition: false,
+		layoutTransition: false,
+	},
 	alias: {
 		'@logo': '/assets/logo',
 		'@assets': '/assets',

pages/[...slug].vue

@@ -1,3 +1,7 @@
 <template>
-	<p> {{ $route.params.slug }} </p>
+	<NuxtLayout name="display">
+		<template #content>
+			<p> {{ $route.params.slug }} </p>
+		</template>
+	</NuxtLayout>
 </template>

pages/profile/index.vue

@@ -1,7 +1,6 @@
 <template>
-	<App>
-		<Header />
-		<div class="flex w-full max-w-3xl flex-col gap-4">
+	<NuxtLayout name="display">
+		<template #content>
 			<CardPanel
 				v-for="data in dashboardData"
 				:key="data.title"
@@ -27,8 +26,8 @@
 					Log In
 				</button>
 			</div>
-		</div>
-	</App>
+		</template>
+	</NuxtLayout>
 </template>
 
 <script setup lang="ts">