Note: This tutorial is a couple of years old and uses out of date versions of both Django and Vue. I don't currently have enough time to go throug...
For further actions, you may consider blocking this person and/or reporting abuse
Here's another approach that I wrote about. If you're curious about how to combine Django + Vue without doing a Single Page Aapp, you may want to check it out: hackernoon.com/reconciling-djangos...
Is there a way you can use Vue as "modular" frontend? I always see SPA frontends as monolithic app that consume a DjangoRestFramework API which could be built by several Django apps on the backend.
What I'd like to build is a Django app that "brings in" it's own Vue.js frontend "plugin" which is then part of the whole frontend.
Never saw this - Any ideas? I already tried, but without success so far.
Hmmm... Seems like you could create a Django app as a plugin that provided basic view Classes that rendered given data in a Vue-ish way (e.g. generic detail view, list view, edit view, etc.). Then, in your app's views, you could just use your
VueListView-- orListVue, if you will -- instead of Django's built-inListViewclass? Something like that? I'm not sure. I'd have to dig into it.I thought about another way, without (or with only little help from) Django's templating system. I think that the way "compiling" Vue's parts must be to collect all frontend data that is spread over all Django apps ("plugins") in a "collectstatic" hook or the like, and then It is sent to the client as one.
"Compiling" doesn't have to be on each page call - it's, as I mentioned, like a "collectstatic" command. I imagine something like './manage.py collectvue' which does a distributed browserify (possible?) or webpack collecting, compiling the whole Vue frontend from different Django apps together into the /static folder. Then Django can start as normal and deliver that folder to the client, where Vue (on client side) does the rendering. So it would be kind of a SPA, but put together from it's pieces on the server.
That's a big dream of mine, and I (as always) don't know why the heck nobody at all hasn't done this before.
The only thing I could think of is that it is maybe a BadIdea™️ ;-)
Yeah, that sounds like a plain ole Vue app that could be bundled and served on its own Express server. Then you wouldn’t have to incorporate it into Django at all! You could keep your python and JavaScript separate?
eh, yes, but separated into "django-app-bundled" chunks. Who is serving it then, I wouldn't care.
Hey hey, I was here one or two years ago, when I began with your (this) tutorial, to learn Vue+Django development.
Now I come back to share my results. This is a boilerplate I made in the last summer, which helps with the development (based on the repo you shared) and deployment. I thought you, and other people coming here, might really be interested in it:
gitlab.com/electrocnic/vue-django-...
This is also a big thank you for this tutorial and your efforts!
Oh nice! Awesome! I’m so glad I was able to be a part of your journey! Thanks for sharing 😁
This is a great! I have a django project where I want to redo the front-end as an SPA. I've been learning Vue lately but have just started to research how to get it hooked up to DRF. Can't wait for the next parts! :)
Ryan, Thank You very much for this tutorial.
I did all you have mentioned in this first part, but now, although webpack says Compiled successfully I'm getting error in firefox debugger:
Cannot GET /app.js%20line%20654%20%3E%20eval
Please can you help me.
Thanks in advance, Ogi
After I made further customizations according to second tutorial, all is working great. So first part of this text can be forgotten.
Thank you very much also for the third part.
Glad I could help! I'm trying to get the fourth part done soon. :)
so great !!! Thank you so much
Super helpful -- thank you!
I have some problems with the lint thingy.. where should I modify it to have it four spaces instead of 2?
In your project root, there's a file called
eslintrc.js. In there, you should add the rule for spaces:Also, if you use
editorconfig, you can set that option in your.editorconfigfile:I'm not positive, but I think that should do it.
thanks man! i'll try it again :)