vue-eslint-editor

1.1.0 verified Fri May 01 auth: no javascript

A Vue.js component providing an embedded code editor for ESLint playgrounds, built on Monaco Editor. Current stable version is 1.1.0, released with Quick Fix support for autofixes and suggestions. The package integrates ESLint linting directly in the editor, supports multiple languages via the `language` prop, and offers preprocessing/postprocessing hooks. It requires Vue 2.x (not Vue 3) and Monaco Editor as peer dependencies. Differentiators include deep ESLint integration and a dedicated component for Vue-based playgrounds.

Common errors

error Unknown custom element: <vue-eslint-editor> - did you register the component correctly? ↓

cause Component not globally registered or not imported correctly.

fix

Import and register the component locally or globally: import VueEslintEditor from 'vue-eslint-editor'; Vue.component('vue-eslint-editor', VueEslintEditor)

error Cannot read property 'defineTheme' of undefined ↓

cause monaco-editor not loaded or improperly initialized.

fix

Ensure monaco-editor is installed and imported before using the component: import * as monaco from 'monaco-editor'

error The "linter" prop expects a valid ESLint Linter instance ↓

cause linter prop not provided or is not a Linter instance.

fix

Pass a new Linter(): :linter="new (require('eslint').Linter)()"

Warnings

gotcha The component only supports Vue 2.x, not Vue 3. Attempting to use in Vue 3 will fail. ↓

fix Use with Vue 2 or find an alternative for Vue 3.

deprecated Monaco Editor version used by the component is fixed; upgrading Monaco independently may break. ↓

fix Ensure monaco-editor peer dependency matches version expected by vue-eslint-editor (currently 0.20.0+).

gotcha The linter prop expects an instance of ESLint's Linter class, not a config object. ↓

fix Create a new Linter instance: this.linter = new (require('eslint').Linter)()

breaking v1.0.0 upgraded monaco-editor to 0.20.0, changing renderValidationDecorations option behavior. ↓

fix If using renderValidationDecorations, ensure it is set to 'on' as the default changed.

Install

npm install vue-eslint-editor

yarn add vue-eslint-editor

pnpm add vue-eslint-editor

Imports

VueEslintEditor
wrong
```
const VueEslintEditor = require('vue-eslint-editor')
```
correct
```
import VueEslintEditor from 'vue-eslint-editor'
```
Default export is the Vue component. CommonJS require works, but ESM is preferred for bundlers.

VueEslintEditor

wrong

import { VueEslintEditor } from 'vue-eslint-editor'

correct

import VueEslintEditor from 'vue-eslint-editor'

Named import is incorrect; the package exports a single default component.

VueEslintEditor (as component)
wrong
```
components: { VueEslintEditor }
```
correct
```
components: { 'vue-eslint-editor': VueEslintEditor }
```
When registering, the key in components should be the tag name used in templates (kebab-case).

Quickstart

Basic usage of vue-eslint-editor with Vue 2, registering the component and passing code, language, and linter props.

<template>
  <div id="app">
    <vue-eslint-editor
      :code="code"
      :language="language"
      :linter="linter"
      @change="onCodeChange"
      style="height: 400px;"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import VueEslintEditor from 'vue-eslint-editor'
import { Linter } from 'eslint'

export default {
  name: 'App',
  components: {
    'vue-eslint-editor': VueEslintEditor
  },
  data() {
    return {
      code: 'const x = 1',
      language: 'javascript',
      linter: new Linter()
    }
  },
  methods: {
    onCodeChange(newCode) {
      console.log(newCode)
    }
  }
}
</script>