This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

This holiday season, maximize your sales through enhanced website performance and 24/7 caring support. SAVE 30% NOW

Getting Started with Vue.js in Symfony

Updated on  23rd February

6 Min Read
Reading Time: 6 minutes

Virtually all web application projects, now require a reasonable portion of logic to be executed on the client side. Symfony as a set of reusable PHP components and a web application framework is not exempted from this trend.

As a PHP developer who uses Symfony regularly, I have had a hard time choosing from the numerous JavaScript frontend frameworks available in the market. I had to pick one from the top rated JavaScript frameworks including Angular, React, Vue and Aurelia.

Vue.js in Symfony
1. Symfony Remains Neutral
2. So Why Vue?
3. The Importance of Frontend
4. Prerequisites
5. Create A Symfony Application
6. Create the Route and Controller
7. Install Vue and its Dependencies
8. Configure Vue-loader
9. Create the Vue Component
10. Show Vue Component Content
11. Final Note

Symfony Remains Neutral

With the whole hype around which JavaScript framework works best for development, Symfony as a framework remains neutral when it comes to making a choice of framework that powers the client side logic and activities in web applications. In effect, Symfony doesn’t have a favorite JavaScript framework.

In this article, I will go over the process of enabling and configuring Vue.js within Symfony applications. Part of this process is covered in the official Symfony documentation. But since the docs can be boring at times, I decided to take a practical approach in which I will:

  • Create a Symfony 4 application
  • Install Vue.js and the dependencies
  • Require and process .vue files correctly
  • Create my first Vue component.

So Why Vue?

To begin, let me state that I have no personal favorites in JavaScript frameworks. I simply use the right tool for the project’s requirements and desired functionalities.

Arguably, Vue is one of the best frontend library available today. It is a lightweight and progressive framework that is an ideal fit for all projects.

You Might Also Like: Learn How to Enable Pagination in Laravel With Vue

The Importance of Frontend

I get this question from web developers a lot. A common concern is the addition of complexity to an already complex application. Frontend frameworks like Vue help abstract the complexity and basic application client side logic of any project. This enforces good design patterns and helps create reasonably reusable components. In just few lines of code, you can build a single page application, easily manipulate DOM and make AJAX call to the backend service without hassle.

Prerequisites

I will build a Symfony application that uses Vue as a frontend framework. At first, this application will run locally in the development environment. Afterward, it can be easily hosted and uploaded to any hosting for PHP.

To get the best out of this tutorial, a reasonable knowledge of PHP, JavaScript and Object Oriented Programming is advised.

Create A Symfony Application

To start, use composer to quickly set up a new Symfony project. Alternatively, set up a Cloudways account to launch a server and follow this tutorial to set up a Symfony 4 project in just a few minutes.

Symfony 4 comes with Flex, a new way of creating web applications with ease by automating the addition and removal of bundles.

Launch the terminal and use the following command to set up the Symfony app with all the dependencies:

The above command creates a new project directory called vue-symfony and a few dependencies for a standard Symfony application are downloaded as well.

 

Before setting up Vue.js, lets install a web server. Change directory into the newly created project and run a command to install the web server in the terminal:

 

Next, start the server with:

Navigate to http://localhost:8000/ :

Create the Route and Controller

In the terminal, create a new controller using the following command:

This will create a new controller class named DefaultController and template file for it. Locate the controller and replace the contents of the index() method with:

php hosting signup

Replace the contents of the index() method with:

Next, create a new file .vue-symfony/templates/index.html.twig within the templates folder.

Go back and restart the server:

Install Vue and its Dependencies

With the introduction of Encore, asset management has become a piece of cake. This asset management tool uses webpack and allows powerful CSS and JavaScript processing, combination, and minification. Before proceeding, ensure that you have Node.js and Yarn package manager installed on your machine.

Using yarn, install Vue and the dependencies.

Configure Vue-loader

vue-loader needs to be activated in webpack.config.js. Leave other default settings alone and just enable vue loader through the following code snippet:

Webpack Encore expects an entry point. For this, create a subdirectory named called  js  within assets folder and then add a app.js file inside of it.

In the above code snippet, I first imported Vue and Example component. Next, I created an instance of Vue, pass an element where Vue will attach itself to and register the Example component so that it can be accessible.

Create the Vue Component

I will use Vue.js as a widget and include it within Twig template to bring more reactivity to the Symfony application. This is one of the numerous ways of using Vue.js.

Before I compile .vue files, I will create the component. For this, create a new folder assets/js/components and a new component file named  assets/js/components/Example.vue

Next, I can compile the asset that would be used in the Symfony template and watch the changes by using the following command:

Open the base twig template .vue-symfony/templates/base.html.twig and include the compiled JavaScript files into the base template that would be used in the application.

Show Vue Component Content

Earlier, I created a Vue.js component and registered it for use in the application. This is made possible by including  the custom tag for the newly created component. Edit .vue-symfony/templates/index.html.twig and include the Example component.

Navigate to the local server (at port 8000) and check out the result:

Final Note

I hope this article has giving you enough enlightenment on how to get started with Vue.js in Symfony apps. So the next time you are faced with the choice of the picking a frontend JavaScript framework, use the tricks you have learned here to get an easy start. The code of this article can be found at Github.

Disclaimer: The opinions and views presented in this article are author’s own, and does not reflect the official policy and views of Cloudways.

Author of the Post: This post is contributed by Olususi Oluyemi. He is a tech enthusiast, programming freak and a web development junkie who loves to embrace new technology. You can find him on yemiwebby.

Share your opinion in the comment section. COMMENT NOW

Olususi k Oluyemi

A tech enthusiast, programming freak and a web development junkie who loves to embrace new technology.

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.