> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formbox.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Learn how to integrate your Formbox form with <a href="https://vuejs.org" target="_blank" rel="noopener noreferrer">Vue</a>.

## What is Vue?

Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, making it a great choice for building web applications.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new Vue project

To get up and running quickly, we will follow the official Vue <a href="https://vuejs.org/guide/quick-start.html" target="_blank" rel="noopener noreferrer">Quick Start</a> guide to create a new Vue project. In your terminal, run the following command:

```bash theme={null}
npm create vue@latest
```

The command will install and execute <a href="https://github.com/vuejs/create-vue" target="_blank" rel="noopener noreferrer">create-vue</a>, the official Vue project scaffolding tool. The CLI will then present you with prompts for a number of optional features such as TypeScript and testing support. Once all questions are answered, it will begin scaffolding your project and provide instructions for navigating to your site and running it locally.

Go to the new directory for the new website:

```bash theme={null}
cd vue-with-formbox
```

Start the development server:

```bash theme={null}
npm run dev
```

Open your browser and navigate to `http://localhost:5173`. You should see a new Vue application running.

<Frame>
  <img src="https://mintcdn.com/formbox/27_5fcxY_YavrIb7/images/vue-vite.png?fit=max&auto=format&n=27_5fcxY_YavrIb7&q=85&s=f6e00586351af0c90e215635ccb96cc1" style={{ borderRadius: "0.5rem" }} width="2656" height="1796" data-path="images/vue-vite.png" />
</Frame>

## Adding your Formbox form to your Vue project

Now that we have a new Vue project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the Vue <a href="https://tailwindcss.com/docs/guides/vite#vue" target="_blank" rel="noopener noreferrer">installation guide</a>.

Once you have Tailwind CSS set up, let's add our form.

Open up the `App.vue` file within the `src` directory and replace everything in the file with the following code block:

```jsx App.vue theme={null}
<template>
  <div class="max-w-md mx-auto py-20 bg-white">
    <h2 class="text-2xl font-semibold mb-6">Get in Touch</h2>
    <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
      <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="John Doe"
          required
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        />
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
          Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="john@example.com"
          required
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        />
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 text-sm font-bold mb-2">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          rows="4"
          placeholder="How can we help you?"
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        ></textarea>
      </div>
      <button
        type="submit"
        class="
          bg-blue-500
          text-white
          px-4
          py-2
          rounded-md
          hover:bg-blue-600
          focus:outline-none focus:shadow-outline-blue
        "
      >
        Send Message
      </button>
    </form>
  </div>
</template>
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:5173` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img src="https://mintcdn.com/formbox/27_5fcxY_YavrIb7/images/tailwind-form.png?fit=max&auto=format&n=27_5fcxY_YavrIb7&q=85&s=eef3bd6f1e5754e78cbf34a5fc4ff64c" style={{ borderRadius: "0.5rem" }} width="2166" height="1524" data-path="images/tailwind-form.png" />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img src="https://mintcdn.com/formbox/27_5fcxY_YavrIb7/images/success-page.png?fit=max&auto=format&n=27_5fcxY_YavrIb7&q=85&s=edcf9974c15138f25a71dd8545dbefd9" style={{ borderRadius: "0.5rem" }} width="2034" height="1382" data-path="images/success-page.png" />
</Frame>
