API Overview

The CodeMirror component has three kinds of API:

Page	Content
Props	Options that configure the editor. Changes are applied without recreating it.
Events	Notifications for loading, focus, document changes, and destruction.
Instance API	Properties and methods available through a template ref.

<script lang="ts" setup vapor>
import { javascript } from '@codemirror/lang-javascript';
import { ref } from 'vue';
import CodeMirror, { type CodeMirrorExposed } from 'vue-codemirror6';

const value = ref('');
const cm = ref<CodeMirrorExposed>();
</script>

<template>
  <code-mirror
    ref="cm"
    v-model="value"
    basic
    :lang="javascript()"
    @ready="() => cm?.view?.focus()"
  />
</template>

#API Overview

API Overview