Fix code includes

Author: Demivan

package.json

@@ -12,6 +12,7 @@
     "vitepress": "^1.0.0-alpha.1"
   },
   "dependencies": {
+    "@vueuse/core": "^8.6.0",
     "vue": "^3.2.36"
   }
 }

pnpm-lock.yaml

@@ -1,13 +1,10 @@
-<script>
-export default {
-  data () {
-    return {
-      now: new Date()
-    }
-  }
-}
+<script setup>
+import { useNow } from '@vueuse/core'
+
+const now = useNow()
 </script>
 
+// #region snippet
 <template>
   <p class="demo">
     {{ $t('default', { now }) }}<br>
@@ -19,5 +16,6 @@ export default {
 <fluent locale="en">
 default = Now is {{ $now }}
 today = Today is {{ DATETIME($now, day: "numeric", month: "long", year: "numeric") }}
-now = It is {{ DATETIME($now, hour: "numeric", minute: "numeric") }}
+now = It is {{ DATETIME($now, hour: "numeric", minute: "numeric", second: "numeric") }}
 </fluent>
+// #endregion snippet

src/components/DateTime.vue

@@ -1,13 +1,10 @@
-<script>
-export default {
-  data () {
-    return {
-      now: new Date()
-    }
-  }
-}
+<script setup>
+import { useNow } from '@vueuse/core'
+
+const now = useNow()
 </script>
 
+// #region snippet
 <template>
   <p class="demo">
     {{ $t('default', { now }) }}<br>
@@ -19,5 +16,6 @@ export default {
 <fluent locale="en">
 default = Now is {{ $now }}
 today = Today is {{ DATEFNS($now, "PP") }}
-now = It is {{ DATEFNS($now, "p") }}
+now = It is {{ DATEFNS($now, "pp") }}
 </fluent>
+// #endregion snippet

src/components/DateTimeCustom.vue

@@ -8,6 +8,7 @@
   }
 </script>
 
+#region snippet
 <template>
   <div>
     <div>{{ $t('hello-user', { userName }) }}</div>
@@ -30,3 +31,4 @@ shared-photos =
     *[other] their stream
   }.
 </fluent>
+#endregion snippet

src/components/Simple.vue

@@ -2,6 +2,11 @@
 description: 'fluent-vue has built-in date and time formatting using native js methods. But it allows custom implementation using any library you want: dayjs, date-fns, moment, etc.'
 ---
 
+<script setup>
+  import DateTimeComponent from '../components/DateTime.vue'
+  import DateTimeCustom from '../components/DateTimeCustom.vue'
+</script>
+
 # Localizing date and time
 
 Fluent has build-in function for formatting date and time: `DATETIME`. It uses [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) under the hood.
@@ -27,9 +32,11 @@ See the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaS
 
 ### Example component
 
-@[code{11-33}](../components/DateTime.vue)
+<<< @/components/DateTime.vue#snippet
 
-<date-time />
+::: info Output
+<date-time-component />
+:::
 
 ## Using custom library for date formatting
 
@@ -58,10 +65,8 @@ const fluent = createFluentVue({
 
 ### Use it
 
-@[code{11-33}](../components/DateTimeCustom.vue)
-
-<script setup>
-  import DateTimeCustom from '../components/DateTimeCustom.vue'
-</script>
+<<< @/components/DateTimeCustom.vue#snippet
 
+::: info Output
 <date-time-custom />
+:::

src/components/SimpleSource.vue

@@ -8,7 +8,7 @@ Fluent keeps simple things simple and makes complex things possible. The syntax
 
 ## Example
 
-<<< @/components/SimpleSource.vue
+<<< @/components/Simple.vue#snippet
 
 <script setup>
   import SimpleInput from './components/SimpleInput.vue'