Vue integration

Pattern 1: Parser only

<script setup>
import { computed } from 'vue';
import quikdown from 'quikdown';

const props = defineProps({ source: String });
const html = computed(() => quikdown(props.source));
</script>

<template>
  <div class="markdown" v-html="html"></div>
</template>

Pattern 2: Full editor as a component

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import QuikdownEditor from 'quikdown/edit';

const props = defineProps({
  modelValue: { type: String, default: '' },
  mode:  { type: String, default: 'split' },
  theme: { type: String, default: 'auto' },
});
const emit = defineEmits(['update:modelValue']);

const containerEl = ref(null);
let editor = null;

onMounted(() => {
  editor = new QuikdownEditor(containerEl.value, {
    mode:  props.mode,
    theme: props.theme,
    showUndoRedo: true,
    onChange: (md) => emit('update:modelValue', md),
  });
  editor.setMarkdown(props.modelValue);
});

onBeforeUnmount(() => editor?.destroy());

watch(() => props.modelValue, (val) => {
  if (editor && val !== editor.getMarkdown()) editor.setMarkdown(val);
});
watch(() => props.mode,  (m) => editor?.setMode(m));
watch(() => props.theme, (t) => editor?.setTheme(t));
</script>

<template>
  <div ref="containerEl" style="height: 500px"></div>
</template>

Usage

<script setup>
import { ref } from 'vue';
import MarkdownEditor from './MarkdownEditor.vue';

const md = ref('# Hello\n\nVue + quikdown');
</script>

<template>
  <MarkdownEditor v-model="md" theme="auto" />
</template>

Notes

• Nuxt SSR: dynamically import the editor on the client only — const QuikdownEditor = (await import('quikdown/edit')).default inside onMounted. The parser (quikdown) and bidirectional (quikdown/bd) modules work in Node and are safe to import server-side.
• v-model works through the standard modelValue + update:modelValue contract. The editor's onChange callback emits the event.
• Cleanup: always call editor.destroy() in onBeforeUnmount.