More Premium Hugo Themes Premium Vue Themes

Django Vue Cli Webpack Demo

A minimal demo showing how to wire up Webpack of a Vue CLI app to Django templates without extra plugins.

Django Vue Cli Webpack Demo

A minimal demo showing how to wire up Webpack of a Vue CLI app to Django templates without extra plugins.

Author Avatar Theme by eugenedae
Github Stars Github Stars: 112
Last Commit Last Commit: Aug 9, 2022 -
First Commit Created: Jan 15, 2024 -
Django Vue Cli Webpack Demo screenshot

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.