Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567



Symfony Routes in Vue.js (SPA)

namespace AppCommandFrontend;

use AppControllerCoreConfigLoader;

use AppControllerCoreServices;

use SymfonyComponentConsoleCommandCommand;

use SymfonyComponentConsoleInputInputInterface;

use SymfonyComponentConsoleOutputOutputInterface;

use SymfonyComponentConsoleStyleSymfonyStyle;

use SymfonyComponentRoutingRouterInterface;

 * This command handles building json file which consist of backed (symfony) routes,

 * This way the urls can be changed any moment without the need to update these also on front,

 * Just like it works in symfony - names must be always changed manually, same goes to logic related to parameters

 * Class BuildRoutingMatrixCommand

 * @package AppCommandFrontend

class BuildRoutingMatrixCommand extends Command

    protected static $defaultName="pms-io:build-frontend-routing-file";

     * @var Services $services

    private Services $services;

     * @var SymfonyStyle $io

    private SymfonyStyle $io;

     * @var RouterInterface $router

    private RouterInterface $router;

     * @var ConfigLoader $configLoader

    private ConfigLoader $configLoader;

    public function __construct(

        Services $services,

        RouterInterface $router,

        ConfigLoader $configLoader,

        string $name = null)


        $this->configLoader = $configLoader;

        $this->services = $services;

        $this->router = $router;

     * Initialize the logic

     * @param InputInterface $input

     * @param OutputInterface $output

    public function initialize(InputInterface $input, OutputInterface $output)

        $this->io = new SymfonyStyle($input, $output);

     * Execute the main logic

     * @param InputInterface $input

     * @param OutputInterface $output

     * @throws Exception

    public function execute(InputInterface $input, OutputInterface $output): int

        $this->services->getLoggerService()->getLogger()->info("Started building routing file for frontend");

                $routesNamesToPaths = [];

                $routesCollection = $this->router->getRouteCollection()->all();

                foreach ($routesCollection as $routeName => $route) {

                    $routesNamesToPaths[$routeName] = $this->normalizePathForVueRouter($route->getPath());

                $jsonRoutesMatrix = json_encode($routesNamesToPaths);

                file_put_contents($this->configLoader->getConfigLoaderPaths()->getRoutingFrontendFilePath(), $jsonRoutesMatrix);

            } catch (Exception | TypeError $e) {

                $message = "Something went wrong while building the file";

                $this->services->getLoggerService()->logException($e, [

                    "info" => $message,

                    "calledFrom" => __CLASS__,

                throw new Exception($message);

        $this->services->getLoggerService()->getLogger()->info("Started building routing file for frontend");

        return Command::SUCCESS;

     * Handles transforming paths to make them work with vue

    private function normalizePathForVueRouter(string $path): string

        //While Symfony uses {param}, vue router uses :param

        $normalizedPath = preg_replace("#{(.*)}#", ":$1", $path);

        return $normalizedPath;

Credit: Source link

Previous Next
Test Caption
Test Description goes like this