I have a full vuejs application built with webpack. I have a django template where I mounted the vuejs minified js file. Now if I want some context data from django template to js script, Is it possible to send the data?
index.html:
{% block content %}
<div id="app"><div>
<script src="build.js">`
{% endblock %}
views.py:
def get(request):
context={"token":"new"}
return render(request,template, context)
Maybe like this:
views.py
context={"token":"new"}
index.html
{% block content %}
<div id="app">
<div token="{{ token}}"></div>
<div>
<script src="build.js">`
{% endblock %}
in vue instance
beforeMount(){
this.whatever = document.getElementsByTagName('div')[1].getAttribute('token') || '';
}
The following method is a bit more declarative, using a named parameter in your main Vue component. Assuming you've injected context variable "token" into your django view context, you could do something like this in your django template:
<script>const jscontext={token: '{{ token }}'}</script>
<!--Could just have easily been simple variable. An object with
multiple properties could be used for a more comprehensive context-->
<div id="app"></div>
{% render_bundle 'app' %}
In App.vue you would add code to accept a property called token:
<script>
export default {
name: "app",
props: {
token: {
type: String,
required: true
}
}
}
</script>
And then in your main.js (or whatever creates your Vue component, probably build.js in your example) you would invoke the component with the token property from the jscontext object you created in the earlier template script
new Vue({
router,
render: h => h(App, {props: {token:jscontext.token}})
}).$mount('#app')
token will now be made available to App.vue via its property, so can be rendered with {{ token }} or accessed in code with this.token, etc. As per previous comments, the token would be visible in the source.
Lets assume you have var1 in django template that needs to be passed to vuejs var. Js file is loaded in the end of the template hence we cannot set vuejs var in html.
In html head:
<script type="text/javascript">
var1="{{var1}}"; {# double quotes are important#}
</script>
In js file:
var app = new Vue({
el: '#app',
data: {
var1=''
},
methods:{
},
mounted:function(){
this.var1=var1; // var1 was created in html head tag
},
delimiters: ["[[","]]"],
});
var1="{{var1 | safe}}";