Overview:
The purpose of this repository is to demonstrate a slightly more canonical approach of including Webpack bundles from a Vue CLI project into Django templates without any additional plugins. It utilizes the index.html generated by html-webpack-plugin and the {% extends %} tag in Django templates. All the Vue.js / Vue CLI / Webpack features such as dev server, client-side routing, hot module replacement, code-splitting, filename hashes, and prefetch tags should work fine in this demo. The approach has been popularized by @Ejez and is documented in the official Vue CLI documentation.
Features:
- Integration of Vue CLI bundles into Django templates without additional plugins
- Utilizes the index.html generated by html-webpack-plugin
- Supports all Vue.js / Vue CLI / Webpack features such as dev server, client-side routing, hot module replacement, code-splitting, filename hashes, and prefetch tags
Installation:
To run the demo, follow these steps:
- Clone the repository and navigate to the directory.
- Install Django:
pip install django - Install Vue.js project dependencies:
cd client && npm install - To run the Vue.js dev server:
npm run serve - To build for production:
npm run build - Navigate to the server/ directory:
cd server - Run the Django dev server:
python manage.py runserver - Open http://127.0.0.1:8000/ in your browser.
Summary:
This repository provides a demo of how to include Vue CLI bundles into Django templates without additional plugins. It utilizes the index.html generated by html-webpack-plugin and the {% extends %} tag in Django templates. All Vue.js / Vue CLI / Webpack features should work fine in this demo, including the dev server, client-side routing, hot module replacement, code-splitting, filename hashes, and prefetch tags. This approach, popularized by @Ejez, provides an alternative to using django-webpack-loader and gives users more options to choose from.