Overview

The Django Vue Template is a minimal example for an application using Vue and Django. It separates Vue and Django in the project, with Vue, Yarn, and Webpack handling frontend logic and bundling assessments, while Django and Django REST framework manage Data Models, Web API, and serve static files. The intention is to use Django primarily for the backend, with view rendering and routing handled by Vue and Vue Router as a Single Page Application (SPA).

Features

• Clearly separate Vue and Django in the project
• Use of Vue, Yarn, and Webpack for frontend logic and bundling
• Use of Django and Django REST framework for managing Data Models, Web API, and serving static files
• Support for adding endpoints to serve django-rendered HTML responses
• Ability to use Django admin panel for backend management and extension
• Integration of Vue CLI 3, Vue Router, Vuex, and Gunicorn
• Configuration for Heroku Deployment

Installation

Before getting started, make sure you have the following installed and running:

• Yarn
• Vue CLI 3
• Python 3
• Pipenv

To set up the template, follow these steps:

1. Clone the repository.
2. Install the dependencies by running the following command in the project’s root directory:

   yarn install
   

3. Set up the Python environment by running the following commands in the project’s root directory:

   pipenv install --dev
   pipenv shell
   

4. Apply Django migrations by running the following command in the project’s root directory:

   python manage.py migrate
   

Summary

The Django Vue Template provides a minimal example for integrating Vue and Django in an application. It separates the frontend and backend logic, allowing for efficient management of data models, web API, and static files. The template also integrates various tools and frameworks like Vue CLI 3, Vue Router, Vuex, and Gunicorn for enhanced functionality and deployment options. Overall, the Django Vue Template offers a streamlined and flexible solution for building applications using Vue and Django.