add Post.vue example using data attributes for props

deathtothecorporation · Aug 9, 2023 · 5b306e2 · 5b306e2
1 parent 0306d57
commit 5b306e2
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 1 deletion.
diff --git a/_frontend/entrypoints/application.js b/_frontend/entrypoints/application.js
@@ -11,5 +11,13 @@ import '~/src/assets/index.scss'
 
 import { createApp } from 'vue'
 import App from '~/src/App.vue'
+import Post from '~/src/Post.vue'
 
 createApp(App).mount('#app')
+
+const postElement = document.querySelector('#post')
+const title = postElement.dataset.title
+const post = createApp(Post, {
+  title
+});
+post.mount('#post')
diff --git a/_frontend/src/Post.vue b/_frontend/src/Post.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+import { ref } from 'vue'
+const test = ref('hello world')
+const props = defineProps<{
+  title: string;
+}>()
+
+
+</script>
+
+<template>
+
+  <main>
+    This is vue
+    <pre>
+      hi: {{ test }}
+      title: {{ title }}
+    </pre>
+
+  </main>
+</template>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -9,6 +9,5 @@
   <body>
     {% include navigation.html %}
     {{ content }}
-    <div id="app"></div>
   </body>
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -15,3 +15,5 @@ <h1>{{ page.title }}</h1>
 </p>
 
 {{ content }}
+
+<div id="post" data-title="{{ page.title }}"></div>
diff --git a/index.md b/index.md
@@ -7,6 +7,7 @@ title: Home
 ---
 
 <h1>Test Hello</h1>
+
 **this is bold in markdown**
 
 <ul>