# Guide

# 💿 Installation

Use npm or a compatible tool to install.

npm install vue-eslint-editor

# 📖 Usage

Basically, the vue-eslint-parser component requires three attributes; linter, config, and code.

  • linter is the Linter object to does linting and fixing.
  • config is the configuration object for the Linter object.
  • code is the source code that the editor shows initially.


The eslint4b package is useful as the Linter class which works in browsers.

For example:


import EslintEditor from "vue-eslint-editor"

export default {
    components: { EslintEditor },

    /* omitting */

    async mounted() {
        // Load linter asynchronously.
        const { default: Linter } = await import("eslint4b")
        this.linter = new Linter()

/* omitting */


See playground.vue for a complete example. That is the editor which is in Home.

Then use a bundler which has the code splitting feature, such as Webpack. The vue-eslint-editor will load the editor implementation with the dynamic import syntax since it's very large.

For example, a webpack config:

const path = require("path")
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
    entry: {
        index: "src/index.js",
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "dist"),
    module: {
        rules: [
            // For `vue-eslint-editor/dist/monaco.css`
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            // For `vue-eslint-editor/dist/codicon.ttf`
                test: /\.ttf$/,
                loader: "file-loader",
            // For `vue-eslint-editor/dist/index.vue`
                test: /\.vue$/,
                loader: "vue-loader",
    plugins: [
        new VueLoaderPlugin(),