vue-symfony-form

A Vue.js plugin for Symfony ajax form creation

Usage no npm install needed!

<script type="module">
  import vueSymfonyForm from 'https://cdn.skypack.dev/vue-symfony-form';
</script>

README

vue-symfony-form

Easy to use AJAX forms written to handle symfony form errors.

Set Up

Enable symfony-form plugin and add connector:

import symfonyForm from 'vue-symfony-form';
import connector from 'vue-symfony-form/src/core/connector';

Vue.use(symfonyForm, {
  connector: connector
});

Connector is a driver responsible for sending messages. You can replace it with your own.

Usage

Create new form with symfony-form component with required action attribute.
Following code will send simple GET request to action url:

<symfony-form action="/foo">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <button>Send</button>
</symfony-form>

When form will be proceeded you'll get appropriate errors above fields in case your form data isn't valid.

That's all.

Hooks

@beforeSubmit(data)
Action procceeded before data will be sent.
@onSuccess(request)
Action in case of success status
@onFail
Action in case of invalid data
@onSubmit
Action procceeded when request completely sent

Properties

:method
Request method ('GET' by default)
:error-class
Class which will be performed to error divs
:data-prefix
Set unify data prefix for input fields. [dataPrefix][name]
:is-secure
Just a flag to use in connector. You can modify connector and set extra headers for authorized requests

Slots

warning
Use it to modify default error message in case of request was failed

Look usage examples in examples directory