Django Vite Vue

[hendrik1120]

Hello, I have been looking for a way to properly bundle and also manage packages in django for months, but this is the best solution so far.
I have some experience using Django, but just started out with Vue.
The tutorial was excellent, but left me with some questions while trying to integrate this in a side project.

The first question I stumbled upon is how can I reuse components like a navbar over multiple pages in this setup?
I am mainly using tailwindcss, so I want to move all my django templates to Vue to minify the css properly.
Searching for tutorials on multipage vue3 led me to nothing helpful.

The next is thing is translation.
Since I can't use {% trans %} in vue files, do I need to use more libraries to export django translation to js translation?

Also, referencing urls got more tedious since I found no way to pass {% url %} to vue.

It would be great if you could help me with some of my questions.
There are really a lot of drawbacks I didn't think of when using django with modern js.

[aliceridgway]

Hi,

Sorry for the delayed response. I need to set up some notifications.

This setup lends itself to declaring separate Vue apps per page. To have multiple pages within the same Vue app, then I think you'd be better off creating an SPA and use Vue router. Using Vue within a Django template best suits the use case where you want to add small amounts of interactivity to a page without the full effort of creating an SPA.

I'm not yet familiar with translation.

As for passing in {% url %}, you can create a script tag with the URL as the content. I have created a demo in this branch. This replicates the result of a json_script filter.

<script id="url">
    "{% url 'some-page' %}"
</script>

It lacks the convenience of the URL tags but will save you from hard-coding them.

[hendrik1120]

Hi, thanks for your response. I have been tinkering around with this for a while now and solved almost all my previous problems.
I think that's a pretty good solution to use the url tag, but I still haven't figured out an easy way to use translation.

Isn't also possible to avoid all the django tag passing to js and use vue directly in the template, as it is possible with the vue esm package? I would lose the vue sfc, but could use django tags directly. Vue also has the option to configure the delimiters from { variable } to something like [ variable ] so that vue doesn't interfere with django.
Although, I only got this working using a cdn and not with vite.
Maybe you could look into this if you have some time.