Django Vue Cli Webpack Demo

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:

1. Clone the repository and navigate to the directory.
2. Install Django: pip install django
3. Install Vue.js project dependencies: cd client && npm install
4. To run the Vue.js dev server: npm run serve
5. To build for production: npm run build
6. Navigate to the server/ directory: cd server
7. Run the Django dev server: python manage.py runserver
8. 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.