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
/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
/backendDjango Project & Backend Config
/backend/apiDjango App (
/srcVue App .
/src/main.jsJS Application Entry Point
/public/index.htmlHtml Application Entry Point (
/dist/Bundled Assets Output (generated at
Before getting started you should have the following installed and running:
$ git clone https://github.com/gtalarico/django-vue-template $ cd django-vue-template
$ yarn install $ pipenv install --dev && pipenv shell $ python manage.py migrate
$ python manage.py runserver
From another tab in the same directory:
$ yarn serve
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, but you have to build build the Vue app first
and the page will not reload on changes.
$ yarn build $ python manage.py runserver
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 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 DJANGO_SETTINGS_MODULE=backend.settings.prod $ 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
It will then trigger the
postinstall command which calls
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.
Procfile will run Django migrations and then launch Django'S app using gunicorn, as recommended by heroku.
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
While it might seem inefficient, the issue is immediately solved by adding a CDN
with Cloudfront or similar.
baseUrl option to set point all your assets to the CDN,
and then set your CDN's origin back to your domains
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.