4

There are plenty of tutorials and helpful posts how to use Django and Vue properly (in various options) all over the Internet. But I didn't find a single one who describes how to create a Django application which consists of more than one app, each having it's own part of the Vue frontend.

I am creating a Django application with a Vue frontend, and it will have a lot of apps that can be plugged into the main system very easily (using a custom framework). But this only is the backend. I'd like to enable each Django app for having a "plugin" part of the frontend as well: e.g. a set of Vue components that are rendered "dynamically" in the frontend when this app is added in INSTALLED_APPS.

  • How can I provide "plugin hooks" in Vue to load those components? All the things I have seen (dynamic/lazy component loading with webpack using webpack-loader, etc.) is not what I want. It only describes how to load a component that is predefined later in the http request timeline.

  • How am I supposed to "merge" all the components? Can I simply create components in static folders and let ./manage.py collectstatic do the magic?

It doesn't matter if the application is a SPA or maybe I have to use Django templates (with Vue components included) - both would be a viable method.

Maybe this even is a webpack question and should be: How do I bring Vue (or React, etc) to collect its sources from different subdirectories like foo_app/static/, blah_app/static/, bar_app/static - is there a way to tell Vue/Webpack/etc to search in myproject/*/static for Vue components to merge? And can I include "all components" (dynamical amount) than in another component, which is needed for such a system?

Can anyone enlighten me here - is that completely impossible? Or am I thinking in the wrong direction?

Thanks.

nerdoc
  • 1,044
  • 10
  • 28
  • 1
    nobody knows an answer?? really? I'm always impressed that I'm the only one needing this? – nerdoc Sep 25 '18 at 16:20

1 Answers1

2

I have a couple of VueJS apps in my django site and I'm planning to add more. I bundle them with webpack with the help of django-webpack-loader. https://github.com/owais/django-webpack-loader

pedrotech
  • 1,359
  • 10
  • 19
  • Eh - sure to use webpack-loader. But could you give an example how to "bundle" multiple Django apps' frontends to one global frontend? Because that's the question. I'll add that to my original question. – nerdoc Nov 03 '18 at 15:53
  • "a couple of VueJS apps" - what do you mean with VueJS apps? independent apps, all using the Django backend API? Or do you mean "Django apps with a VueJs frontend"? – nerdoc Jul 18 '19 at 18:29
  • I meant independent vue apps which are bootstrapped by django views/templates. And they used django APIs. However I abandoned that approach. Currently I develop full vue apps (SPA or nuxt) and django is used as API server. – pedrotech Jul 20 '19 at 23:49
  • Ok, never seen that before, and that's exactly what I want. "Independent" Vue apps that are bootstrapped by Django templates. Have you got any code to share ;-) ? – nerdoc Jul 22 '19 at 08:56
  • I used django-webpack-loader. On template bootstrap: https://github.com/owais/django-webpack-loader#templates Each indipendent app is associated to a webpack project. https://github.com/owais/django-webpack-loader#multiple-webpack-projects – pedrotech Jul 24 '19 at 19:15
  • I see. but this are, like you said, independent apps. So Django does the URL routing, and each app has it's own router for it's sub-URLs, right? AND, most interestingly: the apps don't interfere with each other, right? so no "plugin" system on the client side, where some Vue apps use "hooks" from another Vue app? – nerdoc Jul 26 '19 at 10:38
  • No plugin system. I did what django-webpack-loader allows to do. – pedrotech Jul 31 '19 at 01:33