This template is a minimal example for an application using Vue and Django.
It's setup to have a clear separation: use Vue to handle all frontend logic and assets bundling, and use Django with Django REST framework to manage a 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).
If this setup is not what you are looking for, you might want look at other similar projects:
- Django
- Django REST framework
- Vue CLI 3
- Vue Router
- Vuex
| Location | Content |
|---|---|
/auth_project |
Django Project & Backend Config |
/auth_project/api |
Django App (/api) |
frontend/src |
Vue App . |
frontend//src/main.js |
JS Application Entry Point |
/public/index.html |
Html Application Entry Point (/) |
Before getting started you should have the following installed and running:
- Vue CLI 3 - instructions
- Python 3 - instructions
- Pipenv - instructions
$ git clone https://github.com/vzvanov/django_vue_auth
$ cd django_vue_auth
Setup
$ python -m venv env_auth
$ env_auth\Scripts\activate.bat
$ pip install -r requirements.txt
$ python manage.py migrate
$ python manage.py createsuperuser
$ python manage.py runserver
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, but you have to build build the Vue app first
and the page will not reload on changes.
$ npm run serve
$ python manage.py runserver