Integrate monaco-editor with Nuxt
# 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-editorDon't forget to install monaco-editor.
- Add this module to the Nuxt config
export default defineNuxtConfig({
modules: [
'nuxt-monaco-editor'
]
})- (Optional) Configure the module
export default defineNuxtConfig({
monacoEditor: {
// These are default values:
dest: '_monaco',
locale: 'en',
componentName: {
codeEditor: 'MonacoEditor',
diffEditor: 'MonacoDiffEditor'
}
}
})- 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:prepareto generate type stubs. - Use
npm run devto start playground in development mode.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent