All files / src App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <v-app>
    <component :is="layoutComponent">
      <template v-if="route.meta.keepAlive">
        <KeepAlive>
          <RouterView />
        </KeepAlive>
      </template>
      <template v-else>
        <RouterView />
      </template>
    </component>
    <Loading />
  </v-app>
</template>
 
<script setup lang="ts">
// region Dependency Injection
import {computed} from 'vue'
import {useRoute} from 'vue-router'
import { useAuth } from '@/composables/useAuth'
// endregion Dependency Injection
 
// region Component Injection
import DefaultLayout from "@/layouts/DefaultLayout.vue";
import AuthLayout from "@/layouts/AuthLayout.vue";
import Loading from "@/components/app/Loading.vue";
// endregion Component Injection
 
// region interface
// endregion interface
 
// region constants
const route = useRoute()
const { isLoggedIn } = useAuth()
const layouts = {
  default: DefaultLayout, // ログイン時レイアウト
  auth: AuthLayout,       // ゲスト用レイアウト
}
//
// const layouts = {
//   default: DefaultLayout,
//   auth: AuthLayout
// } as const
// endregion constants
 
// region props
// endregion props
 
// region variable
// endregion variable
 
// region properties
// endregion properties
 
// region emits
// endregion emits
 
// region validator
// endregion validator
 
// region methods
// const layoutComponent = computed(() => {
//   const key = (route.meta.layout as keyof typeof layouts)?? 'default'
//   return layouts[key]?? DefaultLayout
// })
 
const layoutComponent = computed(() => {
  const metaLayout = (route.meta.layout as string) || 'default'
  // 共用ページは自動切替
  if (metaLayout === 'auto') {
    return isLoggedIn.value ? DefaultLayout : AuthLayout
  }
  // 明示指定（'default' or 'auth'）
  return metaLayout === 'auth' ? AuthLayout : DefaultLayout
})
// endregion methods
 
// region export
// endregion export
</script>
 
<style scoped>
</style>