Django Templates with Vue

I'm trying to integrate vue-components into django-templates. The basic setup did work, but I'm stacked with a component which needs an import itself.

Here is the component (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>

So, the 2 imports:

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

are triggering the error in the browser's console:

Cannot use import statement outside a module

What is the proper way to use the imports?

I'm calling the dropdown.html from 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>

I think this happens because vue cdn should be imported into dropdown.html.Please try this fix and let me know if it works.

Thank you

Back to Top