height of the monaco editor.

[h-miyahira]

When I use nuxt-monaco-editor in my Nuxt 3 environment, the height of the editor is broken, as shown in the image. Can you please tell me how to fix it?

my code

<template>
  <MonacoEditor />
</template>

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

[Shayshu-NR]

I have the same issue, code below:

<template>
    <div class="w-100 h-100">
        <MonacoEditor v-model="value" class="h-100 w-100" ref="editor">
            Loading...
        </MonacoEditor>
    </div>
</template>

<script lang="ts">

export default defineComponent({
    data() {
        return {
            value: ''
        }
    }
});
</script>

nuxt.config:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@pinia/nuxt", "nuxt-monaco-editor"],
  css: ["~/assets/main.css"],
});

[Shayshu-NR]

Never mind fixed with the following code:

Added CSS as per the example:

.editor {
  width: 100%;
  height: 50vh;
}

Updated component as per below:

<template>
    <ClientOnly>
        <MonacoEditor v-model="value" :lang="lang" :options="options" class="editor">
            Loading...
        </MonacoEditor>
    </ClientOnly>
</template>

<script lang="ts">

export default defineComponent({
    data() {
        return {
            value: '',
            lang: 'python',
            options: {
                automaticLayout: true
            }
        }
    }
});
</script>

Result:

[h-miyahira]

thanks!!!

I have solved the problem