@codemirror code editor component for @vuejs
Installations
npm install vue-codemirrorDeveloper Guide
Typescript
Yes
Module System
CommonJS, ESM
Node Version
16.16.0
NPM Version
8.11.0
Releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (65.97%)
Vue (29.46%)
JavaScript (1.98%)
HTML (1.47%)
Shell (1.12%)
Developer
Download Statistics
Total Downloads
10,995,604
Last Day
9,901
Last Week
43,435
Last Month
202,122
Last Year
2,994,840
GitHub Statistics
3,337 Stars
191 Commits
385 Forks
41 Watching
5 Branches
14 Contributors
Bundle Size
234.74 kB
Minified
75.23 kB
Minified + Gzipped
Maintainers
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
10
NPM Version
8.11.0
Node Version
16.16.0
Total Downloads
Cumulative downloads
Total Downloads
10,995,604
Last day
-7.4%
9,901
Compared to previous day
Last week
-18.9%
43,435
Compared to previous week
Last month
-3.4%
202,122
Compared to previous month
Last year
5.2%
2,994,840
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Dev Dependencies
31
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
- CodeMirror6 Guide
- CodeMirror6 APIs
- CodeMirror6 Examples
- CodeMirror6 Example: Writing a Language Package
- CodeMirror6 Example: Styling
- CodeMirror Forum
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.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 5/23 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
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
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/coverage.yml:1
- Warn: no topLevel permission defined: .github/workflows/publish.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 12 are checked with a SAST tool
Reason
20 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.7
/10
Last Scanned on 2025-01-20
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 MoreGathering detailed insights and metrics for vue-codemirror