Discussion on "Notes from a course that helped me integrate django and Vue"

Sambhavi Dhanabalan · 2023-07-08T12:29:15.391Z

Introduction In one of the projects that I'm working on, there was a need to integrate django and Vue. There are a lot of articles, blog posts and courses on integrating both. Most of them use the strict frontend and backend approach i.e. Vue takes c...

I like your approach, thanks for sharing it. Imho this makes so much more sense, it leverages the power of django, allows for "static" pages or MPA instead of SPA when needed without preventing to go full SPA. I believe this is also the way web dev was intended we just took the SPA hype a bit to far imho.

Many a time I too felt that the hype around SPA was a lot. Since I never went deeper that route, I was never loud about that!

In fact, at one point in time, I decided to pivot to using HTMX instead of Vue, as I thought it's relatively easier and I get what I want in terms of reactivity. For a few other reasons, that never saw the horizon.

Hi Sambhavi, thank you for this post. :) I was looking for this integration and I managed to use it in my first test now. But I have one problem. Since I'm new to Django and Vue (I'm not a programmer at all) it's not easy for me to discover the reason. HMR is not working. I can see VITE updating the static files and I can see in my console logs, that my browser is missing the previous static files, but there's no update till I reload the page manually. There are a lot of problems and workarounds regarding HMR, but I don't know what to do. Are you using HMR in your project and how does it work? Thanks a lot! :)

Hey Christian S,

Glad to know that my post was a bit helpful. yes, I do use HMR and usually it does not give a lot of problems. Utmost I may have to restart my server when replacement does not happen. Let me try refreshing my memory for other options that I usually do.

Meanwhile I found this post that speaks about HMR issues and how to solve them. Kindly check whether it gives some directions.

medium.com/geekculture/hot-reload-does-not-work-i…

Another link that may be of some help: vitejs.dev/guide/troubleshooting

Let me know how it goes.

I Sambhavi, I'm Alfonso. I've come to this tutorial because I heard a podcast (Pybytes) which took me to your Linkdn and finally to here. I followed all the steps because I am interested in how Vue.js is mounted in Django without using api so as a feedback, I want to mention the following:

Let clear that is necessary to install pinia and axios, so then, they will be in the package.json
Mention that has to be created the store.js file in the frontend folder with the information that is in the repo
Mention that is necessary add the context_processors path to the settings.
Edit the App.vue file in order to reach CreateForm.vue

I appreciate the way you associated vue.js with django as this approach is not common (AFAIK)

Thanks AlfonsoAreizaG for the detailed feedback. When I was replicating the steps today, I too realized that I'd missed to mention a few (same as you've highlighted) steps. Let me see if I can update the post.

AlfonsoAreizaG, I updated your feedback, except for store.js I suppose. That's not a mandatory step as initially I didn't choose Pinia while I created the project. Thanks again!

Discussion

Notes from a course that helped me integrate django and Vue

Responses(3)

Recent in Forum

Search Hashnode

Notes from a course that helped me integrate django and Vue

Responses(3)

Recent in Forum