SoFunction
Updated on 2025-04-05

Detailed explanation of how to use CodeMirror plug-in in Vue3

1. Install CodeMirror plug-in

First, we need to install the CodeMirror-related plug-ins. In Vue3 projects, it can be installed via npm or yarn.

Install vue-codemirror package

npm install vue-codemirror --save

or

yarn add vue-codemirror

Install language support package

If you need to support specific programming languages, such as JavaScript, you can install the corresponding language package.

npm i @codemirror/lang-javascript

or

yarn add @codemirror/lang-javascript

Install theme package

CodeMirror provides a variety of themes, and you can choose your favorite theme to install. For example, install the One Dark theme:

npm i @codemirror/theme-one-dark

or

yarn add @codemirror/theme-one-dark

2. Create CodeMirror component

Next, we need to create a CodeMirror component in the Vue3 project for code editing and presentation.

  • Create a new component

<template>
  <codemirror
    v-model="code"
    placeholder="Code goes here..."
    :style="{ height: '100%' }"
    :autofocus="true"
    :tabSize="2"
    :extensions="extensions"
  />
</template>

<script lang="ts" setup>
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";
import { ref } from "vue";
import { EditorView } from "@codemirror/view";

let myTheme = ({
  "&": { color: "#0052D9", backgroundColor: "#FFFFFF" },
  ".cm-content": { caretColor: "#0052D9" },
  ".cm-activeLine": { backgroundColor: "#FAFAFA" },
  ".cm-activeLineGutter": { backgroundColor: "#FAFAFA" },
  "&.cm-focused .cm-cursor": { borderLeftColor: "#0052D9" },
  "&.cm-focused .cm-selectionBackground, ::selection": {
    backgroundColor: "#0052D9",
    color: "#FFFFFF"
  },
  ".cm-gutters": { backgroundColor: "#FFFFFF", color: "#ddd", border: "none" }
}, { dark: true });

interface IProps {
  height?: string;
}

const props = withDefaults(defineProps<IProps>(), { height: '400px' });
const code = ref('');
const extensions = [javascript(), myTheme];

const change = () => {
  // You can add the processing logic when the code changes here};
</script>

<style scoped>
/* The style of components can be added here */
</style>

In this component, we use the Codemirror component provided by vue-codemirror, and implement bidirectional data binding through the v-model directive. We also set some basic properties of the editor, such as autofocus, tab size, etc., and added JavaScript language support and custom One Dark themes.

Using mirrorTextArea component in parent component

Now we can use the mirrorTextArea component in the parent component to present the code editor.

<template>
  <div>
    <mirrorTextArea :height="editorHeight" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import mirrorTextArea from "./components/";

const editorHeight = ref('600px');
</script>

<style scoped>
/* The style of the parent component can be added here */
</style>

In this example, we willmirrorTextAreaThe height of the component is set to 600px and pass:heightThe attribute is passed to the child component.

3. Configure the CodeMirror editor

The CodeMirror editor provides a wealth of configuration options that can meet different needs. Next, we will introduce some commonly used configuration options.

Set editor height and width

The editor's height and width can be set by inline style or CSS classes.

<codemirror
  v-model="code"
  :style="{ height: '400px', width: '600px' }"
  placeholder="Code goes here..."
  :autofocus="true"
  :tabSize="2"
  :extensions="extensions"
/>

Set language mode

CodeMirror supports multiple programming languages, which can be set upmodeProperties to select language mode.

<codemirror
  v-model="code"
  :style="{ height: '400px' }"
  placeholder="Code goes here..."
  :autofocus="true"
  :tabSize="2"
  :extensions="[javascript(), oneDark]"
  mode="text/javascript"
/>

In this example, we set the editor to JavaScript mode.

Setting up the theme

Can be set byextensionsProperties to apply the topic.

<codemirror
  v-model="code"
  :style="{ height: '400px' }"
  placeholder="Code goes here..."
  :autofocus="true"
  :tabSize="2"
  :extensions="[javascript(), oneDark]"
/>

In this example, we applied the One Dark theme.

Set up autofocus

Can be set byautofocusProperties to make the editor automatically focus when the page is loaded.

<codemirror
  v-model="code"
  :style="{ height: '400px' }"
  placeholder="Code goes here..."
  :autofocus="true"
  :tabSize="2"
  :extensions="[javascript(), oneDark]"
/>

Set the tab size

Can be set bytabSizeProperties to set the size of the tab character (in spaces).

<codemirror
  v-model="code"
  :style="{ height: '400px' }"
  placeholder="Code goes here..."
  :autofocus="true"
  :tabSize="4"
  :extensions="[javascript(), oneDark]"
/>

Set placeholders

Can be set byplaceholderProperties to display placeholder text.

<codemirror
  v-model="code"
  :style="{ height: '400px' }"
  placeholder="Enter your code here..."
  :autofocus="true"
  :tabSize="2"
  :extensions="[javascript(), oneDark]"
/>

Disable the editor

Can be set bydisabledProperties to disable the editor to make it read-only.

<codemirror
  v-model="code"
  :style="{ height: '400px' }"
  placeholder="Code goes here..."
  :autofocus="true"
  :tabSize="2"
  :extensions="[javascript(), oneDark]"
  :disabled="true"
/>

Listen to events

CodeMirror provides a variety of events such aschange、input、readyetc. You can handle changes in the editor by listening to these events.

<codemirror
  v-model="code"
  :style="{ height: '400px' }"
  placeholder="Code goes here..."
  :autofocus="true"
  :tabSize="2"
  :extensions="[javascript(), oneDark]"
  @change="handleChange"
  @input="handleInput"
  @ready="handleReady"
/>

<script lang="ts" setup>
import { ref } from "vue";

const code = ref('');

const handleChange = (value: string, viewUpdate: any) => {
  ('Code changed:', value);
};

const handleInput = (value: string) => {
  ('Code input:', value);
};

const handleReady = (editor: any) => {
  ('Editor is ready:', editor);
};
</script>

The above is a detailed explanation of the method of using CodeMirror plug-in in Vue3. For more information about using CodeMirror plug-in in Vue3, please follow my other related articles!