diff --git a/package.json b/package.json
index 5e6c9a6..6c634a7 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "prisma": "^4.9.0",
     "typescript": "^4.9.3",
     "vite": "^4.0.0",
+    "vite-plugin-pug": "^0.3.2",
     "vue-tsc": "^1.0.11"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 6d8ccdf..851af32 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
 import EventNew from './components/EventNew.vue'
+import EventList from './components/EventList.vue';
 </script>
 
 <template>
@@ -14,6 +15,7 @@ import EventNew from './components/EventNew.vue'
   </div>
   <!-- <HelloWorld msg="Vite + Vue" /> -->
   <EventNew msg="Neues GemeindeEvent erstellen" />
+  <EventList msg="this my list" />
 </template>
 
 <style scoped>
diff --git a/src/components/EventList.vue b/src/components/EventList.vue
new file mode 100644
index 0000000..a8588db
--- /dev/null
+++ b/src/components/EventList.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ICommuniEvent } from '../interfaces/CommuniEvents';
+import event_response from '../fixtures/communi-app-examples.json'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+const EventList = ref<Array<ICommuniEvent>>([])
+
+</script>
+
+<template lang="pug">
+h1 {{ msg }}
+div(class="card") my card content
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 05c1740..db9ae6b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import pugPlugin from "vite-plugin-pug"
+
+const options = {}
+const locals = { name: "My Pug" }
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
-})
+  plugins: [
+    vue(),
+    pugPlugin(options, locals)],
+})
\ No newline at end of file