header footer need to include manually

auto-imports.d.ts

@@ -8,7 +8,7 @@ declare global {
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const defineLoader: typeof import('vue-router/auto')['defineLoader']
-  const definePage: typeof import('vue-router/auto')['definePage']
+  const definePage: typeof import('unplugin-vue-router/runtime')['_definePage']
   const effectScope: typeof import('vue')['effectScope']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
@@ -38,6 +38,7 @@ declare global {
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
   const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveDirective: typeof import('vue')['resolveDirective']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']

components.d.ts

@@ -8,6 +8,11 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ButtonRepo: typeof import('./src/components/ButtonRepo.vue')['default']
+    copy: typeof import('./src/components/MainHeader copy.vue')['default']
+    Footer: typeof import('./src/components/Footer.vue')['default']
+    Header: typeof import('./src/components/Header.vue')['default']
+    MainFooter: typeof import('./src/components/MainFooter.vue')['default']
+    MainHeader: typeof import('./src/components/MainHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

index.html

@@ -4,13 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite, Vue3, Tailwind CSS</title>
-    <link
+    <!-- <link
       rel="preload"
       href="/font/Inter-roman.var.woff2"
       as="font"
       type="font/woff2"
       crossorigin="anonymous"
-    />
+    /> -->
     <!-- <link rel="preload" href="/font/Inter-italic.var.woff2" as="font" type="font/woff2" crossorigin="anonymous"> -->
     <link rel="stylesheet" href="/font/inter.css" />
   </head>

package.json

@@ -2,7 +2,7 @@
   "name": "vite-vue3-tailwind-starter",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite --host --port 2000",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview"
   },

src/App.vue

@@ -1,26 +1,3 @@
-<script setup>
-let counter = ref(0)
-
-setInterval(() => {
-  counter.value++
-}, 1000)
-</script>
-
 <template>
-  <div>
-    <header class="bg-white shadow" v-if="$route.meta.title">
-      <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-        <h1
-          @click="counter = 0"
-          class="text-3xl font-bold leading-tight text-gray-900"
-          title="click to reset a counter"
-        >
-          {{ $route.meta.title }} / {{ counter }}
-        </h1>
-      </div>
-    </header>
-    <main>
   <router-view />
-    </main>
-  </div>
 </template>

src/components/ButtonRepo.vue

@@ -1,8 +1,27 @@
+<script setup>
+let counter = ref(0)
+
+setInterval(() => {
+  counter.value++
+}, 1000)
+</script>
+
 <template>
   <div class="ml-3 inline-flex rounded-md shadow">
+    <header class="bg-white shadow" v-if="$route.meta.title">
+      <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+        <h1
+          @click="counter = 0"
+          class="text-3xl font-bold leading-tight text-gray-900"
+          title="click to reset a counter"
+        >
+          {{ $route.meta.title }} / {{ counter }}
+        </h1>
+      </div>
+    </header>
     <a
       target="_blank"
-      href="https://github.com/web2033/vite-vue3-tailwind-starter"
+      href="https://vuejs.org/"
       class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium leading-6 text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-500 focus:outline-none"
       >Learn more</a
     >

src/components/Footer.vue

@@ -0,0 +1,5 @@
+<template>
+    <footer>
+        Footer Content
+    </footer>
+</template>

src/components/Header.vue

@@ -0,0 +1,5 @@
+<template>
+    <header>
+        Header Content
+    </header>
+</template>

src/components/MainFooter.vue

@@ -0,0 +1,5 @@
+<template>
+    <footer>
+        Footer Content
+    </footer>
+</template>

src/components/MainHeader.vue

@@ -0,0 +1,5 @@
+<template>
+    <header>
+        Header Content
+    </header>
+</template>

src/pages/[...404].vue

@@ -7,7 +7,7 @@ useHead({
 <template>
   <header class="bg-white shadow">
     <div class="mx-auto max-w-7xl py-6 px-4 sm:px-6 lg:px-8">
-      <h1 class="text-3xl font-bold leading-tight text-gray-900">Not Found</h1>
+      <h1 class="text-3xl font-bold leading-tight text-gray-900 text-center">Not Found: 404</h1>
     </div>
   </header>
 </template>

src/pages/about.vue

@@ -1,14 +1,14 @@
 <route lang="json">
 {
   "meta": {
-    "title": "About"
+    "title": "About3"
   }
 }
 </route>
 
 <script setup>
 useHead({
-  title: 'About',
+  title: 'About2',
 })
 </script>
 

src/pages/index.vue

@@ -1,11 +1,3 @@
-<route lang="json">
-{
-  "meta": {
-    "title": "Home"
-  }
-}
-</route>
-
 <script setup>
 useHead({
   title: 'Home',
@@ -13,27 +5,9 @@ useHead({
 </script>
 
 <template>
-  <div class="bg-gray-50">
+  <MainHeader />
-    <div
+  <main>
-      class="mx-auto max-w-screen-xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
+    Home Content
-    >
+  </main>
-      <h2
+  <MainFooter />
-        class="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
-      >
-        Ready to dive in?
-        <br />
-        <span class="text-indigo-600">Vite + Vue 3 + Tailwind CSS</span>
-      </h2>
-      <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
-        <div class="inline-flex rounded-md shadow">
-          <router-link
-            to="/about"
-            class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-indigo-500 focus:outline-none"
-            >Next Page</router-link
-          >
-        </div>
-        <ButtonRepo />
-      </div>
-    </div>
-  </div>
 </template>

typed-router.d.ts

@@ -10,6 +10,9 @@ import type {
   RouteLocationResolvedTypedList,
   RouteLocationNormalizedTypedList,
   RouteLocationNormalizedLoadedTypedList,
+  RouteLocationAsString,
+  RouteLocationAsRelativeTypedList,
+  RouteLocationAsPathTypedList,
 
   // helper types
   // route definitions
@@ -66,6 +69,14 @@ declare module 'vue-router/auto' {
    */
   export type RouteLocation<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationTypedList<RouteNamedMap>[Name]
 
+  /**
+   * Type safe version of `RouteLocationRaw` . Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationRaw<Name extends keyof RouteNamedMap = keyof RouteNamedMap> =
+    | RouteLocationAsString<RouteNamedMap>
+    | RouteLocationAsRelativeTypedList<RouteNamedMap>[Name]
+    | RouteLocationAsPathTypedList<RouteNamedMap>[Name]
+
   /**
    * Generate a type safe params for a route location. Requires the name of the route to be passed as a generic.
    */