Need help with vue-django?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

NdagiStanley
477 Stars 84 Forks MIT License 264 Commits 11 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

No Data

vue-django-webpack-boilerplate

@NdagiStanley has mirrored the fork to have this repo here. This starterpack has proved useful to many and I thank you for the emails I have received from all of you. The reasoning behind this mirror is that; this is an effort to support the users more by developing further on this project. From here on, I am calling on all potential collaborators by making it easier to make PRs and adding the utility of Issues in this 'new' repo (Of course with the same name 😀 ). Lastly, just so you know, I'll be keeping up with developments in the

original
.

Listed in
Awesome VueJS

A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction integrated into a django application

Vue CLI Version Notice

If you are using

[email protected]
, it will be pulling the
master
branch of this template by default. If you are using
[email protected]
, it will be pulling the
dist
branch instead, which provides more configurable options thanks to new features in
[email protected]
. It is recommended to upgrade
vue-cli
as soon as you can.

VueJS Templates Documentation

Common topics are discussed in the docs. Make sure to read it!

Vue Django

Open Source Love GitHub Help Contribute to Open Source

Build Status

Coverage Status

https://vuedjango.herokuapp.com/ is a deployed instance of this boilerplate.

Vue-Django Docs offer a more comprehensive documentation.

Usage of VueDjango

This is a project template that includes

VueJS
and
Django
based on the vue-cli templates. It is recommended to use npm 3+ for a more efficient dependency tree.
$ npm install -g vue-cli

Set up

You might want to use

sudo
if you encounter permissions error
bash
$ vue init NdagiStanley/vue-django my-project  # Follow the prompts
$ cd my-project
$ npm install

Develop

Run:

bash
$ npm run dev

The app runs on localhost:8080

Update the files as you wish and the hot-reload will take effect. Add

js
and
css
files within the
static
folder in the root directory. Link them to the index.html in that same level (the root directory).

Run the Django server

Have Python installed and preferably use a virtual python environment for this.

Run:

bash
$ python -m pip install -r requirements.txt
$ sh server.sh
(Run this command every time you make changes)

At localhost:8000 you should have a page exactly like the image below or as the deployed instance mentioned earlier: https://vuedjango.herokuapp.com/

Vue-Django

Docker

Ensure that docker is running.

If you use

docker
in your workflow, there is a
Dockerfile
in the root directory for you. Simply run
docker build -t [image-name] .
Use your preferred image name in place of the
image-name
in the command. Remember to enter the trailing period before running it.

There is a docker container for vue-django that you can run. Simply run the following command.

bash
docker run -p 8000:8000 stanmd/vue-django

Then get to localhost:8000. You should have a page exactly like the image above

What's Included

  • npm run dev
    : first-in-class development experience.
    • Webpack +
      vue-loader
      for single file Vue components.
    • State preserving hot-reload
    • State preserving compilation error overlay
    • Lint-on-save with ESLint
    • Source maps
  • npm run build
    : Production ready build.
    • JavaScript minified with UglifyJS.
    • HTML minified with html-minifier.
    • CSS across all components extracted into a single file and minified with cssnano.
    • All static assets compiled with version hashes for efficient long-term caching, and a production
      index.html
      is auto-generated with proper URLs to these generated assets.
  • npm run unit
    : Unit tests run in PhantomJS with Karma + Mocha + karma-webpack.
    • Supports ES2015 in test files.
    • Supports all webpack loaders.
    • Easy mock injection.
  • npm run e2e
    : End-to-end tests with Nightwatch.
    • Run tests in multiple browsers in parallel.
    • Works with one command out of the box:
    • Selenium and chromedriver dependencies automatically handled.
    • Automatically spawns the Selenium server.

Contributions

NB: This repo has been forked from vue-webpack-boilerplate to help you start a Django application utilizing the awesomeness of

VueJS
and
vue-cli

Feel free to contribute to this repo.

To create your own boilerplate, fork this repo or vue-webpack-boilerplate and use it with

vue-cli
:
vue init username/repo my-project

Backers

Backers on Open Collective

Thank you to all our backers!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.