Nuxt Monaco Editor

The easist way to get along with Monaco Editor.

設定不要

Nuxtの設定でモジュールを読み込むだけで利用できます。

翻訳

設定を1か所変更するだけで言語を変更できます。

Nuxt3対応

自動インポートとコンポーサブルによってより簡単に利用できます。

セットアップ

依存関係のインストール

# 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

モジュールをNuxtの設定に追加

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

コンポーネントを読み込む

<template>
  <MonacoEditor lang="typescript" />
</template>