Any resources/examples you'd recommend for a Vue frontend w/django? I've been pretty firmly in backend land for a while and would to experiment with the other half of the puzzle!
I'll preface all of this with a couple esoteric design goals that I had in mind:
1. I actually _want_ an SPA. You might not need an SPA, if you don't need one then Vue/React/etc are overkill, etc.
2. I want to power as much of the SPA as I can using the same REST API as my core product, both for dogfooding reasons and for consolidation. Many people might argue that this is a bad idea.
---
With that in mind, some specific packages that I highly recommend:
2. Some sort of way to get type information (if you're using TypeScript) into the frontend. I use a frankensteined system of the OpenAPI spec that django-ninja generates + openapi-typescript (https://github.com/drwpow/openapi-typescript). This means when I add, say, a new field to a response in Django, I immediately get typechecking for it in Vue — which has been _tremendously_ useful.
If you really need VueJs in the frontend, consider, that you can simple serve the VueJs on any page where it is actually needed. VueJs does not necessarily mean you must create a SPA. VueJs can be delivered like any other script and this is often the easiest way without having to commit to build a full blown SPA.
jmduke|2 years ago
1. I actually _want_ an SPA. You might not need an SPA, if you don't need one then Vue/React/etc are overkill, etc.
2. I want to power as much of the SPA as I can using the same REST API as my core product, both for dogfooding reasons and for consolidation. Many people might argue that this is a bad idea.
---
With that in mind, some specific packages that I highly recommend:
1. Django-vite (https://github.com/MrBin99/django-vite). This makes it very easy to serve an SPA from the actual django response/request model
2. Some sort of way to get type information (if you're using TypeScript) into the frontend. I use a frankensteined system of the OpenAPI spec that django-ninja generates + openapi-typescript (https://github.com/drwpow/openapi-typescript). This means when I add, say, a new field to a response in Django, I immediately get typechecking for it in Vue — which has been _tremendously_ useful.
3. Django-typescript-routes (a package I extracted and open-sourced!: https://github.com/buttondown-email/django-typescript-routes) which gives your front-end routing information based on the Django router.
zelphirkalt|2 years ago