Шаблоны Django с Vue

Я пытаюсь интегрировать vue-компоненты в django-шаблоны. Базовая установка сработала, но я столкнулся с компонентом, который сам требует импорта.

Вот компонент (vue/dropdown.html):

<div id="app">
  <template>
    ...
  </template>
</div>

<script setup>

  import { computed, ref } from 'vue'
  import {CheckIcon, ChevronUpDownIcon} from '@heroicons/vue/20/solid'

  const query =ref('')
  const selectedPerson = ref(null)
  ...

  var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app',
    data: {
      message: 'Hello Vue!',
    },
  });
</script>

Итак, 2 импорта:

import {computed, ref} from Vue
import {CheckIcon, ChevronUpDownIcon} from '@heroicons/vue/20/solid'

вызывают ошибку в консоли браузера:

Cannot use import statement outside a module

Каким образом правильно использовать импорт?

Я вызываю dropdown.html из base.html:

<html lang="{{ LANGUAGE_CODE }}">
<head>...</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
{% include 'vue/dropdown.html' %}
</body>
</html>

Я думаю, это происходит потому, что vue cdn должен быть импортирован в dropdown.html.Пожалуйста, попробуйте это исправление и дайте мне знать, если оно работает.

Спасибо

Вернуться на верх