How to use Vue with Django (including Auth) 🔒

We'll set up a Vue.js frontend + a Django backend. Strong foundations for your production app.
We'll also add auth 🔒 Simple and robust. No tokens, no DRF, no JWT.
I'll also show you 5 things that you'll always want to add, including:
1. Page routing (using Vue Router)
2. Simple centralised state management (using Pinia)
3. Persistent state (e.g., refreshing the page and still being logged in) using simple local storage
4. How to register new users, with Vue and Django
5. Secure and simple auth. No tokens, no DRF.
✍️ Wriitten guide here: www.photondesi...
📮 Get all my free weekly content here: www.photondesi...

[@color4bg]

Super thank you for such detailed and nice tutorial 👏

[@Jeremy.Beutler]

Thank you, this is very helpful for leveraging the power of both vue and django. One question: Does localstorage leave a security vulnerability since the user can modify its state?

[@illuposerioso]

this is exacty what i was lookin for.. thanks mate!!

[@tomdekan]

Great. You're welcome!

[@gtraqs_]

Hi Tom, thank you kindly for this video. I was wondering if you could talk about two topics:
- Auth considerations with django ninja. Common security pitfalls especially.
- A walkthrough of deploying django to prod.
Thanks!

[@tomdekan]

You’re welcome and great suggestion! Might make a few good shorts. Thanks 🙂

[@RobertoMaurizzi]

I still insist that using two separate servers when in dev complicates your everyday life.
It's much better to set up django-vite then serve everything from Django's server. That way you don't need CORS and you don't need to change URLs when deploying to production (you simply fetch("/auth/login") and it works).
You could even use regular Django authentication with cookies and "convince" Vite's HTML plugin to save the result of its processing to a template folder, so you can have part of your webpage containing data that come straight from the backend (Vite won't be able to process that code, but it's still very useful)

[@tomdekan]

Two separate servers is definitely more complex than a single server.
Though, I’ve used a similar hybrid approach to that which you suggest multiple times and don’t enjoy it. I find sending a mix of JSON and HTML from Django to the same page becomes messy quickly.
But this is my preference. Great if the hybrid approach works well for you Roberto.

[@igribeiro_]

Thanks for create this tutorial.

[@tomdekan]

You’re welcome 🙂