👕 ref: add custom container layout

Author: OlgaPrikhodko

layouts/container.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <NavBar />
+
+    <div
+      class="mx-auto mt-4 max-w-7xl space-y-4 px-4 xs:px-8 sm:px-8 lg:px-16 pb-16 w-2/3"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

pages/car/[name]-[id].vue

@@ -2,17 +2,17 @@
 const route = useRoute();
 
 useHead({ title: toTitleCase(route.params.name) });
+
+definePageMeta({
+  layout: "container",
+});
 </script>
 
 <template>
   <div>
-    <div
-      class="mx-auto mt-4 max-w-7xl space-y-4 px-4 xs:px-8 sm:px-8 lg:px-16 pb-16 w-2/3"
-    >
-      <CarDetailHero />
-      <CarDetailAttributes />
-      <CarDetailDescription />
-      <CarDetailContact />
-    </div>
+    <CarDetailHero />
+    <CarDetailAttributes />
+    <CarDetailDescription />
+    <CarDetailContact />
   </div>
 </template>

pages/city/[city]/car.vue

@@ -5,17 +5,15 @@ const cityTitle = toTitleCase(route.params.city);
 useHead({
   title: `${make ? toTitleCase(make) : "Cars"} in ${cityTitle}`,
 });
+
+definePageMeta({
+  layout: "container",
+});
 </script>
 
 <template>
-  <div>
-    <div
-      class="mx-auto mt-4 max-w-7xl space-y-4 px-4 xs:px-8 sm:px-8 lg:px-16 pb-16 w-2/3"
-    >
-      <div class="mt-32 flex">
-        <CarSideBar />
-        <NuxtPage />
-      </div>
-    </div>
+  <div class="mt-32 flex">
+    <CarSideBar />
+    <NuxtPage />
   </div>
 </template>