On Vuejs >= 3.3.0, we're allowed to pass prop types outside from defineProps

[DeveloperMatheus]

Hello guys!

Since Vuejs release a 3.3.2 version of the framework, now it possible to declare props that are not literal: https://blog.vuejs.org/posts/vue-3-3

So, i have been trying to make the CVA library to work with a more suitable approach (like we already do with React) and to help update the CVA docs on Vue section (and learn how to make this work of course). I saw a tutorial of Vuejs using CVA, but was using computed properties, and defining those computed properties using the props declared:

I forked a Stackblitz code from the docs Vue example: https://stackblitz.com/edit/joe-bell-cva-zfcvzo?file=src%2FApp.vue

This actually works! However, i don't know if this is good in terms of performance, because of the computed properties. So, is this acceptable in terms of Vue development (sorry for asking this here)

However, when i try to make the defineProps + VariantProps approach, i get an error from Vue:
https://stackblitz.com/edit/joe-bell-cva-m8wnyh?file=src%2Fcomponents%2FButton.vue -> with error.

I really wanted the second snippet to work, but i don't know if this is possible, any suggestions/feedbacks?

[DeveloperMatheus]

I updated the second snippet (https://stackblitz.com/edit/joe-bell-cva-m8wnyh?file=src%2Fcomponents%2FButton.vue). It works now with the defineProps(), but i could not achieve without VariantProps, i think we're almost there! This will be good for the library when we update the docs hehe

Edit 2: I think the first snippet is just fine, because from the source docs of Vue, the computed properties are cached

[wobsoriano]

Your code will not work as Vue 3.3 still does not support conditional types in the entire props object.

<script lang="ts">
const button = cva('button', {
  variants: {
    intent: {
      primary: 'primary',
      secondary: 'secondary',
    },
    size: {
      small: 'small',
      medium: 'medium',
    },
  },
});

type ButtonProps = VariantProps<typeof button>;

// Does not work
defineProps<ButtonProps>();

// Works
defineProps<{ intent: ButtonProps['intent']; size: ButtonProps['size'] }>();
</script>

[joe-bell]

I believe @wobsoriano just resolved this

#167