I recently got a good question from a reader:
Using Vue CLI, how we can use Django data in Vue? Suppose I have a pandas dataframe or dictionary I want to pass to the Vue app, how to do it?
Two Approaches to Passing Data
If you’re using Vue with Django as I’ve described, there are two ways to pass data to your components:
1. Expose an API for your data and use fetch or axios inside your Vue component. (Usually inside the mounted() method)
2. Pass the data in via the Django view/template and then set it as a prop on your vue component. For instance
def my_view(request): data = build_your_data() return render(request, ‘test.html’, {‘data’: data}
Then in test.html:
And your Vue component:
{{ data }}Like what you’ve read here?
I share my best content with my email list for free.