docs(ComponentExample): automatically read code (#789)

docs/content/6.overlays/6.notification.md

@@ -37,20 +37,7 @@ export default defineAppConfig({
 
 Then, you can use the `useToast` composable to add notifications to your app:
 
-::component-example
-#default
-:notification-example-basic
-#code
-```vue
-<script setup>
-const toast = useToast()
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
-</template>
-```
-::
+:component-example{component="notification-example-basic"}
 
 When using `toast.add`, this will push a new notification to the stack displayed in `<UNotifications />`. All the props of the `Notification` component can be passed to `toast.add`.
 
@@ -179,7 +166,7 @@ options:
   - name: color
     restriction: included
     values:
-      - gray   
+      - gray
 excludedProps:
   - icon
 ---
@@ -189,47 +176,13 @@ excludedProps:
 
 Use the `click` prop to execute a function when the Notification is clicked.
 
-::component-example
-#default
-:notification-example-click
-#code
-```vue
-<script setup>
-const toast = useToast()
-
-function onClick () {
-  alert('Clicked!')
-}
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
-</template>
-```
-::
+:component-example{component="notification-example-click"}
 
 ### Callback
 
 Use the `callback` prop to execute a function when the Notification expires.
 
-::component-example
-#default
-:notification-example-callback
-#code
-```vue
-<script setup>
-const toast = useToast()
-
-function onCallback () {
-  alert('Notification expired!')
-}
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
-</template>
-```
-::
+:component-example{component="notification-example-callback"}
 
 ### Close
 
@@ -261,20 +214,7 @@ excludedProps:
 
 Use the `actions` prop to add actions to the Notification.
 
-::component-example
-#default
-:notification-example-actions
-#code
-```vue
-<script setup>
-const toast = useToast()
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: () => alert('Clicked!') })" />
-</template>
-```
-::
+:component-example{component="notification-example-actions"}
 
 Like for `closeButton`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notification.default.actionButton`.
 
@@ -341,21 +281,7 @@ This can be handy when you want to display HTML content. To achieve this, you ca
 
 This way, you can use HTML tags in the `title` and `description` props when using `useToast`.
 
-::component-example
-#default
-:notification-example-html
-
-#code
-```vue
-<script setup>
-const toast = useToast()
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Notification <i>italic</i>', description: 'This is an <u>underlined</u> and <b>bold</b> notification.' })" />
-</template>
-```
-::
+:component-example{component="notification-example-html"}
 
 ::callout{icon="i-heroicons-light-bulb"}
 Slots defined in the `<UNotifications />` component are automatically passed down to the `Notification` children.