Django + Vue: Now updated for Vue3. An approach to combining Vue Single File Components and Django Templates, offering freedom to leverage both whenever and wherever is ...
In the previous articles of this series, I’ve demonstrated a method of integrating Django templates and Vue in such a way that preserves the strengths of both frontend frameworks.
Since those articles were published, Vue3 has been released, bringing a variety of improvements and a list of breaking changes. With these numerous changes, the code examples from the prior articles in this series no longer work directly with Vue3. But happily, with only a few isolated changes, the same general approach works well with Vue3 and, moreover, the code becomes, in my opinion, simpler. In fact, we need not alter our components, our Vuex stores, or even our vue.config.js to work with Vue3. Rather, the required changes are limited to the app initialization logic.
Instead of rehashing the ideas and approach described in prior articles of this series, this article will instead enumerate the changes needed to adapt the Vue2 solution to Vue3. At the same time, I’ll introduce a couple of additional changes that, while not strictly necessary for Vue3, improve the overall quality of the Vue + Django integration.
If you’re just starting with Vue + Django, I suggest reading from the start of these articles to learn more about the general approach utilized in this article. Or, to start hacking immediately, check out the sample application source code.
In Vue2, app initialization was generally done with
new Vue() constructor. However, this approach was eliminated in Vue3, so instead we will adapt the code to use the new
createApp() method. Similarly, we no longer can instantiate the Vuex store with
new Vuex.store() but will instead use
Both these changes are straightforward adaptations based on the Vue migration guide.
However, our usage with Django necessitates a couple additional changes. First, we must provide for passing of properties from Django template, as our previous approach, which relied on
new Vue(), no longer works. Second, as we may potentially be adding several Vue apps to a single page, it behooves us to extract our app/store creation logic into a callable function.
Django admin full Customization step by step. Did you learn about it? Read our article now.
In this post, you will learn model queries work in Django with interactive Django shell and the shell is very powerful tool to make the django ORM queries.
Create a new web app or revamp your existing website? Every existing website or a web application that we see with an interactive and user-friendly interface are from Front-End developers who ensure that all visual effects come into existence....
Want to Hire VueJS Developer to develop an amazing app? **[Hire Dedicated VueJS Developers](https://hourlydeveloper.io/hire-dedicated-vue-js-developer/ "Hire Dedicated VueJS Developers")** on the contract (time/project) basis providing regular...
India's best Institute for Django Online Training Course & Certification. Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.