npmpackage.info

Gathering detailed insights and metrics for vue-codemirror

Other packages similar to vue-codemirror

vue-codemirror-lite

1.0.4

Lite Codemirror component for Vue.js

@codemirror/lang-vue

0.1.3

Vue template support for the CodeMirror code editor

@scalar/use-codemirror

0.12.19

CodeMirror for Vue

vue-codemirror6

1.3.22

CodeMirror6 Component for vue2 and vue3.

Gathering detailed insights and metrics for vue-codemirror

vue-codemirror - 6.1.1 | npmpackage.info

vue-codemirror

@codemirror code editor component for @vuejs

6.1.1

3,407

MIT

TypeScript

83.06 kB

12,375,461 2.7

Installations

npm install vue-codemirror

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

16.16.0

NPM Version

8.11.0 Pull Requests

Open

3

Total

36

Closed

10

Merged

23

Issues

Open

88

Total

181

Closed

93

Releases

v6.1.1

Updated on Aug 27, 2022

v6.1.0

Updated on Aug 27, 2022

v6.0.2

Updated on Jul 27, 2022

v6.0.1

Updated on Jul 21, 2022

v6.0.0

Updated on Jun 13, 2022

v5.1.0

Updated on Jun 11, 2022

View All 10 releases

Languages

TypeScript

Vue

JavaScript

HTML

Shell

TypeScript (65.97%)

Vue (29.46%)

JavaScript (1.98%)

HTML (1.47%)

Shell (1.12%)

Developer

surmon-china

Download Statistics

Total Downloads

12,375,461

Last Day

9,887

Last Week

66,332

Last Month

277,878

Last Year

2,953,466

GitHub Statistics

MIT License

3,407 Stars

191 Commits

382 Forks

40 Watchers

5 Branches

14 Contributors

Updated on Jul 14, 2025

Maintainers

View All 14 Contributors

Package Meta Information

Latest Version

6.1.1

Package Id

vue-codemirror@6.1.1

Unpacked Size

83.06 kB

Size

15.96 kB

File Count

NPM Version

8.11.0

Node Version

16.16.0

Total Downloads

Cumulative downloads

Total Downloads

12,375,461

Last Day

5.7%

9,887

Compared to previous day

Last Week

5.1%

66,332

Compared to previous week

Last Month

-9.4%

277,878

Compared to previous month

Last Year

-3.7%

2,953,466

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

vue-codemirror

CodeMirror(6) component for Vue(3).

vue-codemirror v5/v6 has been released. This is a new version based on CodeMirror@6 and is available to Vue3 only. Since CodeMirror@6 is developed with native ES Modules, the new version will no longer support direct browser references to UMD modules. In short, the new version is ⚠️ completely NOT compatible with previous versions. If you wish to continue using Vue2 or a lower version of CodeMirror, please refer to the legacy versions below.

This example site contains most of what you want.

Legacy version

examples (Vue2)
vue-codemirror@4.x (Vue2 / CodeMirror5)

Documentation

CodeMirror packages

Usage

Install

1yarn add codemirror vue-codemirror

1npm install codemirror vue-codemirror --save

Depending on your actual needs, you may need to install more CodeMirror packages

1# CodeMirror languages...
2yarn add @codemirror/lang-html
3yarn add @codemirror/lang-json
4yarn add @codemirror/lang-javascript
5
6# CodeMirror themes...
7yarn add @codemirror/theme-one-dark
8
9# more CodeMirror packages...

If you need import API/interface from codemirror, you need to make codemirror explicitly dependent in your `package.json`

e.g.

1"dependencies": {
2  "@codemirror/state": "6.x"
3}

1import { EditorState } from '@codemirror/state'

Local component

1<template>
2  <codemirror
3    v-model="code"
4    placeholder="Code goes here..."
5    :style="{ height: '400px' }"
6    :autofocus="true"
7    :indent-with-tab="true"
8    :tab-size="2"
9    :extensions="extensions"
10    @ready="handleReady"
11    @change="log('change', $event)"
12    @focus="log('focus', $event)"
13    @blur="log('blur', $event)"
14  />
15</template>
16
17<script>
18  import { defineComponent } from 'vue'
19  import { Codemirror } from 'vue-codemirror'
20  import { javascript } from '@codemirror/lang-javascript'
21  import { oneDark } from '@codemirror/theme-one-dark'
22
23  export default defineComponent({
24    components: {
25      Codemirror
26    },
27    setup() {
28      const code = ref(`console.log('Hello, world!')`)
29      const extensions = [javascript(), oneDark]
30
31      // Codemirror EditorView instance ref
32      const view = shallowRef()
33      const handleReady = (payload) => {
34        view.value = payload.view
35      }
36
37      // Status is available at all times via Codemirror EditorView
38      const getCodemirrorStates = () => {
39        const state = view.value.state
40        const ranges = state.selection.ranges
41        const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
42        const cursor = ranges[0].anchor
43        const length = state.doc.length
44        const lines = state.doc.lines
45        // more state info ...
46        // return ...
47      }
48
49      return {
50        code,
51        extensions,
52        handleReady,
53        log: console.log
54      }
55    }
56  })
57</script>

Global component

1import { createApp } from 'vue'
2import { basicSetup } from 'codemirror'
3import VueCodemirror from 'vue-codemirror'
4
5const app = createApp()
6
7app.use(VueCodemirror, {
8  // optional default global options
9  autofocus: true,
10  disabled: false,
11  indentWithTab: true,
12  tabSize: 2,
13  placeholder: 'Code goes here...',
14  extensions: [basicSetup]
15  // ...
16})

Component Props

prop	description	type	default
modelValue	The input values accepted by the component also support two-way binding.	`String`	`''`
autofocus	Focus editor immediately after mounted.	`Boolean`	`false`
disabled	Disable input behavior and disable change state.	`Boolean`	`false`
indentWithTab	Bind keyboard Tab key event.	`Boolean`	`true`
tabSize	Specify the indent when the Tab key is pressed.	`Number`	`2`
placeholder	Display when empty.	`String`	`''`
style	The CSS style object that acts on the CodeMirror itself.	`Object`	`{}`
phrases	Codemirror internationalization phrases.	`Object`	`{}`
autoDestroy	Auto destroy the CodeMirror instance before the component unmount.	`Boolean`	`true`
extensions	Passed to CodeMirror `EditorState.create({ extensions })`	`Extension`	`[]`
selection	Passed to CodeMirror `EditorState.create({ selection })`	`EditorSelection`	-
root	Passed to CodeMirror `new EditorView({ root })`	`ShadowRoot \| Document`	-

Component Events

event	description	params
`update:modelValue`	Only when the CodeMirror content (doc) has changed.	`(value: string, viewUpdate: ViewUpdate)`
change	ditto	ditto
update	When any state of CodeMirror changes.	`(viewUpdate: ViewUpdate)`
focus	When CodeMirror focused.	`(viewUpdate: ViewUpdate)`
blur	When CodeMirror blurred.	`(viewUpdate: ViewUpdate)`
ready	When edirot component mounted.	`(payload: { view: EditorView; state: EditorState; container: HTMLDivElement })`

Basic Setup

The basic-setup extension is integrated by default in the vue-codemirror configuration and is intended as a handy helper to quickly set up CodeMirror without having to install and import a lot of standalone packages. If you want to override the default behavior of the config, just pass the empty array when installing the component globally.

1app.use(VueCodemirror, {
2  // keep the global default extensions empty
3  extensions: []
4})

Changelog

Detailed changes for each release are documented in the release notes.

License

Licensed under the MIT License.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/coverage.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/surmon-china/vue-codemirror/coverage.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/coverage.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/surmon-china/vue-codemirror/coverage.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/coverage.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/surmon-china/vue-codemirror/coverage.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/surmon-china/vue-codemirror/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/surmon-china/vue-codemirror/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/surmon-china/vue-codemirror/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/surmon-china/vue-codemirror/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/surmon-china/vue-codemirror/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/surmon-china/vue-codemirror/test.yml/main?enable=pin
Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue-codemirror

Other packages similar to vue-codemirror

vue-codemirror

Installations

Developer Guide

Yes

CommonJS, ESM

16.16.0

8.11.0

Pull Requests

3

36

10

23

Issues

88

181

93

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

12,375,461

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

vue-codemirror

Legacy version

Documentation

CodeMirror packages

Usage

Install

Depending on your actual needs, you may need to install more CodeMirror packages

If you need import API/interface from codemirror, you need to make codemirror explicitly dependent in your package.json

Local component

Global component

Component Props

Component Events

Basic Setup

Changelog

License

10

10

10

2

0

0

0

0

0

0

0

0

0

2.7

/10

If you need import API/interface from codemirror, you need to make codemirror explicitly dependent in your `package.json`