ついでにscript setupに

src/components/Index/PageInfoPanel.vue

@@ -11,30 +11,20 @@
     </router-link>
   </li>
 </template>
-<script lang="ts">
-import { defineComponent, toRef } from 'vue'
+
+<script lang="ts" setup>
+import { toRef } from 'vue'
 import Icon from '/@/components/UI/Icon.vue'
 import useRouteInfo from '/@/lib/routeInfo'
-export default defineComponent({
-  name: 'PageInfoPanel',
-  components: {
-    Icon
-  },
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    path: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const routeInfo = useRouteInfo(toRef(props, 'name'))
-    return { routeInfo }
-  }
-})
+
+interface Props {
+  name: string
+  path: string
+}
+
+const props = defineProps<Props>()
+
+const routeInfo = useRouteInfo(toRef(props.name))
 </script>
 
 <style lang="scss" module>

src/components/Index/PageInfoPanels.vue

@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+import PageInfoPanel from '/@/components/Index/PageInfoPanel.vue'
+import { routes } from '/@/lib/routeInfo'
+
+const pages = routes.filter(route => route.name != 'Top')
+</script>
+
 <template>
   <ul :class="$style.list">
     <page-info-panel
@@ -9,21 +16,6 @@
   </ul>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import PageInfoPanel from '/@/components/Index/PageInfoPanel.vue'
-import { routes } from '/@/lib/routeInfo'
-
-export default defineComponent({
-  name: 'PageInfoPanels',
-  components: { PageInfoPanel },
-  setup() {
-    const pages = routes.filter(route => route.name != 'Top')
-    return { pages }
-  }
-})
-</script>
-
 <style lang="scss" module>
 .list {
   display: flex;