From c824f300c333bccd20d4bb4cca17ed993b088e68 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 18 Jul 2024 15:34:40 +0200
Subject: [PATCH] docs(ComponentExample): use `$prettier` for consistency

---
 .../components/content/ComponentExample.vue   | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index da7c33e9..ba500120 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -6,13 +6,30 @@ const props = defineProps<{
   props?: { [key: string]: any }
 }>()
 
+const { $prettier } = useNuxtApp()
+
 const camelName = camelCase(props.name)
 
 const data = await fetchComponentExample(camelName)
 
 const componentProps = reactive({ ...(props.props || {}) })
 
-const { data: ast } = await useAsyncData(`component-example-${camelName}`, () => parseMarkdown(`\`\`\`vue\n${data?.code ?? ''}\n\`\`\``))
+const code = computed(() => `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``)
+
+const { data: ast } = await useAsyncData(`component-example-${camelName}`, async () => {
+  let formatted = ''
+  try {
+    formatted = await $prettier.format(code.value, {
+      trailingComma: 'none',
+      semi: false,
+      singleQuote: true
+    })
+  } catch (e) {
+    formatted = code.value
+  }
+
+  return parseMarkdown(formatted)
+}, { watch: [code] })
 </script>
 
 <template>