Home

At the beginning, i wrote an article on medium about Symfony and VueJS. In fact i was wondering how we could use Symfony as a backend system for SPA applciation or for widgets embeded in a Symfony system. Formerly, Symfony works with its Form component. It allows developpers to build complex Form that will validate data and persist into Database using the ORM. The problem is that kind of architecture send data using key/value pattern over HTTP (in POST body or in GET query string). This pattern doesn't really apply with modern JS app. Those app usually build a complex JSON object that will be sent over HTTP as raw content in the POST body. So Symfony must provide a way to use easily that JSON, validate it and send it to the controller. For instance, i didn't find a simple way to do that and that's why i built this project. It allows to demonstrate my arguments from medium article. And it also allows me to find a right way to use Symfony with modern JS app. Maybe ApiPlatform will help me, but i still have to investigate on this solution. At the end of the README.md you will find some issues/questions i asked to contributors of packages/bundles/components i included. On this wiki i will try to add more information about difficulties i faced during this project, it's always a work in progress.

This application has been realized to get a sample front app with sf3.4+ & vuejs but it also shows basic controllers with what most developpers do : basic controller, controller with twig, http call to external API, logging, API... We will try to not use front manipulation outside of VueJS (the sample with twig are really basic and won't use form per example).

Here is how it has been created:

• composer create-project symfony/skeleton sf-flex-encore-vuejs
• cd sf-flex-encore-vuejs
• composer req encore annotations twig api jwt-auth http profiler log doctrine-migrations admin webonyx/graphql-php
• composer require --dev doctrine/doctrine-fixtures-bundle phpunit/phpunit symfony/dom-crawler symfony/browser-kit symfony/css-selector security-checker roave/security-advisories:dev-master
• yarn add vue vue-router quasar-framework quasar-extras vuelidate vue-apollo@next graphql apollo-client apollo-link apollo-link-http apollo-link-error apollo-cache-inmemory graphql-tag react react-dom prop-types axios rxjs @devexpress/dx-react-core @devexpress/dx-react-grid
• yarn add --dev vue-loader vue-template-compiler vue-router react-loader babel-preset-es2017 babel-preset-react sass-loader node-sass [email protected] testcafe testcafe-vue-selectors jasmine karma karma-jasmine karma-spec-reporter karma-junit-reporter karma-webpack karma-chrome-launcher offline-plugin rxjs-tslint
• yarn install

You will have more information about the project in the README.md