@Django integrated with a full-featured @Webpack + (@vuejs / vue-loader) setup with hot reload, linting, testing & css extraction.
@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
A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction integrated into a django application
If you are using
masterbranch of this template by default. If you are using
distbranch instead, which provides more configurable options thanks to new features in
vue-clias soon as you can.
Common topics are discussed in the docs. Make sure to read it!
https://vuedjango.herokuapp.com/ is a deployed instance of this boilerplate.
Vue-Django Docs offer a more comprehensive documentation.
This is a project template that includes
Djangobased 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
sudoif you encounter permissions error
bash $ vue init NdagiStanley/vue-django my-project # Follow the prompts $ cd my-project $ npm install
bash $ npm run dev
The app runs on localhost:8080
Update the files as you wish and the hot-reload will take effect. Add
cssfiles within the
staticfolder in the root directory. Link them to the index.html in that same level (the root directory).
Have Python installed and preferably use a virtual python environment for this.
bash $ python -m pip install -r requirements.txt $ sh server.sh(Run this command every time you make changes)
If you use
dockerin your workflow, there is a
Dockerfilein the root directory for you. Simply run
docker build -t [image-name] .Use your preferred image name in place of the
image-namein 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
npm run dev: first-in-class development experience.
vue-loaderfor single file Vue components.
npm run build: Production ready build.
index.htmlis auto-generated with proper URLs to these generated assets.
npm run unit: Unit tests run in PhantomJS with Karma + Mocha + karma-webpack.
npm run e2e: End-to-end tests with Nightwatch.
NB: This repo has been forked from vue-webpack-boilerplate to help you start a Django application utilizing the awesomeness of
Feel free to contribute to this repo.
To create your own boilerplate, fork this repo or vue-webpack-boilerplate and use it with
vue init username/repo my-project
Thank you to all our backers!