Django + Vue3 — The Best of Both Frontends

Django + Vue3 — The Best of Both Frontends

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.

Overview of changes

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 createStore().

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.

vuejs django django + vue3 — the best of both frontends both frontend vue3 best of both frontends

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Django admin full Customization step by step

Django admin full Customization step by step. Did you learn about it? Read our article now.

How model queries work in Django

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.

Hire Frontend Developers

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....

Hire Dedicated VueJS Developers

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...

Main Pros and Cons of Django As A Web Framework for Python Developers

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.