feat: add slot in layout

starter-collective · Nov 21, 2024 · 289f661 · 289f661
1 parent 07c6c73
commit 289f661
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 34 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -47,5 +47,6 @@
   // Enable the i18n-ally extension
   "i18n-ally.localesPaths": [
     "i18n/locales"
-  ]
+  ],
+  "i18n-ally.keystyle": "nested"
 }
diff --git a/app/app.vue b/app/app.vue
@@ -3,16 +3,20 @@ import '@/styles/main.css'
 
 const { t } = useI18n()
 
+const title = computed(() => {
+  return t('app.title')
+})
+
 useHead({
-  titleTemplate: (s) => {
-    return s && s !== t('app.title') ? `${s} - ${t('app.title')}` : t('app.title')
+  titleTemplate: (_t) => {
+    return _t && _t !== title.value ? `${_t} - ${title.value}` : title.value
   },
 })
 </script>
 
 <template>
   <div>
-    <NuxtLoadingIndicator />
+    <NuxtLoadingIndicator color="linear-gradient(to right, #FF057C, #7C64D5, #4CC3FF)" />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>

diff --git a/app/composables/locale.ts b/app/composables/locale.ts
@@ -1,8 +1,10 @@
 /**
- * Locale composable for vue-i18n.
+ * Locale composable for @nuxtjs/i18n.
+ *
+ * @see https://i18n.nuxtjs.org/
  */
 export function useLocale() {
-  const { locale, setLocale, messages } = useI18n()
+  const { locale, messages, setLocale } = useI18n()
 
   function toggleLocale(_locale?: any) {
     if (!_locale) {

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
   <main>
-    <RouterView />
+    <slot />
   </main>
 </template>
diff --git a/app/layouts/page.vue b/app/layouts/page.vue
@@ -5,14 +5,10 @@ const { toggleLocale } = useLocale()
 
 const route = useRoute()
 
-const router = useRouter()
+const localePath = useLocalePath()
 
 const { headerLogo } = storeToRefs(useLayoutStore())
 
-function goPage(path: string) {
-  router.push(path)
-}
-
 function openGithub() {
   window.open(GITHUB_URL)
 }
@@ -27,13 +23,13 @@ function openGithub() {
         <sup><i>v{{ APP_VERSION }}</i></sup>
       </h1>
       <div flex="~ wrap gap-2 justify-center">
-        <TheButton v-if="route.path === '/about'" @click="goPage('/')">
+        <TheButton v-if="route.path === '/about'" @click="localePath('/')">
           {{ t('button.index-page') }}
         </TheButton>
-        <TheButton v-else @click="goPage('/about')">
+        <TheButton v-else @click="localePath('/about')">
           {{ t('button.about-page') }}
         </TheButton>
-        <TheButton @click="goPage('/404')">
+        <TheButton @click="localePath('/404')">
           {{ t('button.404-page') }}
         </TheButton>
         <TheButton @click="toggleLocale()">
@@ -48,7 +44,7 @@ function openGithub() {
       </div>
     </header>
     <main m-auto min-h-32 max-w-full sm:max-w-2xl>
-      <RouterView />
+      <slot />
     </main>
     <footer flex="~ items-center justify-center gap-2" py-8>
       <a :href="LICENSE_URL" target="_blank">MIT License</a>

diff --git a/app/pages/about.vue b/app/pages/about.vue
@@ -2,6 +2,7 @@
 definePageMeta({
   name: 'About',
   layout: 'page',
+  title: 'page.about.title',
 })
 
 const { t } = useI18n()

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -2,6 +2,7 @@
 definePageMeta({
   name: 'Index',
   layout: 'page',
+  title: 'page.index.title',
 })
 
 const { t } = useI18n()
@@ -10,7 +11,13 @@ const { headerLogo } = storeToRefs(useLayoutStore())
 
 const { toggleLogo } = useLayoutStore()
 
-const todoList = ref<any>([])
+interface TodoItem {
+  id: number
+  title: string
+  completed: boolean
+}
+
+const todoList = ref<TodoItem[]>([])
 
 const emptyText = ref('')
 
@@ -21,7 +28,7 @@ async function fetchData() {
     return
   loading.value = true
   try {
-    const res = await $fetch('/api/todos')
+    const res = await $fetch<TodoItem[]>('/api/todos')
     todoList.value = res
   }
   catch (e) {

diff --git a/app/styles/main.css b/app/styles/main.css
@@ -30,18 +30,3 @@ p {
 h1 {
   --at-apply: text-6 font-bold my-5;
 }
-
-#nprogress {
-  pointer-events: none;
-}
-
-#nprogress .bar {
-  background: linear-gradient(to right, #FF057C, #7C64D5, #4CC3FF);
-  opacity: 0.75;
-  position: fixed;
-  z-index: 1031;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-}
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -80,7 +80,6 @@ export default defineNuxtConfig({
   // https://i18n.nuxtjs.org/
   i18n: {
     defaultLocale: 'en',
-    lazy: true,
     locales: [
       { code: 'en', file: 'en.json', name: 'English' },
       { code: 'zh', file: 'zh.json', name: '中文' },