useMonaco

Get monaco namespace asynchronously, the same as to do import * as monaco from 'monaco-editor'.

This composable can run everywhere you want, but if called on:

  • Client-side: Returns monaco namespace after loaded.
  • Server-side: Returns null

If you want to import types or interfaces from monaco-editor, you should do type-only import. For example:

import type { 
ISelection
 } from 'monaco-editor'

Could not find a declaration file for module 'monaco-editor'. '/home/runner/work/nuxt-monaco-editor/nuxt-monaco-editor/node_modules/.pnpm/monaco-editor@0.56.0/node_modules/monaco-editor/min/vs/editor/editor.main.js' implicitly has an 'any' type.
  There are types at '/home/runner/work/nuxt-monaco-editor/nuxt-monaco-editor/node_modules/monaco-editor/esm/vs/index.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

Example

const 
monaco
 = await 
useMonaco
()
const 
editorEl
 = 
useTemplateRef
<
HTMLDivElement
>('editor')

watchEffect
(() => {
  if(
monaco
 && 
editorEl
.
value
) {
    
monaco
.editor.create(
editorEl
.
value
, { 
language
: 'typescript' })
  }
})
<MonacoDiffEditor>
To show differences between two files, you can use <MonacoDiffEditor> component.