Nuxt Monaco Editor

將 monaco-editor 與 Nuxt 整合

安裝

npx nuxi@latest module add nuxt-monaco-editor

別忘了安裝 monaco-editor。

設定

將此模組添加到 Nuxt 設定檔

export default defineNuxtConfig({
  modules: [
    'nuxt-monaco-editor'
  ]
})

（選用）設定模組

export default defineNuxtConfig({
  monacoEditor: {
    // These are default values:
    locale: 'en',
    componentName: {
      codeEditor: 'MonacoEditor',
      diffEditor: 'MonacoDiffEditor'
    }
  }
})

在您的頁面或組件中使用此組件

<template>
  <MonacoEditor v-model="value" lang="typescript" />
</template>

<script lang="ts" setup>
const value = ref('')
</script>

開發

執行 npm run dev:prepare 以產生類型存根。
使用 npm run dev 以在開發模式下啟動 playground。