add router for creating event

src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <nav>
     <router-link :to="{ name: 'EventList' }">Event</router-link> |
-    <router-link :to="{ name: 'AboutView' }">About</router-link>
+    <router-link :to="{ name: 'AboutView' }">About</router-link> |
+    <router-link :to="{ name: 'CreateEvent' }">Create Event</router-link>
   </nav>
   <router-view />
 </template>

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import EventList from '@/views/EventList.vue'
 import AboutView from '@/views/AboutView.vue'
 import EventDetail from '@/views/EventDetail.vue'
+import CreateEvent from '@/views/CreateEvent.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -14,6 +15,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'AboutView',
     component: AboutView,
   },
+  {
+    path: '/create',
+    name: 'CreateEvent',
+    component: CreateEvent,
+  },
   {
     path: '/event/:id',
     name: 'EventDetail',

src/views/CreateEvent.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>create event forms</div>
+  <form>
+    <BaseInput v-model="event.title" label="Title" type="text" />
+    <BaseInput v-model="event.description" label="Descirption" type="text" />
+    <BaseInput v-model="event.location" label="Location" type="text" />
+  </form>
+</template>
+
+<script lang="ts">
+import { iEvent } from '@/types'
+import { defineComponent } from 'vue'
+import BaseInput from '@/components/BaseInput.vue'
+
+export default defineComponent({
+  components: {
+    BaseInput,
+  },
+  data() {
+    return {
+      categories: [
+        'sustainability',
+        'nature',
+        'animal welfare',
+        'housing',
+        'education',
+        'food',
+        'community',
+      ],
+      event: {
+        category: '',
+        title: '',
+        description: '',
+        location: '',
+      } as Partial<iEvent>,
+    }
+  },
+})
+</script>