This article discusses how to pass URLs from Vue.js to Symfony with simple rerouting options. We discuss what each platform is and how to connect them.

Symfony comes with the “out-of-box” routing logic, which works flawlessly when using it in PHP or in Twig. However, once the frontend control is fully handled to the Vue.js (SPA), the solution for passing the URLs to the JavaScript is no longer an option.

The official idea/way of passing the URLs has been described in the Symfony documentation in the section “ Generating URLs in JavaScript ”, which is simply:

JavaScript

const route = "{{ path('blog_show', {slug: 'my-blog-post'})|escape('js') }}";

With a new project (or more like an extension of an already existing project), I started to wonder if there is actually a way to share Symfony routes in Vue.js. I’ve already in a big, over 2 years old private project, in which the urls are simply hardcoded in the frontend — with this I wanted to find a way out to replicate the routing in the Vue.js.

Actually the solution for this is pretty simple, and allows to easily replicate the url generating logic available in php:

PHP

$this->router->generate('user_profile', [
    'username' => $user->getUsername(),
]);

Handling Routes for Vue.js

The difference in Routes Structure

The foremost important difference between Symfony and Vue.js routes is the way that parameters in URLs are handled.

While Symfony uses this annotation:

PHP

"/module/passwords/group/{id}"

#javascript #php #web dev #vue #vue js