Trying to get the esm-bundler to render my templates in-browser

[daireh]

I'm looking for some advice on using the runtime compiler to render Vue 3 elements in the browser with Django 5.0.1. Django handles the backend and uses static html files to display the information to the user. With Vue 2, I was able to set runtimeCompiler: true, but this isn't supported with Vue 3 and Vite. I followed this discussion in the Vite repo on GitHub as it describes the problem I'm having, but after making all the necessary changes, the Vue components don't get rendered in the browser.

If I inspect the element in the developer console, I can see the element that should be displayed on the screen, it's nested in a #document_fragment element. I seem to be missing a step that I can't seem to find in the documentation. Can anyone share any insight as to what I am missing or share any resources that might give me the information I need? Any resources I've found so far were either Vue 2 related or didn't solve my issue. I've included all the relevant code snippets but if you need to see anything else please let me know. Thanks in advance!

Element in the developer console:

<template>
	#document_fragment
		<q-toolbar class="text-primary">
                <q-btn flat="" round="" dense="" icon="menu">
	                <q-toolbar-title>Toolbar</q-toolbar-title>
                <q-btn flat="" round="" dense="" icon="more_vert"></q-btn>
	            </q-btn>
            </q-toolbar>
</template>

package.json:

{
  "name": "vuefiles",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
  },
  "dependencies": {
    "@quasar/extras": "^1.16.9",
    "quasar": "^2.14.2",
    "vue": "^3.4.15",
    "vue-template-compiler": "^2.6.14",
  },
  "devDependencies": {
    "@quasar/vite-plugin": "^1.6.0",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vue/compiler-sfc": "^3.0.5",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.7.1",
    "glob": "^10.3.10",
    "node-sass": "^9.0.0",
    "vite": "^5.0.10",
    "vite-plugin-vue-devtools": "^7.0.10",
    "vue-template-compiler": "^2.6.14",
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
}

vite.conf.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import VueDevTools from 'vite-plugin-vue-devtools'
import path from "path";
import {glob} from "glob";

export default defineConfig({
  plugins: [
    vue({
      template: {
        transformAssetUrls,
        compilerOptions: {
            delimiters: ['${', '}']
        }
      }
    }),
    VueDevTools(),
    quasar({
      sassVariables: 'src/quasar-variables.sass'
    })
  ],
  __VUE_PROD_DEVTOOLS__: 'true',
  outputDir: '../app/static/dist',
  
  resolve: {
      alias: {
          // vue: 'vue/dist/vue.esm-bundler.js',
          vue: path.resolve(__dirname, 'node_modules', 'vue', 'dist', 'vue.esm-bundler.js'),
      }
  },
  devServer: {
    devMiddleware: {
      writeToDisk: true,
    },
      hot: false,
      liveReload: true,
  },
  css:{
    extract: true  
  },
  build: {
    sourcemap: true,
    emptyOutDir: true,
    // Specify the output directory
    outDir: path.join(__dirname, "../app/static/dist"),
    // Change default 'assets' to 'js'
    assetsDir: 'js',
    rollupOptions: {
      input: glob.sync(path.resolve(__dirname, "src", "*.js")),      
      output: {
        sourcemapBaseUrl: 'http://localhost',
        entryFileNames: `js/[name].js`,
        chunkFileNames: `js/[name].js`,
        assetFileNames: `css/[name].[ext]`
      }
    },
  },
},
{
  mode: 'development'
})

main.js:

import { createApp } from 'vue'
// import { createApp } from 'vue/dist/vue.esm-bundler.js'
import { Quasar } from 'quasar'
import '@quasar/extras/material-icons/material-icons.css'
import 'quasar/src/css/index.sass'
import App from './App.vue'

const app = createApp(App)
app.config.devtools = true
app.use(Quasar, {
  config: {
    extras: [
      'material-icons'
    ]
  }
})

app.mount('#app')

base.html:

<!DOCTYPE html>
<html>
<head>
    {% load static %}
    {% load custom_filters %}
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.png' %}" />
    <script src="{% static 'dist/js/main.js' %}"></script>
    <link rel="stylesheet" href="{% static 'dist/css/App.css' %}">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"
        type="text/css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% block head %}
    {% endblock %}
    <title>{% block title %}Vue 3 with Vite{% endblock %}</title>
</head>
<body>
    <div id="app">
        <template>
            <q-toolbar class="text-primary">
                <q-btn flat round dense icon="menu" />
                <q-toolbar-title>
                    Toolbar
                </q-toolbar-title>
                <q-btn flat round dense icon="more_vert" />
            </q-toolbar>
        </template>
    </div>

    {% block content %}
    {% endblock %}
</body>
</html>

{% block script %}
{% endblock %}

[jackchoumine]

have you any solution?