Vue 3 - What a mess...

I have been a huge VueJS fan for the past several years. Vue has allowed me to create web applications with an extremely high degree of efficiency.

Today in my first attempt to use Vue 3 I fought with it for about 5 hours to create a single simple checkbox.

The idea was simple:
Take a FAST component like checkbox and wrap it up for easy use in a new Vue3 app.

Why Microsoft created these neat components and then proceeded to not provide any way to actually use them in Vue is a bit mind boggling, but, hey I've created thousands of Vue (2) components. Should be a piece of cake right?

Ok... Let's fire up a new Vue3 project following the quickstart quide. Then, crack it open and take a look around:

What the hell is this?

All the code on Vue's Guide looks like this:

The component's code is 100% nothing like what I got in my new project that I just created with the Vue recommended method. (It gets even worse if you choose Typescript, with red squiqqly lines everywhere in your new project!)

By forcing users to start with the new Composition API in starter projects, but maintaining a focus on the Options API in the documentation, Vue is creating a giant mess for developers who are new to the framework.
This single inconsistency is going to result in thousands of developers getting frustrated and trying some other framework instead.

The default starter project must look like the documentation!

I've soldiered on trying to use the Composition API for few hours to make my humble checkbox. However, even simple things like watching a prop have turned out to be extraordinarily difficult.

I did eventually find this page : https://vuejs.org/api/

Unfortunately, my confidence in Vue is horribly shaken at this point.

P.S. I did get the checkbox working (and yes it did take over 5 hours!)

<script setup lang="ts">
import type { Checkbox } from "@microsoft/fast-foundation";
import { watch, ref, onMounted } from "vue";

// Why can't I just do this?
// let checked = false;

// This looks pretty ugly, but it defines our emit for v-model (passes internal changes up to the v-model)
const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

// This is ugly too, but it defines the prop for v-model (brings external changes in from v-model)
const props = defineProps<{
  modelValue: boolean;
}>();

// Maintain internal state with a ref
const checked = ref<boolean>(props.modelValue);

// Ok, if you thought the stuff above was ugly, take a look at this.
// Who in their right mind can read this and figure out what is
// going on here.
watch(
  () => props.modelValue,
  (newValue) => {
    if (checked.value != newValue) {
      checked.value = newValue;
    }
  }
);

// When the native fluent-checkbox changes it's value, sync to internal state and v-model
const onChange = (change: CustomEvent) => {
  if (change?.target) {
    // Gotta love having to do this funky cast...
    checked.value = (change.target as Checkbox).checked;
    emit("update:modelValue", checked.value);
  }
};
</script>

<template>
  <fluent-checkbox @change="onChange" :checked="checked">
    <slot></slot>
  </fluent-checkbox>
</template>

Comments

[Roland Doda]

Hi, thanks for sharing your thoughts. Everyone should share their thoughts and should not be criticized.

In my opinion, it's not that you don't like Vue 3, but you don't like Composition API. I've heard a lot of people thinking that Vue 3 should be used with Composition API but that's not true. You are free to use Options API with Vue 3.

Vue 3 has a lot of features and improvements compared to Vue 2 but Options API is not legacy as other say. Try to use it and you will see how awesome it is. In fact, the code that you posted can be written entirely in Options API.

On the other hand, Composition API is necessary. You can think of it as "low-code" where you manually define reactivity and have better control. In fact, lots of library authors say that Composition API unlocked some huge potentials when it comes to building libraries.

To summarize, is totally fine to use Options API in Vue 3. Composition API can be used for advanced functionalities, Mixins and composables.

I have written an article here, check it out if you want: Vue 3 composition api? Nah thanks.

[prd-quy-nguyen]

I am current working on a repository with mix syntax of vue 2 and vue 3 and it is horrifying