Pass Django Data into Vue component

When you set gridData and try to bind it to a Vue component it is not working because they have different contexts. When you dealing with Vue components you can only access data defined inside the Vue instance. Additionally, {{json_data|safe}} is vulnerable to XSS-type attacks.

However, it is very easy to safely pass data from Django to a Vue component, we just have to use the json_script filter and load the data in Vue's mounted hook.

In views.py just pass the list to the template, no need to use json.dumps():

class CurrentClassroomView(LoginRequiredMixin, CreateView):
    template_name = 'home/index.html'

    def get(self, request, *args, **kwargs):
        db_data = list(myData.objects.all().values())
        return render(request, self.template_name, {'json_data':db_data}) 

In index.html, we will use the json_script template tag to create a JSON formatted representation of json_data variable:

{% block content %}
{{ json_data|json_script:"json_data" }}

<div id="app">
    <table_component></table_component>
</div>  
{% end block %}

This will create a <script> block, e.g.:

<script id="json_data" type="application/json">{"hello": "world"}</script>

And finally, in myComponent.vue, we load, JSON-decode and set the data in the mounted hook:

export default {
  data() {
      return {
          tableData
      }
  },
  components: {
    Grid,
    ButtonModal
  },
  mounted() {
    this.tableData = JSON.parse(document.getElementById('json_data').textContent)
  },
}

I think you could just pass Django's server-side props straight into a child component that uses it. Mine's set up like this:

{% extends "ExpenseTracker/layout.html" %}
{% load static %}

{% block content %}
<div id="transactionlabeling_view"
>
 <transactions-table 
 :cached_items = "{{transactions}}"
 :account_types = "{{account_types}}"
 ></transactions-table>
</div>
{% endblock content %}

where there's a Vue component that is mounted on "#transactionlabeling_view". There, I imported the child component transactions-table where I passed on the server side props from Django view ({{transactions}} & {{account_types}}) into props inside transactions-table component (:cached_items & :account_types):

props:{
    cached_items:null,
    account_types:null
},

It's convenient that you don't have to JSON.parse those two props, vue got that job done for you. But you do need to use JSON.dump on {{transactions}} & {{account_types}} before passing it as context in the html. works like a charm, I use vue 3.2.6 and Django 4.1.6 and have vue installed inside django.

If you're using Vue 3 with SFC (single file component) syntax, the .provide() method (on createApp()) works really well for this purpose. In the Django template, pass your variables from the template (via Django context).

I'm using a hidden (and disabled) <input element within the div where the app will be mounted. I'm not sure if this is best practice, but it seems more secure to me...

What I like most about this approach is that the mounted component replaces the data-provider DOM element (the hidden input)!

<!-- This is the Django template file -->
<!-- vue_component_block.html -->
<div name="vue-component-mount-point">
  <input
    disabled
    type="hidden"
    data-url="{{ url_from_django_context }}"
    data-text="{{ link_text_from_django_context }}"
  />
</div>
<!-- This is the TS/JS bundle, it'll need to be included somewhere as well (after the above template content) -->
<script src="path/to/your/dist/folder/my_compiled_script.js"></script>

// This is a TS (can be JS) file compiled into the Django app
import { createApp } from "vue";
import MyLinkComponent from "./MyLinkComponent.vue";

const mountPoints: [HTMLElement] = document.querySelectorAll('[name="vue-component-mount-point"]')

mountPoints.forEach((mountPoint: HTMLElement) => {
  const children: HTMLCollection = mountPoint.children
  const dataInput: HTMLElement = children[0] as HTMLInputElement
  const dataset: Object = dataInput.dataset
  createApp(MyLinkComponent)
    .provide('dataset', dataset)
    .mount(mountPoint);
})

Then, in the component's .vue file, I'll use inject() to grab the data from the provider (using the same dataset key).

<template>
  <MyLinkComponent
    :href="dataset['url']"
  >{{ dataset['text'] }}</MyLinkComponent>
</template>

<script setup lang="ts">
import { inject } from 'vue'
const dataset = inject('dataset')
</script>