How to show vue js variables in django

I've this simple code in a **django **

in test.html:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">the message:{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

in urls.py:

urlpatterns = [
    path('test', dashboard_views.test,name='test'),

in views.py

def test(request):
    return render(request,"test.html")

output on screen: the message:

how can I fix this to show "Hello Vue!"

Back to Top