Forms are one of the trickiest parts of frontend development and where you’ll likely find a lot of messy code.

Component-based frameworks like Vue.js 2 have done a lot to improve the scalability of frontend code, but the problem of forms has persisted.

In this tutorial, I’ll show you how the new Vue Composition API (coming to Vue 3) will make your form code much cleaner and more scalable.

Why form code often sucks

The key design pattern of component-based frameworks like Vue is component composition. This pattern tells us to abstract the features of our app into isolated, single-purpose components that communicate state with props and events.

However, forms can’t be abstracted very neatly under this pattern because the functionality and state of a form doesn’t clearly belong to any one component and so separating it often causes as many problems as it solves.

Another important reason form code often sucks in Vue apps is that, up until Vue 2, Vue has not had a strong means of reusing code between components. This is important in forms as form inputs are often distinctly different but share many similarities in functionality.

The main method of code reuse offered by Vue 2 is mixins which I would argue are a blatant anti-pattern.

The Vue Composition API

The Composition API is a new way of defining components with Vue.js and will be a core feature of Vue 3. It’s also available to use today in Vue 2 as a plugin.

This new API is designed to combat some of the issues I’ve mentioned (not just in forms but in any aspect of frontend app architecture).

If you’re still new to the Composition API or aren’t clear what it’s for, I recommend you first read the docs and also another article I wrote, When To Use The New Vue Composition API (And When Not To).

The Composition API is not a replacement for the classic Vue API, but something you can use when it’s called for. As you’ll see in this article, creating clean and scalable form code is a perfect use case.

Adding the Composition API to a Vue 2 project

Since I’m writing this tutorial before Vue 3 has been released, let’s add the Composition API to a Vue 2 project as a plugin.

We’ll begin by creating a new Vue CLI project (just the bare features is all we need - no router, Vuex, etc) and install the Composition API plugin with NPM.

$ vue create composition-api-form
$ cd composition-api-form
$ npm i -S @vue/composition-api

Next, let’s add the plugin to our Vue instance in main.js.

src/main.js

import Vue from "vue";
import App from "./App.vue";

import VueCompositionApi from "@vue/composition-api";
Vue.use(VueCompositionApi);

new Vue({
  render: h => h(App)
}).$mount('#app');

Creating form input components

To make this a simple example, we’re going to create a form with just two inputs - a name, and and email. Let’s create these as their own separate components.

$ touch src/components/InputName.vue
$ touch src/components/InputEmail.vue

Let’s now set up the InputName component template in the typical way including an HTML input element with the v-model directive creating a two-way binding with the component.

src/components/InputName.vue

<template>
  <div>
    <label>
      Name
      <input type="text" v-model="input" name="name" />
    </label>
  </div>
</template>
<script>
export default {
  name: 'InputName'
}
</script>

#vue.js #composition api #forms