How to import a variable from django into vue.js instance

Question

I want to import a variable from a django generated html page into my App.vue component.

My goal is to pass a String, which represent the user AuthGroup, eg. 'milkman', 'hairdresser' or 'supplier'

The error Message looks like this:

Module parse failed: Unexpected token (1:1)

You may need an appropriate loader to handle this file type, currently no loaders are configured to > process this file. See https://webpack.js.org/concepts#loaders {% extends 'base.html' %} | {% load render_bundle from webpack_loader %} | {% load navtag %}

frontend.html

{% extends 'base.html' %}
{% load render_bundle from webpack_loader %}
{% load navtag %}

{% block head %}
<title>title</title>
<script>
    const test = "{{ auth_group }}" // variable/string needed in App.vue
</script>
{% endblock %}

[...]
{% block content_vue %}
    <div id="app">
         <app></app>
    </div>
    {% render_bundle 'app' %}
{% endblock %}

I can't figure out how to modify webpack or find a way to import the variable from django into the vue project. FYI: The vue project is a small part of a large Django environment.

wittgenstein · Answer 1 · 2020-12-10T10:18:00.380

for now I use the user session and get the data via window into the vue environment:

// frontend.html
<script>
  window.testToken = "{{ auth_group }}"
</script>

// 1. App.vue
async created() {                          
  store.dispatch('store/setTest')
}
// 2. in store
actions: {
  setTest({commit}) {
    commit('setToken')
  }
}
// 3. trigger mutation
mutations: {
  setToken(state) {
    state.token = testToken
  }
}
// 4. state
state: {
  token: '' // String from django is here
}

is there a better solution?

How to import a variable from django into vue.js instance

1 Answers1