Combining Django and Vue.js: Everything you need to know

Realize the full potential of web development with our article on Django Vue.js integration. Dive into the seamless synergy between Django’s Python backend and Vue.js’ dynamic frontend. We’ll cover various integration methods, from embedding Vue.js directly into Django templates to building standalone Vue apps using the Vue CLI 3. Explore game-changing tools like the Django Webpack Loader and learn how to customize URLs, folders, and views. We’ll show you how to get data from Django using Vue.js and Axios, and you’ll lay the foundation for a powerful interactive web application. Enhance your coding experience with this comprehensive journey into the world of Django and Vue.js integration. 

Is Django and Vue.js a good combination?

Django and Vue.js form an exemplary combination, especially for professional Python developers seeking a robust front-end solution. For those employing Vue.js on the front, it’s not mandatory to tether it exclusively to Node.js on the backend; Django’s Python backend pairs seamlessly. This integration accommodates two distinct methods: embedding Vue.js directly into Django templates or establishing a REST API with Django and a Vue.js client app. The former allows for selective Vue.js use, emphasizing flexibility, while the latter ensures a clear separation between the backend and frontend, ideal for complex applications. Delving into specifics, developers can seamlessly incorporate Vue.js into Django templates, overcoming limitations by tweaking delimiters. Alternatively, opting for a standalone Vue.js app using Vue CLI 3 empowers developers to create a dynamic frontend connected to Django through a robust API. 

Vue.js is a framework for the kind of developer who knows exactly what they want but doesn’t want to spend hours setting it up.

Chris Nwamba

How to use Django and Vue.js together?

Utilize the potential of web development with the seamless synergy of Django Vue.js and integration. Dive into the intricacies of “How to Use Django and Vue.js Together” as you discover the power of merging Django’s robust backend and Vue.js’ dynamic frontend. Learn the art of harmonizing these technologies, creating a cohesive and effective web development experience.

Just include the Vue.js script directly in a template

Integrating Django and Vue.js can be as straightforward as embedding the Vue.js script directly into your HTML template. Simplify testing and utilize Vue.js on specific pages with ease. Copy and paste the snippet below into your template’s head:

script src="https://cdn.jsdelivr.net/npm/vue"/script

Now, kickstart your Vue app and components effortlessly:

html
head
  script src="https://unpkg.com/vue"/script
  script
    new Vue({
      el: '#app',
      delimiters: ['[[', ']]'],
      data: {
        message: 'Hello Vue.js!'
      }
    })
  /script
/head
body
  div id="app"
    p[[ message ]]/p
  /div
/body
/html

Navigate the nuances between Django’s template language and Vue.js by tweaking delimiters. Swap {{ message }} with [[ message ]] and include this line inside your script tag:

delimiters: ['[[', ']]'],

This approach, though with some limitations, allows you to build Django-Vue apps seamlessly, albeit without the option for single-file components. Dive into the dynamic realm of Django and Vue.js integration with this easy-to-implement method.

Looking to get your Django and Vue.js projects off the ground?

Contact Us

Standalone Vue app using Vue CLI 3

As you embark on your Django and Vue.js integration, consider a powerful option like a standalone Vue application using Vue CLI 3. This method involves creating an independent instance of Vue on a separate server that connects to your Django application via a robust API. Start the process by installing Vue using Webpack:

$ sudo npm install -g @vue/cli
$ vue create django-vue
$ cd django-vue
$ npm run serve

Fill in project details as prompted, and voila! “npm run serve” fires up a local web server. For a more visual approach, launch Vue UI with “vue ui.” Now, armed with this standalone Vue app, you’re primed to seamlessly fetch data from your Django application. Dive in and explore the dynamic synergy between Django and Vue.js.

Django webpack loader

To improve your Django and Vue.js integration, check out Django Webpack Loader, a game-changer that makes it easy to combine these powerful technologies. Start by creating a Django project:

virtualenv django-vue
cd django-vue
source bin/activate
pip3 install django django-webpack-loader

Once completed, you will be able to enjoy a flawless Django installation, complete with Django Webpack Loader. This dynamic duo guarantees a seamless combination of Django’s robust features and Vue.js frontend. With this setup, you can easily manage and load Vue.js components into your Django templates, opening up a world of possibilities for interactive and dynamic web applications. Dive into the world of synergy between Django and Vue.js, where Django Webpack Loader will be your trusted ally in building modern, responsive, and engaging web applications.

Set up the URLs, folders, and views

Setting up URLs, folders, and views is a pivotal step in achieving seamless Django and Vue.js integration. Begin by creating a “templates” folder in your Django project’s root. In “Django-vue/settings.py,” add these variables:

TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')
FRONTEND_DIR = os.path.join(BASE_DIR, 'frontend')

Modify the TEMPLATE list:

TEMPLATES = [    
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [TEMPLATES_DIR,],
    'APP_DIRS': True,
    'OPTIONS': {
      'context_processors': [
        'django.template.context_processors.debug',
        'django.template.context_processors.request',
        'django.contrib.auth.context_processors.auth',
        'django.contrib.messages.context_processors.messages', 
      ],
    },
  },
]

Include “webpack_loader” in your “INSTALLED_APPS”:

INSTALLED_APPS = [
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'webpack_loader',
]

And add:

WEBPACK_LOADER = {
  'DEFAULT': {
    'CACHE': DEBUG,
    'BUNDLE_DIR_NAME': '/bundles/',
    'STATS_FILE': os.path.join(FRONTEND_DIR, 'webpack-stats.json'),
  }
}

Create the base template, “base.html,” in the “templates” folder:

{% load render_bundle from webpack_loader %}
!DOCTYPE html
html
  head
    meta charset="utf-8"
    title>Django <3 Vue.js</title
  /head
  body
    div id="app"
      app/app
    /div
  {% render_bundle 'app' %}
!-- built files will be auto injected -->
  /body
/html

In “django-vue/urls.py,” configure to render this HTML for the front page:

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
  path('admin/', admin.site.urls),
  path('', TemplateView.as_view(template_name='base.html'), name='app')

With these backend configurations complete, dive into Vue.js integration. In your Django project’s root, run:

$ sudo npm install -g @vue/cli
$ vue create frontend
$ cd frontend
$ npm install --save-dev webpack-bundle-tracker
$ npm run serve

Configure webpack and the dev server by creating “vue.config.js”:

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath: "http://0.0.0.0:8080/",
  outputDir: './dist/',

  chainWebpack: config => {

    config.optimization
      .splitChunks(false)

    config
      .plugin('BundleTracker')
      .use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])

    config.resolve.alias
      .set('__STATIC__', 'static')

    config.devServer
      .public('http://0.0.0.0:8080')
      .host('0.0.0.0')
      .port(8080)
      .hotOnly(true)
      .watchOptions({poll: 1000})
      .https(false)
      .headers({"Access-Control-Allow-Origin": ["\*"]})
  }
};

Finally, run the project by executing:

$ cd frontend
$ npm run serve

In a separate terminal:

$ python manage.py runserver

Visit your local server in your browser to witness Vue.js seamlessly rendering through Django. This integration, facilitated by Django Webpack Loader, harmonizes the strengths of both frameworks, providing a versatile and efficient solution for your projects. Remember, these are just three ways to unite Django and Vue.js; choose what suits your project best. Happy coding!

Getting data from Django using Vue.js and Axios

In our quest to build a simple task-based application, we start by seamlessly fetching data from Django using the powerful combination of Vue.js and Axios. This integration, which is the centerpiece of our Django vue js approach, lays the foundation for dynamic interaction between the front end and the Django backend. It starts with the initial installation, where we configure Django by creating a virtual environment called “vuengo_env” and installing the necessary packages such as Django, Django REST framework, and django-cors-headers to facilitate Ajax requests. After configuring Django to share resources, we created a project named “vuengo” and made the necessary adjustments to the configuration file.

Let’s build a simple todo application

After preparing Django, we moved on to Vue.js and started configuring using the Vue CLI along with a web package template to simplify development. After installing Vue and Axios, we adapted the index.html file by adding the Bulma CSS framework to it and structuring our Vue application accordingly. Back in Django, we created a custom application called “task” to manage tasks. In this application, we define the task model, as well as serializers and views. The Django project is configured so that it recognizes the task application without any problems. To populate the database, a migration is performed, and tasks are added via the Django shell. Finally, we expose the tasks through an API endpoint accessible through a URL template configured in vuengo/urls.py.

At the same time, our Vue application is evolving as the main structure is being formed in HelloWorld.vue. Using Axios, tasks are fetched from the Django backend, seamlessly displaying data in the Vue app. On this screen, current and completed tasks are displayed in the corresponding columns. As the app evolves, the functionality is expanding so that users can add tasks via a form and update the status of a task with a simple click of the “Complete” button. This comprehensive paragraph serves as a solid foundation, offering a launching pad for further learning and development of complex Django and Vue.js applications.

Conclusions

In conclusion, this article has covered the ins and outs of achieving a seamless merger between Vue.js and Django. From directly incorporating scripts into templates to the versatility of standalone Vue applications, we explored various integration methods and tools, such as the Django Webpack Loader. We found out how to create URLs, folders, and views, ensuring that web applications work reliably and efficiently. Whether you’re an experienced Python developer or just getting started with Django Vue.js integration, this comprehensive guide will equip you with the knowledge to help you improve your web development efforts.

At Ficus Technologies, we specialize in leveraging the power of Django and Vue.js to build cutting-edge web solutions. Our expertise ranges from seamless integration methodologies to optimizing the synergy between Django’s robust backend and Vue.js’ dynamic front end. Let us be your guide to the world of Django Vue.js integration so that your projects benefit from the full potential of these powerful technologies. Enhance your web development experience with Ficus Technologies.

Sergey Miroshnychenko

CEO AT FICUS TECHNOLOGIES

My company has assisted hundreds of businesses in scaling engineering teams and developing new software solutions from the ground up. Let’s connect.