# Nuxt.js Integration

Nuxt.js is a free and open source web application framework based on Vue.js, Node.js, Webpack and Babel.js.

You can integrate Getform to the sites developed with Nuxt.js to handle the backend of your static forms easily.

# Create a new Nuxt site

If you have a Nuxt app already setup and running, you can skip to Step 4. If you are setting up your site from scratch, you can run the following commands to start setting up your Nuxt app.

$ yarn create nuxt-app <project-name>
$ cd <project-name>
$ yarn dev

Nuxt will start a hot-reloading development environment that is accessible by default at http://localhost:3000/.

# Add a Contact Section to your Nuxt site

Install axios with the following command:

$ yarn add axios

Create a new js file and name it as contact.vue file under pages directory, change its content with the following code block:

<template>
  <div>
    <div>
      <form
        accept-charset="UTF-8"
        v-on:submit.prevent="onSubmit()"
        method="POST"
      >
        <div>
          <label>Email address</label>
          <input
            type="email"
            v-model="email"
            class="form-control"
            placeholder="Email"
          >
        </div>
        <div>
          <label>Name</label>
          <input
            type="text"
            v-model="name"
            class="form-control"
            placeholder="Name"
            required="required"
          >
        </div>
        <div>
          <label>Message</label>
          <textarea
            type="text"
            v-model="message"
            class="form-control"
            placeholder="Message"
            required="required"
          ></textarea>
        </div>
        <hr>
        <div class="success" v-if="isSuccess">We received your submission, thank you!</div>
        <button type="submit">Submit</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Contact",
  props: {
    msg: String
  },
  data() {
    return {
      loading: true,
      name: "",
      email: "",
      message: "",
      isSuccess: false
    };
  },
  methods: {
    onSubmit() {
      let data = {
        name: this.name,
        email: this.email,
        message: this.message
      };
      axios
        .post("https://getform.io/f/{unique-endpoint-generated-on-step-1}", data, {
          headers: {
            Accept: "application/json"
          }
        })
        .then(
          response => {
            this.isSuccess = response.data.success ? true : false;
          },
          response => {
            // Error
          }
        );
    }
  }
};
</script>

# Run your Nuxt app locally to finalize setup

Run the following command to see your NuxtJS form in action at localhost:3000/contact/:

$ yarn dev

That's it! Your Nuxt app is now running Getform for form handling.

← Hugo →