diff --git a/src/pages/index-page.vue b/src/pages/index-page.vue
index d516d90..cfaa0e6 100644
--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@@ -7,4 +7,5 @@ definePage({
 <template>
   <h1>Index Page</h1>
   <router-link :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link>
+  <router-link :to="{ name: 'TsEnumUtil' }">TS Enum Util</router-link>
 </template>
diff --git a/src/pages/ts-enum-util.vue b/src/pages/ts-enum-util.vue
new file mode 100644
index 0000000..94bc4ef
--- /dev/null
+++ b/src/pages/ts-enum-util.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { $enum } from 'ts-enum-util';
+enum Direction {
+  Up = 'UP',
+  Down = 'DOWN',
+  Left = 'LEFT',
+  Right = 'RIGHT',
+}
+
+enum TestEnum {
+  A,
+  B,
+}
+
+const visitValue = (value: any) => {
+  $enum.visitValue(value).with({
+    [Direction.Up]: () => {},
+    [Direction.Down]: () => {},
+    [Direction.Left]: () => {},
+    [Direction.Right]: () => {},
+    [$enum.handleNull]: () => {},
+    [$enum.handleUndefined]: () => {},
+    [$enum.handleUnexpected]: () => {},
+  });
+};
+
+const mapValue = (value: any) => {
+  return $enum.mapValue(value).with({
+    [Direction.Up]: 'Up',
+    [Direction.Down]: 'Down',
+    [Direction.Left]: 'Left',
+    [Direction.Right]: 'Right',
+    [$enum.handleNull]: 'Null',
+    [$enum.handleUndefined]: 'Undefined',
+    [$enum.handleUnexpected]: 'Unexpected',
+  });
+};
+</script>
+
+<template>
+  <h1>TS Enum Util</h1>
+  <div flex="~ row">
+    <button @click="$router.back()">Back</button>
+  </div>
+  <main>
+    <p>TestEnum: {{ TestEnum }}</p>
+    <p>Direction: {{ Direction }}</p>
+    <ul list-circle>
+      <li>{{ `.getKeys(): ${$enum(Direction).getKeys()}` }}</li>
+      <li>{{ `.getValues(): ${$enum(Direction).getValues()}` }}</li>
+      <li><button @click="visitValue(Direction.Up)">Visit Value</button></li>
+      <li>{{ `.mapValue(null): ${mapValue(null)}` }}</li>
+      <li>getKeyOrDefault</li>
+      <li>getValueOrDefault</li>
+    </ul>
+  </main>
+</template>
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 3195871..9b941ed 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -20,5 +20,6 @@ declare module 'vue-router/auto-routes' {
   export interface RouteNamedMap {
     'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'IndexPage': RouteRecordInfo<'IndexPage', '/index-page', Record<never, never>, Record<never, never>>,
+    'TsEnumUtil': RouteRecordInfo<'TsEnumUtil', '/ts-enum-util', Record<never, never>, Record<never, never>>,
   }
 }