How to pass a variable from twig to vueJS (symfony 2.8 and VueJS 2)

Question

I have a symfony 2.8 application and I recently integrated VueJs 2 as my front-end framework, because it gives a lot of flexibility. My application is not single page and I use the symfony controllers to render views. All the views are wrapped in a base twig layout:

<!DOCTYPE html>
<html lang="{{ app.request.locale|split('_')[0] }}">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>
<body>

<div id="app">
    {% block body %} {% endblock %}
</div>

<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="/js/fos_js_routes.js"></script>

<script type="text/javascript" src="{{ asset('build/vendor-bundle.js') }}"></script>
<script type="text/javascript" src="{{ asset('build/vue-bundle.js') }}"></script>

</body>
</html>

I load most of the JS with webpack, all my vue components and JS dependencies are compiled in vendor-bundle.js and vue-bundle.js. My VueJs instance looks like this:

import './components-dir/component.vue'
import './components-dir/component2.vue'

Vue.component('component', Component);
Vue.component('component2', Component2);

window.onload = function () {
new Vue({
        el: '#app',
        components: {}
    });
};

I want to pass some php variables from the controller to the vuejs componets, but I can't manage to make it work.

A very simple example of a controller looks like this:

    /**
     * @Route("/contract", name="contract")
     * @Method("GET")
     */
    public function indexAction()
    {
        $paymentMethods = PaymentMethod::getChoices();

        return $this->render('contracts/index.html.twig', [
            'paymentMethods'   => $serializer->normalize($paymentMethods, 'json'),
        ]);
    }

All the html, css and js are handled by vueJs. The twig view looks like this:

{% extends 'vue-base.html.twig' %}
{% block body %}
    <contracts :paymentMethods="{{paymentMethods | raw}}"></contracts>
{% endblock %}

The contracts.vue component looks like this:

<template>
    <div>
        <p>Hi from component</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        props: ['paymentMethods'],
        mounted: function () {
            console.log(this.paymentMethods)
        }
    }
</script>
<style>
</style>

How can I pass the php variables as props to vueJs ?

In the example above, I don't get any errors, but the property is not passed to vuejs. The console log prints undefined. I want to be able to do this, because I don't want to have a SPA, but I also want to pass some variables from symfony to vue, because I won't have to make additional requests.

Did you find a solution ?

Benjamin Seche
– Benjamin Seche

2018-06-25 12:38:56 +00:00
Commented Jun 25, 2018 at 12:38 — Benjamin Seche
– Benjamin Seche, Commented Jun 25, 2018 at 12:38

mu4ddi3 · Accepted Answer · 2018-08-02 12:11:17Z

2

Instead of passing Twig variable as value of Vue attr:

<contracts :payment-methods="{{ twigVar}}"></contracts>

you can render whole using twig:

<contracts {{ ':payment-methods="' ~ twigVar ~ '"' }}></contracts>

Thanks to this you will avoid delimeters conflict between vue and twig.

Also as the value comes directly from twig, it probably wont change upon a time, as it is generated in backend - not in some vue-source - so you don't need to bind it, just pass it like:

<contracts payment-methods="{{ twigVar}}"></contracts>

answered Aug 2, 2018 at 12:11

mu4ddi3

13510 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleg Kishko · Accepted Answer · 2021-05-14 07:45:40Z

The simplest way to pass variables from twig to Vue application is:

Twig:

<div id="app" data-foo="{{ foo }}" data-bar="{{ bar }}"></div>

JS:

import Vue from 'vue'

new Vue({
  el: '#app',
  data: {
    foo: '',
    bar: ''
  },
  template: '<div>foo = {{ foo }}</div><div>bar = {{ bar }}</div>',
  beforeMount: function() {
    this.foo = this.$el.attributes['data-foo'].value
    this.bar = this.$el.attributes['data-bar'].value
  }
})

If you would like to use a Vue component you can do it the following way:

Twig:

<div id="app" data-foo="{{ foo }}" data-bar="{{ bar }}"></div>

JS:

import Vue from 'vue'
import App from 'App'

new Vue({
  el: '#app',
  render(h) {
    return h(App, {
      props: {
        foo: this.$el.attributes['data-foo'].value,
        bar: this.$el.attributes['data-bar'].value,
      }
    })
  }
})

App.vue:

<template>
  <div>foo = {{ foo }}</div>
  <div>bar = {{ bar }}</div>
</template>

<script>
  export default {
    props: ['foo', 'bar'],
  }
</script>

Please note if you would like to pass arrays you should convert them to json format before:

Twig:

<div id="app" data-foo="{{ foo|json_encode }}"></div>

and then you should decode json:

JS:

this.foo = JSON.parse(this.$el.attributes['data-foo'].value)

tony19 · Accepted Answer · 2022-07-15 01:25:21Z

1

you need to add the following to your .vue file props: ['paymentMethods'] please refer to the following url for complete documentation https://v2.vuejs.org/v2/guide/components.html#Passing-Data-with-Props

edited Jul 15, 2022 at 1:25

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 20, 2018 at 19:38

Sari Yono

5775 silver badges13 bronze badges

5 Comments

Stefan Gramadnikov Over a year ago

Sorry I've forgotten to write that in my .vue file I have the props property already defined. I've updated my question.

Sari Yono Over a year ago

do you have the vue DevTools installed? if so go to the root and check what paymentMethods shows. @StefanGramadnikov

Sari Yono Over a year ago

whoops remove the : from :paymentMethods it shoud be just paymentMethods

Stefan Gramadnikov Over a year ago

Tried it both ways, the difference is that with : the property is dynamic, but in my case it doesn't matter.

Sari Yono Over a year ago

well when you use the : itll think its a vue variable.

Padam87 · Accepted Answer · 2018-07-11 13:00:57Z

0

Probably late to the party, but if anyone is having the same issue, the problem here was the casing.

CamelCased props like paymentMethods are converted to hyphen-case in html, and can be used like this:

<contracts :payment-methods="{{ paymentMethods | raw }}"></contracts>

answered Jul 11, 2018 at 13:00

Padam87

1,0391 gold badge6 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to pass a variable from twig to vueJS (symfony 2.8 and VueJS 2)

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related