ERROR This module cannot be imported in the Vue part of your app. (@nuxt/kit)

[JuroOravec]

Hi, I'm getting following error when trying to run Nuxt with the plugin with nuxt dev.

[8:51:50 AM]  ERROR  This module cannot be imported in the Vue part of your app. [importing @nuxt/kit from node_modules/nuxt-monaco-editor/dist/module.mjs?v=fb4b5961]

Additional stacktrace:

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'options')                         8:53:39 AM
  at Object.normalizedModule (./node_modules/@nuxt/kit/dist/index.mjs:149:12)  
  at ./virtual:nuxt:/Users/juro/path/to/project/client/.nuxt/plugins/server.mjs:27:87  
  at Module.executeAsync (./node_modules/unctx/dist/index.mjs:111:19)  
  at Object.setup (./virtual:nuxt:/Users/juro/path/to/project/client/.nuxt/plugins/server.mjs:27:63)  
  at wrapper (./node_modules/nuxt/dist/app/nuxt.js:191:21)  
  at ./node_modules/nuxt/dist/app/nuxt.js:111:58  
  at fn (./node_modules/nuxt/dist/app/nuxt.js:208:44)  
  at Object.callAsync (./node_modules/unctx/dist/index.mjs:68:55)  
  at ./node_modules/nuxt/dist/app/nuxt.js:210:56  
  at Object.runWithContext (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3855:18)

Usage:

<template>
  <div>
    <MonacoEditor ref="editorRef" v-model="editorContent" lang="typescript" :options="editorOptions">
      Loading...
    </MonacoEditor>
  </div>
</template>

<script setup lang="ts">
import type { editor } from 'monaco-editor';
import type { ComponentPublicInstance } from 'vue';

const editorRef = ref<(ComponentPublicInstance & { $editor: editor.IStandaloneCodeEditor }) | null>(
  null
);
const editorOptions = {
  readOnly: true,
  cursorBlinking: 'smooth',
  scrollBeyondLastLine: false,
  // automaticLayout
} satisfies editor.IStandaloneEditorConstructionOptions;

const editorContent = ref('');
</script>

nuxt.config.js

export default defineNuxtConfig({
  plugins: ['nuxt-monaco-editor'],
});

Dependencies:

• nuxt v3.5.2
• nuxt-monaco-editor v1.2.2