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">

<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!',

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 }}">
<script src=""></script>
{% include 'vue/dropdown.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