# 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`.

## Version requirements

- `nuxt-monaco-editor` v1.5.0 or later requires `monaco-editor` v0.56.0 or later.
- If you use `monaco-editor` v0.55.x or earlier, use `nuxt-monaco-editor` v1.4.2.

## 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
<template>
  <MonacoEditor v-model="value" lang="typescript" />
</template>

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

## Development

- Run `pnpm dev:prepare` to generate type stubs.
- Use `pnpm dev` to start [playground](./playground) in development mode.
- Run `pnpm exec playwright-core install --with-deps` to install dependencies for testing.
- Run `pnpm test` to run tests.
- Run `pnpm lint` to run linting.