Using the Symfony Router with vue.js

Question

I'm quite new to symfony and a litte bit experienced in vue.js. After a bit of research I wasn't able to find a solution to my problem.

I have the following problem:

I'm building a multi-page-application with Symfony and vue.js for the frontend. I use a search-form in my template index.html.twig to get information about the given search query from an API.

Therefore I use routing with Symfony. When hitting the search button the URL xxx/search?query=test is called. This URL is handled by my symfony controller which gets data from the API and renders the page search-result.html.twig. I use Vue.js in index.html.twig and I want to use Vue in search-result.html.twig (and other routes and pages) as well, but I'm not quite sure how to use different vue instances on different pages.

I hope I was able to describe the problem properly! Looking forward to your suggestions.

UPDATE:

This is my current infrastructure:

base.html.twig (all other pages inherit from this template):

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

This is how I initialize my vue instance:

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

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

From App.vue I then dispatch my different components.

Problem is: When I now open a different twig-file I cannot use a different page layout.

It's not entirely clear to me, what the exact problem is. Can you tell why vue.js is not working on search-result.html.twig? It might also help to see how vue.js is used in your index.html.twig, where it's working, as a reference. Maybe it would also help to compare the content of both template files. The relevant part is whether they extend a template and if it differs and if there are any blocks containing javascript. — dbrumann
– dbrumann, Commented Feb 18, 2020 at 9:43

dbrumann · Accepted Answer · 2020-02-18 11:30:34Z

You probably want to have multiple Vue-Apps with different entrypoints that can be used in your Symfony application. From what it looks like you have 3 places where you have to make changes. Depending on details you might have to make additional changes as well.

Webpack configuration

This requires that you add these entrypoints to your webpack.config.js e.g. by adding an entrypoint for searchApp.

Your vue "bootstrap" file

Then you have to copy the app.js (or wherever the Vue-snippet from your question is stored) for the new app and make the adjustments, e.g. instead of import App from './App.vue' you could have import SearchApp from './SearchApp.vue' (and then update the App call further down).

Your templates

Now you should have 2 vue apps in your project with 2 webpack entrypoints to load their data (CSS/JS). Your base.html.twig will load the javascript for the original app with entrypoint app. You now have to tell search-result.html.twig to overwrite these files with the ones for the new entrypoint (assuming: searchApp):

{% extends "base.html.twig" %}

{% block stylesheets %}{{ encore_entry_link_tags('searchApp') }}{% endblock %}
{% block javascripts %}{{ encore_entry_script_tags('searchApp') }}{% endblock %}

In case one of these blocks contains some shared resources you can also add a {{ parent() }} call to load them from the base.html.twig, but be careful to not get conflicts in your JS calls. Now the search-result.html.twig should load the new Vue-app. You can now change the layout for that app as you see fit and it should not bother your other app.

Collectives™ on Stack Overflow

Using the Symfony Router with vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related