Usage

yarn add vue-codemirror6 codemirror

yarn add vue-codemirror6 @vue/composition-api

Props

Supported Languages

Official

Unofficial

Supported Themes

Example

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

Example using Slots

<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';importCodeMirrorfrom'vue-codemirror6';exportdefaultdefineComponent({  components: {    CodeMirror,  },setup() {constlang=json();constlinter=jsonParseLinter();return { lang, linter };  },});</script>

Using with SSR (Nuxt.js, etc.)

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

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

Full Example

<script lang="ts" setup>import {ref,defineComponent,typeRef }from'vue';// Load componentimportCodeMirrorfrom'vue-codemirror6';// CodeMirror extensionsimport {markdownasmd }from'@codemirror/lang-markdown';importtype {LanguageSupport }from'@codemirror/language';importtype {Extension }from'@codemirror/state';importtype {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{@linkhttps://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{@linkhttps://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-mirrorv-model="value"basic:dark="dark":lang="lang":phrases="phrases"  /></template>

Events

Parameter / Function

<script setup lang="ts">import {ref,onMounted,typeRef,typePropType }from'vue';importCodeMirrorfrom'vue-codemirror6';const cm:Ref<InstanceType<typeofCodeMirror>|undefined>=ref();onMounted(()=> {console.log(cm.value?.json);});</script><template>  <code-mirrorref="cm" /></template>

CodeMirror5 backward compatible functions

Recommendations

constconfig:UserConfig={// ...build:{rollupOptions:{output:{manualChunks:{// ...codemirror:['vue-codemirror6'],'codemirror-lang':[// Add the following as needed.'@codemirror/lang-html','@codemirror/lang-javascript','@codemirror/lang-markdown',],// ...},},},},// ...};

Development

Testing

# Run testspnpmtest# Run tests in watch modepnpm test:watch# Run tests with UIpnpm test:ui# Run tests with coveragepnpm test:coverage

LICENSE