Skip to content
@django integrated with a full-featured @webpack + (@vuejs / vue-loader) setup with hot reload, linting, testing & css extraction.
Branch: dist
Clone or download
Pull request Compare This branch is 59 commits ahead, 419 commits behind vuejs-templates:develop.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
template
.codeclimate.yml
.gitignore
.pyup.yml
CONTRIBUTING.md
README.md
deploy-docs.sh
meta.json
package.json

README.md

vue-django-webpack-boilerplate

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 vue-cli@1.x, it will be pulling the master branch of this template by default. If you are using vue-cli@2.x, it will be pulling the dist branch instead, which provides more configurable options thanks to new features in vue-cli@2.x. 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

Code Climate Updates Python 3

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

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

You might want to use sudo if you encounter permissions error

$ vue init NdagiStanley/vue-django my-project
$ cd my-project
$ npm install

Secondly, have Python installed and preferably create a virtual environment for the project.

To develop

$ npm run dev

Deploy

To deploy your django project

$ .deploy.sh

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

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.

docker run -p 8000:8000 stanmd/vue-django python manage.py runserver 0.0.0.0:8000

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 Vue JS 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
You can’t perform that action at this time.