fix: on unmounted is placed inside onmounted warning

Author: ThimoDEV

src/runtime/components/NuxtCodeMirror.vue

@@ -3,7 +3,7 @@ import type { ViewUpdate, EditorView } from '@codemirror/view'
 import type { EditorState } from '@codemirror/state'
 import { useNuxtCodeMirror } from '../composables/useNuxtCodeMirror'
 import type { NuxtCodeMirrorProps, Statistics } from '../types/nuxt-codemirror'
-import { onMounted, ref, watch, nextTick, computed } from '#imports'
+import { onMounted, ref, watch, nextTick, computed, onBeforeUnmount } from '#imports'
 
 const editor = ref<HTMLDivElement | null>(null)
 const container = ref<HTMLDivElement | null>(null)
@@ -57,6 +57,13 @@ onMounted(async () => {
   // console.log('test: ', view.value)
 })
 
+onBeforeUnmount(() => {
+  if (view.value) {
+    view.value?.destroy()
+    view.value = undefined
+  }
+})
+
 watch(() => modelValue, (newValue) => {
   if (typeof newValue !== 'string') {
     console.error(`value must be typeof string but got ${typeof newValue}`)

src/runtime/composables/useNuxtCodeMirror.ts

@@ -3,7 +3,7 @@ import { EditorView, type ViewUpdate } from '@codemirror/view'
 import { getDefaultExtensions } from '../getDefaultExtensions'
 import { type UseCodeMirrorProps } from '../types/nuxt-codemirror'
 import { getStatistics } from '../utils/utils'
-import { onUnmounted, watch, watchEffect } from '#imports'
+import { onBeforeUnmount, watch, watchEffect } from '#imports'
 
 const External = Annotation.define<boolean>()
 
@@ -167,11 +167,4 @@ export function useNuxtCodeMirror(props: UseCodeMirrorProps) {
   },
   { immediate: true },
   )
-
-  onUnmounted(() => {
-    if (viewRef) {
-      viewRef.value?.destroy()
-      viewRef.value = undefined
-    }
-  })
 }