npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@guolao/vue-monaco-editor

v1.5.4

Published

Monaco Editor for Vue 2&3 - use the monaco-editor in any Vue application without needing to use webpack (or rollup/vite) configuration files / plugins

Downloads

89,503

Readme

monaco-vue

🎉 version v1 support vue 2&3 now ✌

Use monaco-editor loaded from CDN in Vue 2&3, no need to configure plugins in webpack (or rollup, vite) and other packaging tools.

gitHub license npm version

English | 简体中文

View Demo.

If you wanna use monaco-editor as an NPM Package, loading monaco-editor files from node_modules and bundling them into your code, you still need to use the plugin for the packaging tool.

Installation

npm i @guolao/vue-monaco-editor

Vue <= 2.6.14 requires @vue/composition-api to be installed.

npm i @guolao/vue-monaco-editor @vue/composition-api

Of course, you can also use unpkg.

Usage

Register the component.

import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp(App)
app.use(VueMonacoEditorPlugin, {
  paths: {
    // The recommended CDN config
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  },
})

// You can also:
// main.ts
import { loader } from '@guolao/vue-monaco-editor'
loader.config({
  paths: {
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs',
  },
})

// editor.vue
import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
export default {
  components: { VueMonacoEditor },
}

And then, use it.

Editor

<template>
  <vue-monaco-editor
    v-model:value="code"
    theme="vs-dark"
    :options="MONACO_EDITOR_OPTIONS"
    @mount="handleMount"
  />
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'

const MONACO_EDITOR_OPTIONS = {
  automaticLayout: true,
  formatOnType: true,
  formatOnPaste: true,
}

const code = ref('// some code...')
const editorRef = shallowRef()
const handleMount = editor => (editorRef.value = editor)

// your action
function formatCode() {
  editorRef.value?.getAction('editor.action.formatDocument').run()
}
</script>

Diff Editor

<template>
  <vue-monaco-diff-editor
    theme="vs-dark"
    original="// the original code"
    modified="// the modified code"
    language="javascript"
    :options="OPTIONS"
    @mount="handleMount"
  />
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'

const OPTIONS = {
  automaticLayout: true,
  formatOnType: true,
  formatOnPaste: true,
  readOnly: true,
}

const diffEditorRef = shallowRef()
const handleMount = diffEditor => (diffEditorRef.value = diffEditor)

// get the original value
function getOriginalValue() {
  return diffEditorRef.value.getOriginalEditor().getValue()
}

// get the modified value
function getOriginalValue() {
  return diffEditorRef.value.getModifiedEditor().getValue()
}
</script>

Props & Events & slots

Editor

| Name | Type | Default | Description | remark | | --- | --- | --- | --- | --- | | value | string | | value of the current model, can use v-model:value | v-model:value | | language | string | | all language of the current model | languages supported by monaco-editor, view here | | path | string | | path to the current model | | | defaultValue | string | | default value of the current model | | | defaultLanguage | string | | default language of the current model | languages supported by monaco-editor view here | | defaultPath | string | | default path of the current model | monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath)) | | theme | vs | vs-dark | vs | the theme for the monaco editor. | | | line | number | | number of lines to jump to | | | options | object | {} | IStandaloneEditorConstructionOptions | | | overrideServices | object | {} | IEditorOverrideServices | | | saveViewState | boolean | true | save the view state of the model (scroll position, etc.) after model changes | a unique path needs to be configured for each model | | width | number | string | 100% | container width | | | height | number | string | 100% | container height | | | className | string | | inner container class name | | | @beforeMount | (monaco: Monaco) => void | | execute before the editor instance is created (don't use @before-mount in vue2, detail) | | | @mount | (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void | | execute after the editor instance has been created | | | @change | (value: string \| undefined, event: monaco.editor.IModelContentChangedEvent) => void | | execute when the changed value change | | | @validate | (markers: monaco.editor.IMarker[]) => void | | execute when a syntax error occurs | monaco-editor supports syntax-checked languages view here | | #default | slot | 'loading...' | loading status | when loading files from CDN, displaying the loading status will be more friendly | | #failure | slot | 'load failed' | failure status | example: CDN network error |

Diff Editor

| Name | Type | Default | Description | | --- | --- | --- | --- | | original | string | | The original source value (left editor) | | modified | string | | The modified source value (right editor) | | language | string | | Language for the both models - original and modified (all languages that are supported by monaco-editor) | | originalLanguage | string | | This prop gives you the opportunity to specify the language of the original source separately, otherwise, it will get the value of the language property. | | modifiedLanguage | string | | This prop gives you the opportunity to specify the language of the modified source separately, otherwise, it will get the value of language property. | | originalModelPath | string | | Path for the "original" model. Will be passed as a third argument to .createModel method - monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath)) | | modifiedModelPath | string | | Path for the "modified" model. Will be passed as a third argument to .createModel method - monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath)) | | theme | vs | vs-dark | string | vs (vs theme equals light theme) | The theme for the monaco editor. Define new themes by monaco.editor.defineTheme. | | options | object | {} | IStandaloneDiffEditorConstructionOptions | | width | number | string | 100% | Container width | | height | number | string | 100% | Container height | | className | string | | Inner container class name | | @beforeMount | (monaco: Monaco) => void | | Execute before the editor instance is created (don't use @before-mount in vue2, detail) | | @mount | (editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void | | Execute after the editor instance has been created | | #default | slot | 'loading...' | Loading status | | #failure | slot | 'load failed' | Failure status | |

Hooks

useMonaco use @monaco-editor/loader to load monaco-editor from the CDN.

<template>
  <div ref="containerRef"></div>
</template>

<script lang="ts" setup>
import { ref, onUnmounted, watchEffect, nextTick } from 'vue'
import { useMonaco } from '@guolao/vue-monaco-editor'

const containerRef = ref()
const { monacoRef, unload } = useMonaco()

// watch once
const stop = watchEffect(() => {
  if (monacoRef.value && containerRef.value) {
    nextTick(() => stop())
    monacoRef.value.editor.create(containerRef.value, { ... })
  }
})

/*
  When the component will be unmount,
  If the monaco instance is not successfully loaded,
  You need to manually unload.
*/
onUnmounted(() => !monacoRef.value && unload())
</script>

CDN

vue-monaco-editor use @monaco-editor/loader to load the monaco-editor from the CDN(the loading process of loader is asynchronous).

The configuration of loader is global, only to be configured once.

import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp(App)
app.use(VueMonacoEditorPlugin, {
  paths: {
    // The recommended CDN config
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  },
})
import { loader } from "@guolao/vue-monaco-editor"

// loaded from CDN
loader.config({
  paths: {
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  },
})

// configurable for different languages
loader.config({ "vs/nls": { availableLanguages: { "*": "de" } } })

// or
loader.config({
  paths: {
    vs: "...",
  },
  "vs/nls" : {
    availableLanguages: {
      "*": "de",
    },
  },
})

NPM Package

If you wanna use monaco-editor as an NPM Package, loading monaco-editor files from node_modules and bundling them into your code, you still need to use the plugin for the packaging tool.

import * as monaco from "monaco-editor"
import { loader } from "@guolao/vue-monaco-editor"

// loaded monaco-editor from `node_modules`
loader.config({ monaco })

Vite

If you are using vite, you need to do this (see #1791 (comment) for details).

import { loader } from "@guolao/vue-monaco-editor"

import * as monaco from "monaco-editor"
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === "json") {
      return new jsonWorker()
    }
    if (label === "css" || label === "scss" || label === "less") {
      return new cssWorker()
    }
    if (label === "html" || label === "handlebars" || label === "razor") {
      return new htmlWorker()
    }
    if (label === "typescript" || label === "javascript") {
      return new tsWorker()
    }
    return new editorWorker()
  }
}

loader.config({ monaco })

Rollup

If you are using Rollup, you can use the community provided plugin rollup-plugin-monaco-editor.

Webpack

If you are using webpack, the official monaco-editor provides a webpack plugin called monaco-editor-webpack-plugin, which you can install and use.

Inspiration

MonacoVue is made possible thanks to the inspirations from the following projects:

License

MIT