Create and Deploy Vue.js Forms using Formcarry with Vercel

Create and deploy a project to recieve form submissions using Vue.js, Formcarry, and Vercel.

Formcarry provides HTML Form processing for front-end developers and designers.

In this guide, you will discover how to process a simple contact form on your Vue.js project using Formcarry and then deploy your project with Vercel.

Before getting started, sign up for a free Vercel and Formcarry account.

Step 1: Set Up Your Vue.js Project

Create a Vue.js project using npm, then move into the directory, with the following command:

npx @vue/cli create -d my-formcarry-project && cd my-formcarry-project

After the initialization, run the following command to start a local Vue.js development server:

npm run serve

Step 2: Create Your Form on Formcarry

Visit your Formcarry Dashboard and create a new form.

The Formcarry dashboard with a button to add a new form.

With your form created, you can then copy the form's endpoint from the form overview page. This will be used in your project as a place to send form data.

The Formcarry form overview page showing the form endpoint.

Step 3: Create Your First Form Component

Now that you have a Formcarry form, create a /src/components/Form.vue file in your Vue.js project with the following contents.

Note: Make sure to replace Your-Form-Endpoint with the endpoint that you have copied in Step 2.
  <div class="form">
    <h1 v-if="!status">Send a message!</h1>

    <form v-if="!status" @submit="sendForm">
        placeholder="Enter your email..."
        placeholder="Leave a message..."
      <button type="submit">Send</button>

    <h1 v-if="status === 'success'">Thank you, we got your submission!</h1>
    <h1 v-if="status === 'error'">
      Oops, something went wrong. Please try again.

  export default {
    name: 'Form',
    data: function () {
      return {
        status: null,
        email: null,
        message: null,
    methods: {
      sendForm: function (event) {

        fetch('Your-Form-Endpoint', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
          body: JSON.stringify({ email:, message: this.message }),
          .then((response) => response.json())
          .then((response) => {
            if (response.code === 200) {
              this.status = 'success';
            } else {
              // Formcarry error
              this.status = 'error';
          // network error
          .catch(() => (this.status = 'error'));

  .form form {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 480px;
    padding: 24px;
    margin: 0 auto;

  .form input {
    margin-bottom: 16px;

Creating a Form component in a Vue.js project.

Next, replace your App.vue file's contents with the following:

  <div id="app">
    <form />

  import Form from './components/Form.vue';

  export default {
    name: 'App',
    components: {

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;

An App.vue file using the previously created Form.vue component.

Note: Alternatively, use your new Form component in an existing Vue.js file.

You are now ready to deploy your project live and start recieving form submissions.

Step 3: Deploy With Vercel

To deploy your Vue.js + Formcarry app with Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git provider of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your app live, such as the following:

Written By
Written by nusualabuganusualabuga