{"id":26612,"library":"vue-eslint-editor","title":"vue-eslint-editor","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/mysticatea/vue-eslint-editor","tags":["javascript","eslint","vue","monaco-editor","editor"],"install":[{"cmd":"npm install vue-eslint-editor","lang":"bash","label":"npm"},{"cmd":"yarn add vue-eslint-editor","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-eslint-editor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The editor widget is based on Monaco Editor; must be installed and comes with its own CSS.","package":"monaco-editor","optional":false},{"reason":"ESLint is used for linting the code; bundled via eslint4b or similar, but the component expects an ESLint Linter instance.","package":"eslint","optional":true}],"imports":[{"note":"Default export is the Vue component. CommonJS require works, but ESM is preferred for bundlers.","wrong":"const VueEslintEditor = require('vue-eslint-editor')","symbol":"VueEslintEditor","correct":"import VueEslintEditor from 'vue-eslint-editor'"},{"note":"Named import is incorrect; the package exports a single default component.","wrong":"import { VueEslintEditor } from 'vue-eslint-editor'","symbol":"VueEslintEditor","correct":"import VueEslintEditor from 'vue-eslint-editor'"},{"note":"When registering, the key in components should be the tag name used in templates (kebab-case).","wrong":"components: { VueEslintEditor }","symbol":"VueEslintEditor (as component)","correct":"components: { 'vue-eslint-editor': VueEslintEditor }"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <vue-eslint-editor\n      :code=\"code\"\n      :language=\"language\"\n      :linter=\"linter\"\n      @change=\"onCodeChange\"\n      style=\"height: 400px;\"\n    />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport VueEslintEditor from 'vue-eslint-editor'\nimport { Linter } from 'eslint'\n\nexport default {\n  name: 'App',\n  components: {\n    'vue-eslint-editor': VueEslintEditor\n  },\n  data() {\n    return {\n      code: 'const x = 1',\n      language: 'javascript',\n      linter: new Linter()\n    }\n  },\n  methods: {\n    onCodeChange(newCode) {\n      console.log(newCode)\n    }\n  }\n}\n</script>","lang":"typescript","description":"Basic usage of vue-eslint-editor with Vue 2, registering the component and passing code, language, and linter props."},"warnings":[{"fix":"Use with Vue 2 or find an alternative for Vue 3.","message":"The component only supports Vue 2.x, not Vue 3. Attempting to use in Vue 3 will fail.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure monaco-editor peer dependency matches version expected by vue-eslint-editor (currently 0.20.0+).","message":"Monaco Editor version used by the component is fixed; upgrading Monaco independently may break.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Create a new Linter instance: this.linter = new (require('eslint').Linter)()","message":"The linter prop expects an instance of ESLint's Linter class, not a config object.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If using renderValidationDecorations, ensure it is set to 'on' as the default changed.","message":"v1.0.0 upgraded monaco-editor to 0.20.0, changing renderValidationDecorations option behavior.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Import and register the component locally or globally: import VueEslintEditor from 'vue-eslint-editor'; Vue.component('vue-eslint-editor', VueEslintEditor)","cause":"Component not globally registered or not imported correctly.","error":"Unknown custom element: <vue-eslint-editor> - did you register the component correctly?"},{"fix":"Ensure monaco-editor is installed and imported before using the component: import * as monaco from 'monaco-editor'","cause":"monaco-editor not loaded or improperly initialized.","error":"Cannot read property 'defineTheme' of undefined"},{"fix":"Pass a new Linter(): :linter=\"new (require('eslint').Linter)()\"","cause":"linter prop not provided or is not a Linter instance.","error":"The \"linter\" prop expects a valid ESLint Linter instance"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}