Go to documentation

Integrate monaco-editor with Nuxt

Nuxt Monaco Editor

npm versionLicense: MITCodacy BadgeTest result

Integrate monaco-editor with Nuxt


# npmnpm install -D monaco-editor nuxt-monaco-editor# yarnyarn add -D monaco-editor nuxt-monaco-editor# pnpmpnpm add -D monaco-editor nuxt-monaco-editor

Don't forget to install monaco-editor.


  1. Add this module to the Nuxt config
export default defineNuxtConfig({  modules: [    'nuxt-monaco-editor'  ]})
  1. (Optional) Configure the module
export default defineNuxtConfig({  monacoEditor: {    // These are default values:    dest: '_monaco',    locale: 'en',    componentName: {      codeEditor: 'MonacoEditor',      diffEditor: 'MonacoDiffEditor'    }  }})
  1. Use the component in your pages or components
<template>  <MonacoEditor v-model="value" lang="typescript" /></template><script lang="ts" setup>const value = ref('')</script>


  • Run npm run dev:prepare to generate type stubs.
  • Use npm run dev to start playground in development mode.