Vue JS + TypeScript + Vuetify forms in Netlify

Netlify is great tool for deploying websites. It has a very simple deployment process that uses Git commands to publish the website and then upload changes. Netlify also detects the forms in the site, handles the submits, and then sends notifications. This is a fantastic feature because it help us saving the time and effort required to build a backend. Although Netlify has a very good documentation, they only explain how to link a Vue form, so I had to spend a couple of days figuring out how to link my Vue + TS + Vuetify form. Now, having my forms up and running is a piece of cake! Here is how I do it:

Let’s do this!

The first step is to create a new Vue Project, a new repo on GitHub and a new account on Netlify.

Then, I need to link my GitHub repo with my Netlify account using ‘Git based deployment’. (I followed this tutorial).

Next, I want to add Vuetify to my project, but since I already created it using Vue CLI, I can simply use this command:

vue add vuetify

Now I can start with the form. There are a couple of things required by Netlify bots so they could identify my form:

• A name attribute: Netlify needs this to identify each element of the form, so I added a name to the v-form tag, and in every v-text-field. The form’s name attribute will be the form’s name in the Netlify App Interface.
• A netlify attribute: The form should have a netlifyattribute, or data-netlify='true' .
• A submit.prevent: The form also includes @submit.prevent='handleSubmit' because I need to add extra code to handle the form submissions.
• A hidden input for Netlify: this input tag should have a value attribute that matches the form’s name.

<input type="hidden" name="form-name" value="contact-us-form" />

With all the Netlify requirements, my form looks like this:

I want to have more control over my form, so I’m going to add some logic to thehandleSubmit method:

Please, pay special attention to the attributes of the person object, they must exactly match the name of the v-text-field. Also, note that Netlify allows us to add a custom message after filling out the form by using routes, so I created a page to show after a form was successfully submitted, and another for failures:

/success

/fail

In this moment, my form is ready, but it does not work yet. I mean, it is already deployed on Netlify, but I get a 404 error after I submit the form and there are no submissions on the Netlify App Interface. This is because I need to make one last thing.

Prerender

Netlify offers two alternatives to help their bots find the forms. One option is using prerender and the other is to make a copy of the form skeleton in the public/index.html. (You can find more information here) I’m going to use the Prerender option.

First, I need to install the prerender plugin: yarn add prerender-spa-plugin

Next, I’m going to add some configuration on the vue.config.

Now, I commit the changes and I push them to Netlify, and that’s it! The form is up and running!!

This is a working example: https://vue-app-netlify.netlify.app/

And you can take a look at the source code here: https://github.com/fferz/vue-app-netlify