If you mix server-side rendered apps with Vue, this is the most common way. Second method is to push the data to a window.__data.staffMemberOptions = "{{ foo }}" and use it in Vue.
var vue = new Vue({
el: '#app',
created: function () {
for (var key in __app.dataForVue) {
this[key] = __app.dataForVue[key];
}
},
// ...
}; <!-- inventory.html.twig: -->
<div
id="app"
data-inventory="{{ inventory | json_encode }}"
>
</div>
// main.js
new Vue({
template: '<App :inventory="inventory"/>',
components: {App},
data() {
return {
inventory: null
}
},
beforeMount: function () {
this.inventory = JSON.parse(this.$el.attributes['data-inventory'].value);
}
}).$mount('#app');