Basic example not working

[sQuarecoW]

Vue crashes: Module not found: Error: Can't resolve '@/components/CodeMirror.vue'

[sQuarecoW]

Edit: using the first example, simply nothing renders. Using the second example, the JSON renders as simple text.

In the console I see this error:

[Vue warn]: Failed to resolve component: code-mirror
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

[sQuarecoW]

Edit again 😄

I see the git-repo is updated, npm is still the old version?

[logue]

Yes. It will take some time to release. I'm trying to support both Vue2 and Vue3, but I'm having trouble, so I'm planning to release 0.1.2 for Vue2 and 0.3.2 for Vue3 tentatively.

[logue]

Now released.

If you use Vue3,

yarn add vue-codemirror@0.3.2

otherwise,

yarn add vue-codemirror@0.1.3

I really want to include both binaries, but it doesn't work.

[sQuarecoW]

It works!

Tnx 👍🏻

[sQuarecoW]

I'm sorry, spoke too soon I think.

There is still no highlighting :(

[logue]

In the configuration of Vue3 + Vite, I have confirmed that the phenomenon that it does not work when the dev server is running for the first time and it works when it is started again occurs.

[MrSunshyne]

I have a vue3 + vite setup

using npm i vue-codemirror6@0.3.2

Component:

<template>
  <div>
    <code-mirror v-model="data" :lang="lang" :extensions="extensions" />
  </div>
</template>

<script lang="ts" setup>
import CodeMirror from "vue-codemirror6";

// CodeMirror extensions
import { javascript } from "@codemirror/lang-javascript";
import { basicSetup } from "@codemirror/basic-setup";

const data = ref("");
const lang = ref(javascript());
const extensions = ref([basicSetup]);

</script>

But I'm getting the following error in the browser and not sure how to proceed, as my boilerplate looks just like the basic example.

[logue]

Sorry, there is a bug in 0.3.2. Please use 0.3.3.

[logue]

Since the display was unstable, I released vue-codemirror 6 for a new version of Vue3. The tag is vue3. https://www.npmjs.com/package/vue-codemirror6/v/0.3.5