Issue with Vue3 upgrade and @vue-compat (mixing Composition and Option API)

88 Views Asked by At

I'm currently updating a legacy Vue 2.6 app to Vue 3.4, I followed the migration build and its instructions but I'm currently stuck with one component . Indeed I decided to refactor My UiMediaUploader using the new composition API as follow:

<script setup>
import { useDropzone } from "vue3-dropzone";
import axios from "axios";
import { $post, $get, $delegatedUpload } from '@/plugins/Misc';
import { VideoUploader } from '@api.video/video-uploader';
import Media from '@/components/models/Media';

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  explicit: {
    type: Boolean,
    default: () => false
  },
})

const emit = defineEmits(['update:modelValue'])

....
</script>

But I keep getting this warning :

main.js:102 [Vue warn]: (deprecation COMPONENT_V_MODEL) Component declares "modelValue" prop, which is Vue 3 usage, but is running under Vue 2 compat v-model behavior. You can opt-in to Vue 3 behavior on a per-component basis with `compatConfig: { COMPONENT_V_MODEL: false }`.
  Details: https://v3-migration.vuejs.org/breaking-changes/v-model.html 
  at <UiMediaUploader ref="uploader" modelValue= [] onUpdate:modelValue=fn  .

Note: this isn't happening with other components that use the option api which I have successfully updated.

I updated its parent component (UiPost.vue) with the following compatConfig:

  compatConfig: {
    MODE: 2,
    COMPONENT_V_MODEL: false
  },

I also tried with MODE 3 but it didn't change anything.

0

There are 0 best solutions below