👨‍🏫 The Mastering Nuxt 3 course is now completed!

Discover the course
nuxt-monaco-editor

nuxt-monaco-editor

Go to documentation

Integrate monaco-editor with Nuxt

Nuxt Monaco Editor

npm versionLicense: MITCodacy BadgeTest result

Integrate monaco-editor with Nuxt

Install

# npm
npm install -D monaco-editor nuxt-monaco-editor
# yarn
yarn add -D monaco-editor nuxt-monaco-editor
# pnpm
pnpm add -D monaco-editor nuxt-monaco-editor

Don't forget to install monaco-editor.

Setup

  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>

Development

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