Socket
Socket
Sign inDemoInstall

monaco-editor-vue3

Package Overview
Dependencies
23
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    monaco-editor-vue3

![npm](https://img.shields.io/npm/v/monaco-editor-vue3) ![npm](https://img.shields.io/npm/dt/monaco-editor-vue3) ![NPM](https://img.shields.io/npm/l/monaco-editor-vue3) ![npm bundle size](https://img.shields.io/bundlephobia/min/format-rmb)


Version published
Maintainers
1
Install size
98.1 MB
Created

Readme

Source

Monaco Editor Vue3

npm npm NPM npm bundle size

Monaco Editor is the code editor that powers VS Code, now it's available as a Vue3 component <MonacoEditor> thanks to this project.

Install

pnpm install monaco-editor-vue3

Or

yarn add monaco-editor-vue3

Or

npm i monaco-editor-vue3

Usage

Use ESM version with webpack

Use monaco-editor-webpack-plugin:

// webpack.config.js
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  plugins: [
    new MonacoEditorPlugin({
      // https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      // Include a subset of languages support
      // Some language extensions like typescript are so huge that may impact build performance
      // e.g. Build full languages support with webpack 4.0 takes over 80 seconds
      // Languages are loaded on demand at runtime
      languages: ['javascript', 'css', 'html', 'typescript']
    })
  ]
}

Then use the component:

<template>
  <MonacoEditor
    theme="vs"
    :options="options"
    language="javascript"
    :width="800"
    :height="800"
    :diffEditor="true"
    :original="original"
    v-model:value="value"
  ></MonacoEditor>
</template>

<script>
import MonacoEditor from 'monaco-editor-vue3'

export default {
  components: {
    MonacoEditor
  },

  data() {
    return {
      code: 'const noop = () => {}'
    }
  }
}
</script>

<style>
.editor {
  width: 600px;
  height: 800px;
}
</style>

Use ESM version with Vite

See Stackblitz Demo

Use ESM version with rollup

Use rollup-plugin-monaco-editor:

// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import commonjs from '@rollup/plugin-commonjs';
import monaco from 'rollup-plugin-monaco-editor';

export default {
  output: {
    format: 'es',
    dir: 'dist',
  },
  // ...other config
  plugins: [
    // ...other plugins
    // handle .css files
    postcss(),
    monaco({
      languages: ['json'],
    }),
    nodeResolve(),
    commonjs(),
  ],
};

Props

  • width: Editor width, eg: 800px or 800.
  • height: Editor height, eg: 800px or 800.
  • options: The second argument of monaco.editor.create.
  • value: A shortcut to set options.value.
  • theme: A shortcut to set options.theme.
  • language: A shortcut to set options.language.
  • diffEditor: boolean Indicate that this is a DiffEditor, false by default.
  • original: if diffEditor set true, this will be used .

Component Events

editorWillMount

Called before mounting the editor.

editorDidMount

Called when the editor is mounted.

change

Editor value is updated.

Editor Events

You can listen to the editor events directly like this:

<template>
  <MonacoEditor v-model="code" @editorDidMount="editorDidMount" />
</template>

<script>
export default {
  methods: {
    editorDidMount(editor) {
      // Listen to `scroll` event
      editor.onDidScrollChange(e => {
        console.log(e)
      })
    }
  },

  data() {
    return {
      code: '...'
    }
  }
}
</script>

Refer to this page for all editor events.

Typescript

create monaco-editor-vue3.d.ts in your root.

declare module "monaco-editor-vue3";

This will allow ts compilation without errors, but may not include all the types.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

Monaco Editor Vue3 © bazingaedward, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

Keywords

FAQs

Last updated on 27 Nov 2023

Did you know?

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc