Проблема передачи данных из шаблона Django в приложение vue.js

Я пытаюсь заставить Django и Vue общаться. Я установил Vue-Cli с Vue3. Приложение Vue хорошо отображается в шаблоне Django, но я не могу передать данные (данные Django, но также простую строку для тестирования) в приложение vue.

App.vue

<template>
    <h1>{{ msg }} world</h1>
</template>

<script>
export default {
    name: 'App',
    props: {
        msg: {
            type: String,
            default: 'test'
        }
    }
}
</script>

<style scoped>

</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Этот код показывает "test world", вместо "Hello world".

Заранее благодарю за помощь.

Разделитель по умолчанию для шаблона Vue и Django один и тот же, поэтому вы должны изменить его, чтобы он работал.

По умолчанию: ["{{", "}}"]

изменить разделитель: 

<div id="app">
  <h1>[[ message ]]</h1>
</div>

<script>
var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
Вернуться на верх