Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-codemirror

Package Overview
Dependencies
Maintainers
1
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-codemirror

CodeMirror code editor component for Vue

  • 6.1.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
49K
decreased by-14.86%
Maintainers
1
Weekly downloads
 
Created
Source

vue-codemirror

vue   GitHub stars   npm   Test Codecov   license

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

Documentation
CodeMirror packages

Usage

Install
yarn add codemirror vue-codemirror
npm install codemirror vue-codemirror --save
Depending on your actual needs, you may need to install more CodeMirror packages
# CodeMirror languages...
yarn add @codemirror/lang-html
yarn add @codemirror/lang-json
yarn add @codemirror/lang-javascript

# CodeMirror themes...
yarn add @codemirror/theme-one-dark

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

e.g.

"dependencies": {
  "@codemirror/state": "6.x"
}
import { EditorState } from '@codemirror/state'
Local component
<template>
  <codemirror
    v-model="code"
    placeholder="Code goes here..."
    :style="{ height: '400px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
    @ready="handleReady"
    @change="log('change', $event)"
    @focus="log('focus', $event)"
    @blur="log('blur', $event)"
  />
</template>

<script>
  import { defineComponent } from 'vue'
  import { Codemirror } from 'vue-codemirror'
  import { javascript } from '@codemirror/lang-javascript'
  import { oneDark } from '@codemirror/theme-one-dark'

  export default defineComponent({
    components: {
      Codemirror
    },
    setup() {
      const code = ref(`console.log('Hello, world!')`)
      const extensions = [javascript(), oneDark]

      // Codemirror EditorView instance ref
      const view = shallowRef()
      const handleReady = (payload) => {
        view.value = payload.view
      }

      // Status is available at all times via Codemirror EditorView
      const getCodemirrorStates = () => {
        const state = view.value.state
        const ranges = state.selection.ranges
        const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
        const cursor = ranges[0].anchor
        const length = state.doc.length
        const lines = state.doc.lines
        // more state info ...
        // return ...
      }

      return {
        code,
        extensions,
        handleReady,
        log: console.log
      }
    }
  })
</script>
Global component
import { createApp } from 'vue'
import { basicSetup } from 'codemirror'
import VueCodemirror from 'vue-codemirror'

const app = createApp()

app.use(VueCodemirror, {
  // optional default global options
  autofocus: true,
  disabled: false,
  indentWithTab: true,
  tabSize: 2,
  placeholder: 'Code goes here...',
  extensions: [basicSetup]
  // ...
})

Component Props

propdescriptiontypedefault
modelValueThe input values accepted by the component also support two-way binding.String''
autofocusFocus editor immediately after mounted.Booleanfalse
disabledDisable input behavior and disable change state.Booleanfalse
indentWithTabBind keyboard Tab key event.Booleantrue
tabSizeSpecify the indent when the Tab key is pressed.Number2
placeholderDisplay when empty.String''
styleThe CSS style object that acts on the CodeMirror itself.Object{}
phrasesCodemirror internationalization phrases.Object{}
autoDestroyAuto destroy the CodeMirror instance before the component unmount.Booleantrue
extensionsPassed to CodeMirror EditorState.create({ extensions })Extension[]
selectionPassed to CodeMirror EditorState.create({ selection })EditorSelection-
rootPassed to CodeMirror new EditorView({ root })ShadowRoot | Document-

Component Events

eventdescriptionparams
update:modelValueOnly when the CodeMirror content (doc) has changed.(value: string, viewUpdate: ViewUpdate)
changedittoditto
updateWhen any state of CodeMirror changes.(viewUpdate: ViewUpdate)
focusWhen CodeMirror focused.(viewUpdate: ViewUpdate)
blurWhen CodeMirror blurred.(viewUpdate: ViewUpdate)
readyWhen 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.

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

Changelog

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

License

Licensed under the MIT License.

Keywords

FAQs

Package last updated on 27 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc