Vue Templates Logo Vue Templates
Vue Django screenshot

Vue Django

Author Avatar Theme by Ndagistanley
Updated: 15 Oct 2023
522 Stars

@Django integrated with a full-featured @Webpack + (@vuejs / vue-loader) setup with hot reload, linting, testing & css extraction.

Github Live Preview

Categories

Django

Overview:

The vue-django-webpack-boilerplate is a full-featured Webpack setup integrated into a Django application. It includes hot-reload, lint-on-save, unit testing, and CSS extraction. This project template combines Vue.js and Django, offering users a comprehensive development environment with efficient dependency management.

Features:

  • Full-Featured Webpack Setup: Integrated into a Django application for efficient development.
  • Hot-reload: Automatically updates changes in real-time to enhance the development experience.
  • Lint-on-save: Integrated ESLint for code linting during development.
  • Unit Testing: Allows users to conduct unit tests within the setup.
  • CSS Extraction: Extracts CSS across all components into a single file for optimized performance.
  • Vue Django Integration: Combines Vue.js and Django for seamless integration.
  • Docker Support: Includes a Dockerfile for users who prefer working with Docker in their workflow.

Installation:

  1. Set up:

    • Ensure npm 3+ is installed for an efficient dependency tree.
    • Use sudo if encountering permissions errors.

  2. Develop:

    • Run the app on localhost:8080.
    • Update files and observe hot-reload effects.
    • Add JS and CSS files within the static folder at the root directory.
    • Run the Django server on localhost:8000 after making changes.

  3. Docker:

    • Ensure Docker is running.
    • Use the provided Dockerfile in the root directory.
    • Run a docker container with your preferred image name.
    • Access the app on localhost:8000 for a similar page experience.

Summary:

The vue-django-webpack-boilerplate provides a powerful development environment with features like hot-reload, lint-on-save, and Docker support. By combining Vue.js and Django, users can enhance their workflow efficiency and streamline the development process. This setup is ideal for individuals looking to build web applications with robust tooling and seamless integration capabilities.