Cookiecutter Vue Django
Vue + Django with no compromise.
Cookiecutter Vue Django is a framework for jumpstarting production-ready Django + Vue projects quickly. Expanding on the wonderful Cookiecutter Django, this project template allows the intermingling of both Django Templates and Vue, even on the same page, without compromising the full power of either.
Typical solutions to integrating Django and Vue forgo much of the strengths of one lieu of the other. For example, a common approach is using Django Rest Framework as backend and writing the entire front end in Vue, making it difficult to utilize Django templates in places it could be expedient. A second approach is to use Vue within Django templates using browser <script> includes, but then lost is the ability to use Vue's Single File Components.
This project utilizes a different approach, melding these two technologies more naturally. As a result, not only are the typical compromises eliminated, but additional distinct advantages are realized:
- Increased flexibility: The developer is free to use Django Templates or Vue as appropriate, choosing the right tool for the job
- Increased development speed: Reduce time spent fighting the framework by using Django and Vue where each excels
- Increased performance: Leverage Django's powerful caching backend to deliver content-rich pages quickly with little or no Javascript, while deferring complex and interactive Vue functionality until after page load
Note: Using Vue 3? Good news! In many ways, integrating Vue 3 with Django is simpler. For information about integration with Vue 3, see https://github.com/ilikerobots/cookiecutter-vue-django/issues/13#issuecomment-791915473
Features
- All the features of the amazing cookiecutter-django
- Harmonious coexistence of Django templates and Vue components
- Vue Single File Components (SFCs)
- Multi-page App (MPA) layout
- Vue Loader Hot Reload
- Property passing from Django Template -> Vue Component
- Sass/SCSS pre-compilation of Vue Components
- Vue DevTools support
- Chunked resource loading via webpack
- Deferred loading of Vue and/or Vue components
- Shared Vuex state across components on the same page
- Persistent state across page loads
- REST support via Axios -> DRF
- Sample application illustrating all of the above
Usage
First, get Cookiecutter. Trust me, it's awesome:
$ pip install "cookiecutter>=1.7.0"
Now run it against this repo:
$ cookiecutter https://github.com/ilikerobots/cookiecutter-vue-django
You'll be prompted for some values. Provide them, then a Django project will be created for you. Don't forget to carefully look at the generated README.
For more detailed instructions, see upstream cookiecutter-django
Issues
- If you think you found a bug or want to request a feature, please open an issue.
Articles
This cookiecutter is based on the methods described in the following articles
- Vue + Django — Best of Both Frontends - 26 May 2019 by Mike Hoolehan
- Vue + Django — Best of Both Frontends, Part 2 - 4 Dec 2019, id
- Django + Vue — Blazing Content, Rich Interactivity - 23 Apr 2020, id
Show your Support
If you find this repository useful, then please consider leaving a star so this project can reach more people. Also, if the articles above were helpful, then a clap on those platforms would also be appreciated. Thanks!
Code of Conduct
Everyone interacting in the this project's codebases, issue trackers, chat rooms, and mailing lists is expected to follow the PyPA Code of Conduct.
![[question] After upgrading to vue 3, computed value is only updating on browser refresh. Is this expected?](https://avatars.githubusercontent.com/u/18176303?v=4)
18.7k Jan 8, 2023
1 Nov 26, 2021
1 Jan 10, 2022
94 Dec 13, 2022
37 Dec 24, 2022
215 Dec 20, 2022
10k Jan 1, 2023
56 Nov 28, 2022
30 Oct 13, 2022
827 Dec 15, 2022
1.6k Jan 4, 2023
176 Dec 29, 2022
1 Jan 7, 2022
1.6k Dec 31, 2022
1.5k Jan 8, 2023
649 Dec 30, 2022
40 Jul 16, 2022