Django Vue Vuetify

This project is a minimal example for an application using Vue, Vuetify, and Django.

Vue and Django are clearly separated in this project. Vue, Npm 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.

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 npm run build)

Setup Template

Setup

$ npm install
$ pip install
$ python manage.py migrate
$ python manage.py loaddata fixtures.json

Running Development Servers

$ python manage.py runserver

From another tab in the same directory:

$ npm run 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.

$ npm run build
$ python manage.py runserver
$ python manage.py loaddata fixtures.json