Django Vue Template

Django Rest + Vue JS Template
Alternatives To Django Vue Template
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Free Programming Books Zh_cn100,748
3 days ago29gpl-3.0
:books: 免费的计算机编程类中文书籍,欢迎投稿
Awesome Cheatsheets32,908
2 days ago85mitJavaScript
👩‍💻👨‍💻 Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
3 months ago113mitPython
open source online judge based on Vue, Django and Docker. | 青岛大学开源 Online Judge | QQ群 496710125 | [email protected]
82 months ago47December 30, 202154mitPython
Distributed Crawler Management Framework Based on Scrapy, Scrapyd, Django and Vue.js
Simpleui2,8731329 days ago107June 13, 202216mitPython
A modern theme based on vue+element-ui for django admin.一款基于vue+element-ui的django admin现代化主题。全球20000+网站都在使用!喜欢可以点个star✨
4 months ago49bsd-2-clausePython
Pinry, a tiling image board system for people who want to save, tag, and share images, videos and webpages in an easy to skim through format. It's open-source and self-hosted.
8 hours ago82iscPython
Mail hosting made simple
a month ago11mitPython
基于django的工作流引擎,工单(a workflow engine base on django python)
3 days ago117May 15, 2022206otherPython
A remote monitoring & management tool, built with Django, Vue and Go.
Django Vue Template1,453
4 months ago41mitPython
Django Rest + Vue JS Template
Alternatives To Django Vue Template
Select To Compare

Alternative Project Comparisons

Django Vue Template ✌️ 🐍

Vue Logo Django Logo

This template is a minimal example for an application using Vue and Django.

Vue and Django are clearly separated in this project. Vue, Yarn and Webpack handles all frontend logic and bundling assessments. Django and Django REST framework to manage Data Models, Web API and serve static files.

While it's possible to add endpoints to serve django-rendered html responses, the intention is to use Django primarily for the backend, and have view rendering and routing and handled by Vue + Vue Router as a Single Page Application (SPA).

Out of the box, Django will serve the application entry point (index.html + bundled assets) at / , data at /api/, and static files at /static/. Django admin panel is also available at /admin/ and can be extended as needed.

The application templates from Vue CLI create and Django createproject are kept as close as possible to their original state, except where a different configuration is needed for better integration of the two frameworks.


If this setup is not what you are looking for, you might want look at other similar projects:

Prefer Flask? Checkout my gtalarico/flask-vuejs-template


Live Demo


  • Django
  • Django REST framework
  • Django Whitenoise, CDN Ready
  • Vue CLI 3
  • Vue Router
  • Vuex
  • Gunicorn
  • Configuration for Heroku Deployment

Template Structure

Location Content
/backend Django Project & Backend Config
/backend/api Django App (/api)
/src Vue App .
/src/main.js JS Application Entry Point
/public/index.html Html Application Entry Point (/)
/public/static Static Assets
/dist/ Bundled Assets Output (generated at yarn build)


Before getting started you should have the following installed and running:

Setup Template

$ git clone
$ cd django-vue-template


$ yarn install
$ pipenv install --dev && pipenv shell
$ python migrate

Running Development Servers

$ python runserver

From another tab in the same directory:

$ yarn serve

The Vue application will be served from localhost:8080 and the Django API and static files will be served from localhost:8000.

The dual dev server setup allows you to take advantage of webpack's development server with hot module replacement. Proxy config in vue.config.js is used to route the requests back to django's API on port 8000.

If you would rather run a single dev server, you can run Django's development server only on :8000, and you have to build the Vue app first and the page will not reload on changes.

$ yarn build
$ python runserver

Pycharm additional configuration

Follow this guide to ensure you have pipenv setup

Click "Edit Configurations"

Select Django Server under templates

Click + to create a config from the templates

In Environment variables add


Click Apply then Ok


Heroku Server

$ heroku apps:create django-vue-template-demo
$ heroku git:remote --app django-vue-template-demo
$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
$ heroku addons:create heroku-postgresql:hobby-dev
$ heroku config:set
$ heroku config:set DJANGO_SECRET_KEY='...(your django SECRET_KEY value)...'

$ git push heroku

Heroku's nodejs buildpack will handle install for all the dependencies from the package.json file. It will then trigger the postinstall command which calls yarn build. This will create the bundled dist folder which will be served by whitenoise.

The python buildpack will detect the Pipfile and install all the python dependencies.

The Procfile will run Django migrations and then launch Django'S app using gunicorn, as recommended by heroku.

Heroku One Click Deploy


Static Assets

See and vue.config.js for notes on static assets strategy.

This template implements the approach suggested by Whitenoise Django. For more details see WhiteNoise Documentation

It uses Django Whitenoise to serve all static files and Vue bundled files at /static/. While it might seem inefficient, the issue is immediately solved by adding a CDN with Cloudfront or similar. Use vue.config.js > baseUrl option to set point all your assets to the CDN, and then set your CDN's origin back to your domains /static url.

Whitenoise will serve static files to your CDN once, but then those assets are cached and served directly by the CDN.

This allows for an extremely simple setup without the need for a separate static server.

Cloudfront Setup Wiki

Popular Vue Projects
Popular Django Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Rest Api
Django Rest Framework
Vue Cli