もろもろ設定

src/App.vue

@@ -1,44 +1,3 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <div>
-    <a
-      href="https://vitejs.dev"
-      target="_blank"
-    >
-      <img
-        src="/vite.svg"
-        class="logo"
-        alt="Vite logo"
-      >
-    </a>
-    <a
-      href="https://vuejs.org/"
-      target="_blank"
-    >
-      <img
-        src="./assets/vue.svg"
-        class="logo vue"
-        alt="Vue logo"
-      >
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+  <RouterView />
 </template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>

src/main.ts

@@ -1,5 +1,9 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import router from './router'
+import { createPinia } from 'pinia'
 
-createApp(App).mount('#app')
+const pina = createPinia()
+
+createApp(App).use(router).use(pina).mount('#app')

src/pages/CreateRoom.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button
+      type="button"
+      @click="count++"
+    >
+      count is {{ count }}
+    </button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a
+      href="https://vuejs.org/guide/quick-start.html#local"
+      target="_blank"
+    >create-vue</a>, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a
+      href="https://github.com/vuejs/language-tools"
+      target="_blank"
+    >Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">
+    Click on the Vite and Vue logos to learn more
+  </p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/pages/HomePage.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button
+      type="button"
+      @click="count++"
+    >
+      count is {{ count }}
+    </button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a
+      href="https://vuejs.org/guide/quick-start.html#local"
+      target="_blank"
+    >create-vue</a>, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a
+      href="https://github.com/vuejs/language-tools"
+      target="_blank"
+    >Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">
+    Click on the Vite and Vue logos to learn more
+  </p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/pages/IndividualRoom.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button
+      type="button"
+      @click="count++"
+    >
+      count is {{ count }}
+    </button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a
+      href="https://vuejs.org/guide/quick-start.html#local"
+      target="_blank"
+    >create-vue</a>, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a
+      href="https://github.com/vuejs/language-tools"
+      target="_blank"
+    >Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">
+    Click on the Vite and Vue logos to learn more
+  </p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/pages/NotFound.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>404 Not Found</h1>
+</template>

src/pages/RoomList.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button
+      type="button"
+      @click="count++"
+    >
+      count is {{ count }}
+    </button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a
+      href="https://vuejs.org/guide/quick-start.html#local"
+      target="_blank"
+    >create-vue</a>, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a
+      href="https://github.com/vuejs/language-tools"
+      target="_blank"
+    >Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">
+    Click on the Vite and Vue logos to learn more
+  </p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/router/index.ts

@@ -0,0 +1,37 @@
+import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Home',
+    component: import('../pages/HomePage.vue'),
+  },
+  {
+    path: '/rooms',
+    name: 'Rooms',
+    component: import('../pages/RoomList.vue'),
+  },
+  {
+    path: '/rooms/:id',
+    name: 'IndividualRoom',
+    component: import('../pages/IndividualRoom.vue'),
+  },
+  {
+    path: '/rooms/create',
+    name: 'CreateRoom',
+    component: import('../pages/CreateRoom.vue'),
+  },
+  {
+    // 404 page
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: import('../pages/NotFound.vue'),
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router

src/shims.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent
+  export default component
+}