<template> <code-mirror v-model="value" /> </template> <script> import { ref, defineComponent } from 'vue';  import CodeMirror from 'vue-codemirror6';  export default defineComponent({  components: {  CodeMirror,  },  setup() {  const value = ref('Cozy lummox gives smart squid who asks for job pen.');   return { value };  }, }); </script>

<template> <code-mirror :lang="lang" :linter="linter"> <pre> { "key": "value" }</pre > </code-mirror> </template> <script> import { ref, defineComponent } from 'vue';  import { json, jsonParseLinter } from '@codemirror/lang-json';  import CodeMirror from 'vue-codemirror6';  export default defineComponent({  components: {  CodeMirror,  },  setup() {  const lang = json();  const linter = jsonParseLinter();  return { lang, linter };  }, }); </script>

<template> <code-mirror v-model="value" :lang="lang" /> </template> <script setup lang="ts"> import { ref } from 'vue'; import CodeMirror from 'vue-codemirror6'; import { javascript } from '@codemirror/lang-javascript';  const value = ref('console.log("Hello, World!");'); const lang = javascript(); </script>

<template> <client-only> <code-mirror v-model="value" :lang="lang" /> </client-only> </template>

<script lang="ts" setup> import { ref, defineComponent, type Ref } from 'vue';  // Load component import CodeMirror from 'vue-codemirror6';  // CodeMirror extensions import { markdown as md } from '@codemirror/lang-markdown'; import type { LanguageSupport } from '@codemirror/language'; import type { Extension } from '@codemirror/state'; import type { ViewUpdate } from '@codemirror/view';  /** text */ const value: Ref<string> = ref('');  /** Dark mode **/ const dark: Ref<boolean> = ref(  window.matchMedia('(prefers-color-scheme: dark)').matches );  /**  * CodeMirror Language  *  * @see {@link https://codemirror.net/6/docs/ref/#language | @codemirror/language}  */ const lang: LanguageSupport = md();  /**  * Internationalization Config.  * In this example, the display language to Japanese.  * Must be reactive when used in combination with vue-i18n.  *  * @see {@link https://codemirror.net/6/examples/translate/ | Example: Internationalization}  */ const phrases: Record<string, string> = {  // @codemirror/view  'Control character': '制御文字',  // @codemirror/commands  'Selection deleted': '選択を削除',  // @codemirror/language  'Folded lines': '折り畳まれた行',  'Unfolded lines': '折り畳める行',  to: '行き先',  'folded code': '折り畳まれたコード',  unfold: '折り畳みを解除',  'Fold line': '行を折り畳む',  'Unfold line': '行の折り畳む解除',  // @codemirror/search  'Go to line': '行き先の行',  go: 'OK',  Find: '検索',  Replace: '置き換え',  next: '▼',  previous: '▲',  all: 'すべて',  'match case': '一致条件',  'by word': '全文検索',  regexp: '正規表現',  replace: '置き換え',  'replace all': 'すべてを置き換え',  close: '閉じる',  'current match': '現在の一致',  'replaced $ matches': '$ 件の一致を置き換え',  'replaced match on line $': '$ 行の一致を置き換え',  'on line': 'した行',  // @codemirror/autocomplete  Completions: '自動補完',  // @codemirror/lint  Diagnostics: 'エラー',  'No diagnostics': 'エラーなし', }; </script> <template> <code-mirror v-model="value" basic :dark="dark" :lang="lang" :phrases="phrases" /> </template>

<script setup lang="ts"> import { ref, onMounted, type Ref, type PropType } from 'vue'; import CodeMirror from 'vue-codemirror6';  const cm: Ref<InstanceType<typeof CodeMirror> | undefined> = ref();  onMounted(() => {  console.log(cm.value?.json); }); </script> <template> <code-mirror ref="cm" /> </template>