Mount CodeMirror in Vue

CodeMirror.vue

<template>
  <div ref="editorRef" class="editor" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { EditorView, basicSetup } from 'codemirror'
import { json } from '@codemirror/lang-json'

const editorRef = ref<HTMLDivElement | null>(null)
let editor: EditorView | null = null

onMounted(() => {
  if (!editorRef.value) return

  editor = new EditorView({
    doc: JSON.stringify({"foo": "bar"}, null, 2),
    extensions: [
      basicSetup,
      json(),
      EditorView.updateListener.of((update) => {
        if (update.docChanged) {
          console.log('Content changed:', update.state.doc.toString())
        }
      })
    ],
    parent: editorRef.value
  })
})

onBeforeUnmount(() => {
  editor?.destroy()
})
</script>