In the last post I have described how to install Symfony and React. Here I am going to show the process of installation Symfony 4.2.4 and Vue.js.

I have the latest PHP version 7.1.23 and Composer version 1.8.4 on my mac and suggest you to upgrade them to the latest ones.

Let’s begin from initialization of the Symfony project. I have called it SampleVueProject.

Now we will install install WebPack Encore and annotations to make our life easier.

Install Vue loader and template compiler using yarn.

The next step is to create controller, we will call it DefaultController

and edit the content to the following view

Don’t forget to edit the ‘./templates/base.html.twig’ and ‘./templates/default/index.html.twig’ files.

The next step will be creation of simple Vue component. We will create two files ‘./assets/js/App.js’ and ‘/assets/js/App.vue’

And the simplest Vue component which will show one of my favorite quote from Edsger Dijkstra. I have styled it a little bit..

Now we are ready to see the result running the Symfony web server and yarn watcher. Just open in two different terminals the following two commands:

The site is available on ‘http://127.0.0.1:8000/