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.

composer create-project symfony/website-skeleton SampleVueProject
cd ./SampleVueProject

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

composer require encore
composer require annotations

Install Vue loader and template compiler using yarn.

yarn add --dev vue vue-loader@15.7.0 vue-template-compiler

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

php bin/console make:controller Default

and edit the content to the following view

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class DefaultController extends AbstractController
{
    /**
     * @Route("/", name="default")
     */
    public function index()
    {
        return $this->render('default/index.html.twig');
    }
}

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </body>
</html>
{% extends 'base.html.twig' %}
{% block body %}
    <div id="app"></div>
{% endblock %}

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

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

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

<template>
    <div class="quoteText">
        <blockquote>
            {{quoteText}}
            <cite class="authorName">{{authorName}}</cite>
        </blockquote>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        var data = {
            quoteText: "The art of programming is the art of organizing complexity, of mastering multitude and avoiding its bastard chaos as effectively as possible.",
            authorName: "Edsger Wybe Dijkstra",
        };
        return data;
    }
};
</script>

<style scoped>
    .quoteText {
        position: relative;
        margin: auto;
        font-family: Georgia, serif;
        font-size: 18px;
        font-style: italic;
        width: 500px;
        padding: 0.25em 40px;
        line-height: 1.45;
        color: #383838;
    }
    .quoteText:before {
        display: block;
        content: "\201C";
        font-size: 80px;
        position: absolute;
        left: -20px;
        top: -20px;
        color: #7a7a7a;
    }
    .quoteText .authorName {
        color: #999999;
        font-size: 14px;
        display: block;
        margin-top: 5px;
    }
    
    .quoteText .authorName:before {
        content: "\2014 \2009";
    }
</style>

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:

hp bin/console server:run
yarn run encore dev --watch

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