after section 3

app.vue

@@ -1,6 +1,8 @@
 <template>
    <div>
-      <NuxtPage/>
+      <NuxtLayout>
+         <NuxtPage/>
+      </NuxtLayout>
    </div>
 
 </template>

composables/useTest.ts

@@ -0,0 +1,3 @@
+export const useTest = () => {
+    return "TEST";
+};

composables/useUtilities.ts

@@ -0,0 +1,10 @@
+export const useUtilities = () => {
+    function toTitleCase(str:string) {       
+        return str.replace(/\w\S*/g, function(txt) {
+            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+        });
+    };
+    return {
+        toTitleCase,
+    };
+};

layouts/custom.vue

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

layouts/default.vue

@@ -0,0 +1,6 @@
+<template>
+    <div>
+        <NavBar/>
+        <slot/>
+    </div>
+</template>

nuxt.config.ts

@@ -1,4 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import { resolve } from "path"
+
+
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['~/assets/css/main.scss'],
@@ -11,5 +14,9 @@ export default defineNuxtConfig({
   alias: {
     //  "@":resolve(__dirname,"/"),
       assets:"/<rootDir>/assets"
-    },
+  },
+  typescript: {
+      typeCheck: true,
+      strict: false
+  }
 })

package.json

@@ -10,12 +10,16 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
+    "@nuxt/types": "^2.17.2",
+    "@nuxt/typescript-build": "^3.0.2",
     "autoprefixer": "^10.4.16",
     "nuxt": "^3.9.0",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.3",
     "vue": "^3.4.3",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^1.8.27"
   },
   "dependencies": {
     "sass": "^1.69.6"

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

@@ -1,23 +1,24 @@
 <script setup>
+
     const route = useRoute();
+    const {toTitleCase} = useUtilities();
 
     useHead({
-        title :route.params.name 
-    })
+        title :toTitleCase(route.params.name )
+    });
+
+    definePageMeta({
+        layout: "custom"
+    });
+
 </script>
 
 <template>
     <div>
-        <NavBar/>
-
-
-        <div class="mx-auto mt-4 max-w-7xl space-y-4 px-4 xs:px-8 sm:px-10 lg:px-16 pb-16 w-3/5">
-        
-            <CarDetailHero/>        
-            <CarDetailAttributes/>
-            <CarDetailDescription/>
-            <CarDetailContact/>
-            
-      </div>
+        <h1>test</h1>
+        <CarDetailHero/>        
+        <CarDetailAttributes/>
+        <CarDetailDescription/>
+        <CarDetailContact/>              
     </div>
 </template>

pages/city/[city]/car.vue

@@ -1,30 +1,23 @@
 <script setup>
     const route = useRoute();
-
+    const {toTitleCase} = useUtilities();
+    
     useHead({
         title : `${route.params.make ? toTitleCase(route.params.make) : 'Cars'} in ${toTitleCase(route.params.city)}`,
     });
 
-    function toTitleCase(str) {
-        return str.replace(
-            /\w\S*/g,
-            function(txt) {
-                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-            }    
-        );
-    }
+    definePageMeta({
+        layout: "custom"
+    });
 </script>
 
 <template>
-    <div>
-        <NavBar/>
-    </div>
+ 
     
-    <div class="mx-auto mt-4 max-w-7xl space-y-4 px-4 xs:px-8 sm:px-10 lg:px-16 pb-16 w-3/5">
-        <div class="mt-32 flex">
-            <CarSideBar/>            
-            <NuxtPage /> 
-        </div>
+    <div class="mt-32 flex">
+        <CarSideBar/>            
+        <NuxtPage /> 
     </div>
 
+
 </template>

pages/city/[city]/car/[[make]].vue

@@ -1,10 +1,7 @@
 <template>
+
     <div>
-
-            <CarCards/>
-        </div>
-
-
-
+        <CarCards/>
+    </div>
 
 </template>

pages/index.vue

@@ -4,8 +4,7 @@
     });
 </script>
 <template>
-    <div>   
-        <NavBar/>
+    <div>           
         <CarHero/>        
     </div>
 </template>