Add Vue example

examples/vue/App.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import SpeedHighlight from 'SpeedHighlight.vue'
+
+import { ref } from 'vue'
+
+const myCode = ref(`printf('Hello World!\n');`)
+const myLang = ref('c')
+</script>
+
+<template>
+    <p>Here is a the example code:</p>
+    <SpeedHighlight :content="myCode" :lang="myLang" />
+</template>

examples/vue/README.md

@@ -0,0 +1,20 @@
+# VueJs 3.x Example of a Speed Highlight Component
+
+## Install
+
+```console
+$ pnpm i @speed-highlight/core
+```
+
+## SpeedHighlight.vue
+
+This is a simple component that wraps `speed-highlight` and makes it easier to use in your Vue app.
+It takes two props: `content` & `lang` - and you can include it in your pages like this:
+
+```vue
+<SpeedHighlight content="printf('Hello World!\n');" lang="c" />
+```
+
+## App.vue
+
+Simplified example page/parent, to show how you include `<SpeedHighlight />` on a page.

examples/vue/SppedHighlight.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { defineProps, ref, onMounted } from 'vue'
+import { highlightText } from '@speed-highlight/core'
+import '@speed-highlight/core/dist/themes/default.css'
+
+const { content = '', lang = 'c' } = defineProps<{ content: string; lang: string }>()
+
+const highlightedCode = ref('')
+
+onMounted(async () => {
+    highlightedCode.value = await highlightText(content, lang)
+})
+</script>
+
+<template>
+  <div :class="`shj-lang-${lang}`" v-html="highlightedCode"></div>
+</template>