vue js + django app architecture

Question

I've found a few posts about this. But I'm still confused.
I want to use django rest framework api to be consumed by vue. My questions:

1. Should I use django templates at all? I guess not, cause the django templates syntax clashes with vue. But still I need to serve templates - should I just use static templates with apache?

2. Assuming I do use static templates, how can I prerender pages like with django templates?
   I mean, with django I have a url like /resource?id=5,
   But with rest api, it will be vue responsibility to fetch the id=5 resource from the url and to do the rendering, But I don't like the need for extra xhr.

3. It seems that all the docs assume I use node.js, I don't. Do I have to use another node.js server in addition to the django apache server?

4. Does vue.js with webpack/npm force a specific app folder structure? How that works with the normal django project structure?

Answer 1

The first thing to know about vue is that it scales really well. You can do entire single page applications with it and let vue drive your entire frontend or you can use it to just build single components with more interactivity and have the rest rendered with something else. The answer to your question depends on what you go for. Typically an SPA (Single Page Application) feels more modern and from my experience, produces a cleaner seperation of concerns, so personally I'd go with that, but I'll describe both strategies:

Building an SPA:

1. No, in this case not. When building an SPA your back- and frontend are completely decoupled. You'll render everything with vue and use the vue router for routing. Django shouldn't need to know about your frontend, it should just expose an API (REST for example). In this case your frontend becomes one implementation of that API, using asynchronous data fetching, for example with axios, to get the necessary models from your Django Backend. Also, there is no need for django to serve your templates, just build the vue project and put the files on a server.

2. The vue router has a nice encapsulation for these things, you don't have to get the params from the url yourself, it'll handle that for you and pass those params directly to your component, see here. And yes, there will be a need for extra XHR, but consider the following scenario: When using django to render pages, django will output a way bigger html file than vue to begin with. So the "extra loading" that vue needs is just shifted a bit, but there's not a huge increase in traffic.

3. Vue is purely a frontend framework so it doesn't care what backend you're using. Because it's only frontend the output of webpack will be raw html, js and css. There is no need for a node server, anything that can deliver those files will do the job. However, becuase vue renders completly in the browser it's really hard for search engines to crawl your SPA. To work around that there's something called server-side rendering. If you feel that you need SEO you might want to check out Nuxt.js. When going for the server-side rendering approach you will need a node server, otherwhise not.

4. In the SPA scenario you don't care. In fact, the SPA can be on a completly different server and still function properly with your django backend, as it uses purely asynchronous calls to get all the data.

Using Vue just for single components:

1. In this case you want to use django to render most of your sites data. Only if you need interactivity or asynchronous calls you should write vue components. You can put those directly into your django templates, just keep in mind that the rendering of the components will be done completly in the users browser.

2. Even in this case the impact is little. Build your vue project with webpack, put the compiled js/css files in the assets folder of django (I'm not a django expert but it simply needs to be accessible for django). Then just make sure you're including all of them (have a look at the index.html header that vue build command produdces) in the header of your django template and make sure that the parent tag of your application has the correct id for vue to bootstrap the application, for example the default is: <div id="app">...</div> That's all.

Answer 2

Having just implemented a Vue+Django project myself, I can vouch for everything Philip Feldmann said in his detailed response.

I'll emphasize a point though that seems like it's little hazy from the question you're asking. From an architectural viewpoint, Vue and Vue's router are handling what you would traditionally associate with URL navigation and changes in the user's visual experience of your site/app.

On the Django side, you're essentially doing away with rendering all of the HTML. Rather, what you're mapping requests to via urls.py and traditional Django routing is Python code to generate and return the data consumed by your Vue application. So your requests that are mapped into your Django app return things like JSON, not fully formed web pages.

That's why you don't need conventional Django templates in the traditional sense. Instead, your Django methods that handle requests will do things like validating the request sent by your view parameters (usually a http POST request), making sure things like authentication and authorization are handled correctly, and then doing database model queries to get data to return via JSON or whatever serialization you're expecting on the client side, and Django becomes basically a back-end only solution.

Having been playing with this for quite a while, I'll tell you that using Django this way has been especially nice... The Django admin makes for a great place to work with the backend of the Vue app. I know a lot of people are hot for the Vue+Node setup, but if you're a Python guy and know a little about Django, this is a great alternative.