https://github.com/e-chan1007/nuxt-monaco-editor

Integrate monaco-editor with Nuxt
https://github.com/e-chan1007/nuxt-monaco-editor

monaco-editor nuxt nuxt-module nuxt3

Last synced: about 1 month ago
JSON representation

Integrate monaco-editor with Nuxt

• Host: GitHub
• URL: https://github.com/e-chan1007/nuxt-monaco-editor
• Owner: e-chan1007
• License: mit
• Created: 2022-08-23T06:29:49.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-19T15:34:16.000Z (8 months ago)
• Last Synced: 2025-04-08T17:17:45.748Z (3 months ago)
• Topics: monaco-editor, nuxt, nuxt-module, nuxt3
• Language: TypeScript
• Homepage: https://e-chan1007.github.io/nuxt-monaco-editor
• Size: 5.94 MB
• Stars: 127
• Watchers: 1
• Forks: 15
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Nuxt Monaco Editor

[![npm version](https://badge.fury.io/js/nuxt-monaco-editor.svg)](https://badge.fury.io/js/nuxt-monaco-editor)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/8b4585be9901491795f8b3c2f5dbb680)](https://www.codacy.com/gh/e-chan1007/nuxt-monaco-editor/dashboard?utm_source=github.com&utm_medium=referral&utm_content=e-chan1007/nuxt-monaco-editor&utm_campaign=Badge_Grade)

[![Test result](https://github.com/e-chan1007/nuxt-monaco-editor/actions/workflows/test.yml/badge.svg)](https://github.com/e-chan1007/nuxt-monaco-editor/actions/workflows/test.yml)

Integrate [monaco-editor](https://microsoft.github.io/monaco-editor/) with Nuxt

## Install

```sh

npx nuxi@latest module add nuxt-monaco-editor

```

Don't forget to install `monaco-editor`.

## Setup

1. Add this module to the Nuxt config 

```ts

export default defineNuxtConfig({

  modules: [

    'nuxt-monaco-editor'

  ]

})

```

2. (Optional) Configure the module 

```ts

export default defineNuxtConfig({

  monacoEditor: {

    // These are default values:

    locale: 'en',

    componentName: {

      codeEditor: 'MonacoEditor',

      diffEditor: 'MonacoDiffEditor'

    }

  }

})

```

3. Use the component in your pages or components 

```vue

  

const value = ref('')

```

## Development

- Run `npm run dev:prepare` to generate type stubs.  

- Use `npm run dev` to start [playground](./playground) in development mode.