I'm just getting started with Vue and trying to sprinkle some reactivity here and there in a Jinja-templated website. This is going to be a multi-page app for the time being. For one of the pages I have an index.html, a main.ts and an App.vue. That index.html file is a partial file (so not a full HTML page) with the usual <script type="module" src="./main.ts"></script>. I can successfully build this using Vite and everything works functionally. However, Vite places the <script> tag all the way at the top of the file. After all of the Jinja templates are rendered, this results in the <script> tag appearing above <!DOCTYPE html>, which makes the page invalid. This is probably because it's a partial HTML file and thus Vite doesn't find a body or a head to insert the <script> tag into. Is there a way to tell Vite the location inside the file where it should inject the <script> tag? Perhaps there's a way to tell it to just rewrite it in-place?
#How can I instruct Vite to inject the script tag at a different location?
hollow grotto
hollow grotto
For now, I've written a really ugly transformIndexHtml plugin that manually moves the <script> tag to the right spot. I'd still like to know if there's a cleaner built-in way to do this though