Merge branch 'main' of https://github.com/antfu/vitesse-nuxt3

- Merge upstream (upgraded to nuxt@3.0.0)
- Temporary fixing `vue-tsc` to `1.0.13` to workaround: https://github.com/nuxt/framework/issues/9777#issuecomment-1357547284
- Temporary using forked `unplugin-auto-imports` and `unplugin-vue-components` for `nuxt@3.0.0` compatibility
- Remove GraphQL

README.md

@@ -25,23 +25,7 @@ References:
 
 ## Features
 
-- [💚 Nuxt 3](https://v3.nuxtjs.org) - SSR, ESR, File-based routing, components auto importing, modules, etc.
-
-- 💻 [TypeGraphql](https://typegraphql.com/docs/introduction.html) + [Apollo Server](https://www.apollographql.com/docs/apollo-server/)
-
-- 🌞 [@urql/vue](https://formidable.com/open-source/urql/docs/basics/vue/) - composable query, SSR or client mode
-  For example:
-  ```ts
-  import { usePersonQuery } from '~/graphql/generated/hello.query'
-
-  const { data, fetching, error } = usePersonQuery({
-    variables: ref({
-      personInput: {
-        name: 'Phil Xu',
-      },
-    }),
-  })
-  ```
+- [💚 Nuxt 3](https://nuxt.com/) - SSR, ESR, File-based routing, components auto importing, modules, etc.
 
 - 🌏 [i18n](https://github.com/intlify/nuxt3) customized intlify i18n - set preferred language according to browser, and save user's preferred language to cookie.
 

components/Footer.vue

@@ -7,7 +7,7 @@ const { setLocale, locale } = useLocale()
     <NuxtLink i-carbon-campsite to="/" />
     <a
       i-carbon-logo-github
-      href="https://github.com/antfu/vitesse-nuxt3"
+      href="https://github.com/daotl/nuxt-starter"
       target="_blank"
     />
     <DarkToggle />

components/InputEntry.vue

@@ -8,7 +8,7 @@ const go = (): void => {
   if (name.value) {
     void router.push({
       name: routes.hiId,
-      params: { id: encodeURIComponent(name.value as string) },
+      params: { id: name.value as string },
     })
   }
 }
@@ -19,7 +19,7 @@ const go = (): void => {
     <input
       id="input"
       v-model="name"
-      :placeholder="$t('input-name')"
+      :placeholder="$t('inputName')"
       type="text"
       autocomplete="off"
       p="x-4 y-2"

components/PageView.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+const { data } = await useFetch('/api/pageview' as const)
+const time = useTimeAgo(
+  computed(() => data.value?.startAt ?? new Date()),
+  {
+    fullDateFormatter: (date: Date) => date.toLocaleDateString(),
+    messages: {
+      justNow: t('justNow'),
+      past: (n: number | string) =>
+        String(n).match(/\d/) ? t('timeAgo', [n]) : String(n),
+      future: (n: number | string) =>
+        String(n).match(/\d/) ? t('inTime', [n]) : String(n),
+      second: (n: number | string) => `${n} ${t(`second${n > 1 ? 's' : ''}`)}`,
+      minute: (n: number | string) => `${n} ${t(`minute${n > 1 ? 's' : ''}`)}`,
+      hour: (n: number | string) => `${n} ${t(`hour${n > 1 ? 's' : ''}`)}`,
+      day: (n: number | string, past: boolean) =>
+        n === 1
+          ? past
+            ? t('yesterday')
+            : t('tomorrow')
+          : `${n} ${t(`day${n > 1 ? 's' : ''}`)}`,
+      week: (n: number | string, past: boolean) =>
+        n === 1
+          ? past
+            ? t('last week')
+            : t('next week')
+          : `${n} ${t(`week${n > 1 ? 's' : ''}`)}`,
+      month: (n: number | string, past: boolean) =>
+        n === 1
+          ? past
+            ? t('last month')
+            : t('next month')
+          : `${n} ${t(`month${n > 1 ? 's' : ''}`)}`,
+      year: (n: number | string, past: boolean) =>
+        n === 1
+          ? past
+            ? t('last year')
+            : t('next year')
+          : `${n} ${t(`year${n > 1 ? 's' : ''}`)}`,
+    },
+  },
+)
+</script>
+
+<template>
+  <div text-gray:80>
+    <span v-if="data" font-500 text-gray>
+      {{
+        $t('visited', {
+          count: data.pageview,
+          time,
+        })
+      }}
+    </span>
+  </div>
+</template>

generated/auto-imports.d.ts

@@ -13,6 +13,7 @@ declare global {
   const setActivePinia: typeof import('pinia')['setActivePinia']
   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const storeToRefs: typeof import('pinia')['storeToRefs']
+  const useI18n: typeof import('vue-i18n')['useI18n']
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'
@@ -30,5 +31,6 @@ declare module 'vue' {
     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
     readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
+    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
   }
 }

generated/typed-router/__routes.ts

@@ -5,10 +5,9 @@
  * */
 
 export const routerPagesNames = {
-  '404': '404' as const,
+  all: 'all' as const,
   hiId: 'hi-id' as const,
   index: 'index' as const,
-  restfulPageView: 'restful-page-view' as const,
 }
 
-export type TypedRouteList = '404' | 'hi-id' | 'index' | 'restful-page-view'
+export type TypedRouteList = 'all' | 'hi-id' | 'index'

generated/typed-router/__useTypedRouter.ts

@@ -23,12 +23,7 @@ export const useTypedRouter = (): {
 } => {
   const { $router } = useNuxtApp()
 
-  const routesList = {
-    '404': '404',
-    hiId: 'hi-id',
-    index: 'index',
-    restfulPageView: 'restful-page-view',
-  }
+  const routesList = { all: 'all', hiId: 'hi-id', index: 'index' }
 
   return {
     router: $router,

generated/typed-router/typed-router.d.ts

@@ -13,22 +13,16 @@ import type {
 } from 'vue-router'
 import type { TypedRouteList } from './__routes'
 
-export type RouteListDecl = {
-  '404': '404'
-  hiId: 'hi-id'
-  index: 'index'
-  restfulPageView: 'restful-page-view'
-}
+export type RouteListDecl = { all: 'all'; hiId: 'hi-id'; index: 'index' }
 
 export type TypedRouteParams = {
-  '404': {
-    catchAll: string | number
+  all: {
+    all: string | number
   }
   'hi-id': {
     id: string | number
   }
   index: never
-  'restful-page-view': never
 }
 
 type TypedRouteParamsStructure = {

layouts/README.md

@@ -12,4 +12,4 @@ definePageMeta({
 </script>
 ```
 
-Learn more on https://v3.nuxtjs.org/guide/directory-structure/layouts
+Learn more on https://nuxt.com/docs/guide/directory-structure/layouts

locales/en.ts

@@ -3,11 +3,25 @@ export default {
   clientMode: 'Client Mode',
   ssrLoading: 'Loading when jump from other landing page',
   ssrMode: 'Prefetch on SSR Mode',
-  'input-name': "What's your name?",
+  inputName: "What's your name?",
   go: 'Go',
   visited: '{count} page views since {time}',
   back: 'Back',
-  alias: 'Also as known as',
-  China: 'China',
-  'Phil Xu': 'Phil Xu',
+  justNow: 'just now',
+  timeAgo: '{0} ago',
+  inTime: 'in {0}',
+  second: 'second',
+  seconds: 'seconds',
+  minute: 'minute',
+  minutes: 'minutes',
+  hour: 'hour',
+  hours: 'hours',
+  day: 'day',
+  days: 'days',
+  week: 'week',
+  weeks: 'weeks',
+  month: 'month',
+  months: 'months',
+  year: 'year',
+  years: 'years',
 }