Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

monaco-editor-vue3

Package Overview
Dependencies
3
Maintainers
1
Versions
5
Issues
File Explorer

Advanced tools

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)

    0.1.6latest
    GitHub

Version published
Maintainers
1
Weekly downloads
471
increased by15.16%

Weekly downloads

Changelog

Source

0.1.6 (2022-08-08)

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 08 Aug 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • 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