vue-netlify-form v0.3.0

vue-netlify-form

This component was created to simplify submission to Netlify Forms and help catch common mistakes.

Features

• Validates presence of form and field names. Form name is a required prop. The presence of field names is validated during development (by checking NODE_ENV != "production) and emits a console warning like Missing Netlify form field named: Email if a form field lacks a name.
• Submits form data to Netlify using @nuxt/axios.
• Passes form lifecycle state through scoped slots.

Usage

<template>

  <netlify-form name='Contact' :form='form'>
    <template #default='{readonly, submitting, submitted}'>

      <p v-if='submitted'>Thanks for your submission</p>

      <input
        name='Email'
        placeholder='Email'
        v-model='form.Email'
        :readonly='readonly'>

      <button>
        {{ submitting ? 'Submitting' : 'Submit' }}
      </button>

    </template>
  </netlify-form>

</template>

<script>

export default {
  data: function() {
    form: {
      Email: ''
    }
  }
}

</script>

Props

Notes

CORS when using endpoint

If you're going to use the endpoint prop to submit to your production endpoint from localhost, you should add something like the following to _headers to allow those requests.

/
  Access-Control-Allow-Origin: http://localhost:3000
  Access-Control-Allow-Methods: POST
  Access-Control-Allow-Headers: content-type