Vue 3 Reference Component

Maintaining a consistent code style across a codebase is crucial for code quality and effective collaboration between multiple people. Without standardization, codebases can become messy and difficult to maintain. This challenge is especially difficult in the Vue ecosystem after the introduction of Vue 3 and the many available flavours of writing a component.

A practical and effective solution is to document a Single File Component as a reference and make it available to all team members. This ensures everyone is on the same page and improves the coherence of the codebase.

Picking a Syntax

Selecting the appropriate syntax for a framework is a critical decision that impacts the overall development experience. It is always advisable to align closely with the official documentation. Doing so offers several advantages, including seamless integration with third-party libraries, better support for future framework upgrades and, as a bonus, new team members will be very thankful.

In Vue, among all the available syntaxes, there are two clear winners: Options API and Composition API.

Options API

The old but very popular and easy-to-learn way is using the Options API.

<script>
import TheComponent from "./components/TheComponent.vue";
import componentMixin from "./mixins/componentMixin.js";

export default {
  name: "OptionsAPI",
  components: {
    TheComponent,
    AsyncComponent: () => import("./components/AsyncComponent.vue"),
  },
  mixins: [componentMixin],
  props: {
    elements: {
      type: Array,
    },
    counter: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      object: {
        variable: true,
      },
    };
  },
  computed: {
    isEmpty() {
      return this.counter === 0;
    },
  },
  watch: {
    counter() {
      console.log("Counter value changed");
    },
  },
  created() {
    console.log("Created hook called");
  },
  mounted() {
    console.log("Mounted hook called");
  },
  methods: {
    getParam(param) {
      return param;
    },
    emitEvent() {
      this.$emit("event-name");
    },
  },
};
</script>
<template>
  <div class="wrapper">
    <TheComponent />
    <AsyncComponent v-if="object.variable" />
    <div
      class="static-class-name"
      :class="{ 'dynamic-class-name': object.variable }"
    >
      Dynamic attributes example
    </div>
    <button @click="emitEvent">Emit event</button>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  font-size: 20px;
}
</style>

Composition API

With the introduction of Vue 3, the composition API is gaining a lot of traction. If you are new to Vue it’s better to start and focus on this syntax.

<script setup>
import {
  ref,
  reactive,
  defineAsyncComponent,
  computed,
  watch,
  onMounted,
} from "vue";
import useComposable from "./composables/useComposable.js";
import TheComponent from "./components/TheComponent.vue";

const AsyncComponent = defineAsyncComponent(
  () => import("./components/AsyncComponent.vue"),
);

console.log("Equivalent to created hook");

onMounted(() => {
  console.log("Mounted hook called");
});

const enabled = ref(true);
const object = reactive({ variable: false });

const props = defineProps({
  elements: Array,
  counter: {
    type: Number,
    default: 0,
  },
});

const { data, method } = useComposable();

const isEmpty = computed(() => {
  return props.counter === 0;
});

watch(props.counter, () => {
  console.log("Counter value changed");
});

const emit = defineEmits(["event-name"]);

function emitEvent() {
  emit("event-name");
}

function getParam(param) {
  return param;
}
</script>

<script>
export default {
  name: "ComponentCompositionAPI",
  // defineOptions can be used instead in 3.3+
};
</script>

<template>
  <div class="wrapper">
    <TheComponent />
    <AsyncComponent v-if="object.variable" />
    <div
      class="static-class-name"
      :class="{ 'dynamic-class-name': object.variable }"
    >
      Dynamic attributes example
    </div>
    <button @click="emitEvent">Emit event</button>
  </div>
</template>

<style scoped>
.wrapper {
  font-size: 20px;
}
</style>

Conclusion

When deciding between the Options API and Composition API, it ultimately comes down to personal preference and project requirements. However, it is recommended to use the Composition API for new projects as it offers a more modular and flexible approach to organizing code.

But no matter what you choose the key takeaway of this article is to establish and document a consistent code style across the project by using a Single File Component as a reference. By doing so, the codebase will be easier to maintain and team members will be able to collaborate more effectively.

Refactoring a Component from Vue 2 Options API to Vue 3 Composition API

The 5 ways to Define a Component in Vue 3