Nuxt Monacoエディタ
Nuxtへのmonaco-editor統合
インストール
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を実行して型定義を生成します。- 開発モードでplaygroundを起動するには
npm run devを使用します。