Vue.js and Symfony Forms

Vue.js and Symfony Forms

Vue.js and Symfony Forms - How can I render forms in Vue.js and handle them in Symfony? While I can quit rendering the forms like Twig handles it. I’ve Symfony's forms started searching for some “form generators” packages for Vue.js.

Symfony provides us the symfony/form package which makes the handling of rendering and submitting forms easier than ever. Soon this will become even easier with the new “ Form handler helper”, but that’s not the point here.

What annoyed me when I first started working with Vue.js was the fact that I pretty much like the need to say “goodbye_” to the forms rendering directly in the Twig (_which is very handy).

I’ve started searching for some “_form generators_” packages for Vue.js. There are a few, but so far I didn’t like any of them. In the worst case, I could just render the form in some kind of API method like /get-form-view but this is so against the Vue.js workflow/concept.

So... I started to ask myself and think:

How can I render forms in _**_Vue.js** and handle them in Symfony? While I can quit rendering the forms like Twig handles it — I definitely want to keep the Form validations/handling provided by Symfony.

There are few problems that need to be solved here:

  • Handling of CSRF token,
  • Rebuilding the request_“_ it’s structure must be the same of that provided upon Symfony standard form submission.

CSRF Token


By default, each Form created with symfony/form packages have the CSRF Token validation turned on. Meaning further that each request provided to the form handler must contain the CSRF Token. There are few solutions here, I will go with the 2 that I found for my case.

The bad one (unless it’s just your private project) — disabling the CSR Token validation

Each form class (meaning that it extends from Symfony\Component\Form\AbstractType ) allows us to turn the CSRF validation off.



public function configureOptions(OptionsResolver $resolver) {


      'data_class' => null,

        "csrf_protection" =>false,


`````` } ```

javascript php webdev vuejs vue

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

PHP vs JavaScript: Which Is Better? | PHP And JavaScript Difference | JavaScript vs PHP

This video PHP vs JavaScript will take you through all the basic and advanced concepts in detail. The video also highlights PHP and JavaScript differences in detail, however, it is common that both languages differ in terms of features but other than we have also highlighted a few unknown key differences. Now, with further ado, let's get started.

Clientes Crud Php Vuejs

clientes_crud .Crud de Clientes en PHP / Vuejs

Simple CRUD implementation using VUEJS and PHP

Simple CRUD implementation using VUE JS and PHP Here I am trying to make a simple CRUD (create, read, update, delete) operation using VUE JS and AXIOS and assisted by PHP as a backend to communicate with MYSQL .

PHP json_decode Example | Decode JSON Data in PHP Tutorial

PHP json_decode is an inbuilt function that takes the JSON encoded string and converts it into a PHP variable. JSON stands for JavaScript Object Notation.