Django integration

MDB backend integration with Django for vue

This article shows you how to integrate Django backend application with MDB Vue UI Kit.


Before starting the project make sure to install the following utilities:

Creating a new Django application

Let's create a fresh Django application so we can go through all the steps together. For this tutorial we'll be using MySQL database.

Step 1

Creating a MySQL database

In order to create a new database you need to run the following command

    mdb database init -db mysql8
  • Create a new user
  • Provide username, password, database name and description.

CLI will display your username, password, database name and connections string. Now you can go to phpMyAdmin where you will be able to handle the administration of the MySQL database.

Note Note: Your final username and database name may differ from your inputs. MDB GO may add some characters to randomize username and database name.

Important Do not close your terminal window until you save your credentials somewhere. This is the only time we will show you your database password. If you won't save it you'll loose it.

Step 2

Creating Django API.

Install Django on your computer.

Note: If you are getting errors, try typing these commands in cmd instead of in the vsc terminal or check your Python environment settings.

    python -m pip install -e django/
    py -m pip install Django

Step 3

Now we have to install the necessary modules that are needed for the Django backend to work properly.

To create Django web API we will need Django Rest Framework. We should also install module that will be responsible for handling CORS issues in our developement application.

    pip install djangorestframework
    pip install django-cors-headers      

Step 4

Navigate to your project directory, i.e. mdb-vue-django-app.

Let's create a Django project by typing the code below. We are naming our project as MDBdjangoAPI but you can go with whatever you want.

    django-admin startproject MDBdjangoAPI

Step 5

Now that we have the project installed, let's create a new app in which we will put all the functions our REST API will need. Navigate to the newly created directory with django project and enter the following the code.

    cd MDBdjangoAPI
    python startapp restAPI
    cd MDBdjangoAPI
    py startapp restAPI

Step 6

Register the app and new modules in If you are not sure about the name of your app, go to restAPI/ and copy the class name. We have to register corsheaders in middlware section aswell.






Step 7

Nowe we have to create a model needed for our app. We need _id field which value will be autofilled. We also need name and desc with max length set as below.

    from django.db import models

    # Create your models here.

    class Tasks(models.Model):
        _id = models.AutoField(primary_key=True)
        name = models.CharField(max_length=60)
        desc = models.CharField(max_length=255)


Step 8

Django requires to install mysqlclient in version 1.4.0 or higher so it can work with MySQL properly. Without it you wouldn't be able to communicate with database and manipulate its contents.

    pip install mysqlclient

Step 9

Go to, go to DATABASES section and add the database connection details. Change the values between brackets for the ones you got after creating a new MySQL Database from our starter.

        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'NAME': '[Your database name]',
            'USER': '[Your user name]',
            'PASSWORD': '[Your password]',
            'HOST': '',
            'PORT': '3306'

Step 10

Make migration with our models to the database.

    python makemigrations restAPI
    py makemigrations restAPI

Step 11

Check restAPI/migrations/0001_initial_py if everything is correct and then migrate the data. Now you can see the changes after logging to

    python migrate restAPI  
    py migrate restAPI  

Step 12

Create serializers for our models. This will allow us to convert complex types into python datatypes that can be rendered in json format.

    from rest_framework import serializers
    from restAPI.models import Tasks

    class TaskSerializer(serializers.ModelSerializer):
        class Meta:
            model = Tasks
            fields = ('_id', 'name', 'desc')


Step 13

Open and start working on API methods we'll be using. We are going to create GET, POST, PUT and DELETE endpoints that will support the functionality of the front-end app.

    from django.shortcuts import render
    from django.views.decorators.csrf import csrf_exempt
    from rest_framework.parsers import JSONParser
    from django.http.response import JsonResponse

    from restAPI.models import Tasks
    from restAPI.serializers import TaskSerializer

    # Create your views here.

    def taskAPI(request, id=0):

        if request.method == 'GET':
            tasks = Tasks.objects.all()
            tasks_serializer = TaskSerializer(tasks, many=True)

            return JsonResponse(, safe=False)

        elif request.method == 'POST':
            task_data = JSONParser().parse(request)
            tasks_serializer = TaskSerializer(data=task_data)

            if tasks_serializer.is_valid():
                return JsonResponse("Task Added Succesfully", safe=False)

            return JsonResponse("Task Failed to Add", safe=False)

        elif request.method == 'PUT':
            task_data = JSONParser().parse(request)
            task = Tasks.objects.get(_id=id)
            tasks_serializer = TaskSerializer(task, data=task_data)

            if tasks_serializer.is_valid():
                return JsonResponse("Task Updated successfully", safe=False)

            return JsonResponse("Task Failed to Update")

        elif request.method == "DELETE":
            task = Tasks.objects.get(_id=id)

            return JsonResponse("Task Deleted", safe=False)


Step 14

Create a new file where we will define routes for our API methods.

    from django.urls import path
    from restAPI import views

    urlpatterns = [
        path('tasks/', views.taskAPI),
        path('tasks/<slug:id>', views.taskAPI)

Step 15

Add new path to in the main project directory.

    from django.contrib import admin
    from django.urls import path, include

    urlpatterns = [
        path('', include('restAPI.urls'))

Step 16

Make migrations and run backend server. Copy the link to your app and paste it to your browser. You should see an empty array after adding /tasks at the end.

    python makemigrations restAPI
    python migrate restAPI
    python runserver
    py makemigrations restAPI
    py migrate restAPI
    py runserver

Creating MDB Vue application

If our backend is working correctly we should start creating a new Vite application. If you have encountered any problems, you should go back and try each step again.

Note: Don't forget to go back to your root folder before next step. Folders MDBdjangoAPI and mdb5-free-vue should be in the same directory.

Step 1

Create a new vite project with our MDB starter. Run the command below and select MDB5 Free Vue starter.

            mdb init

Your folder structure should look like this

          ├── mdb5-free-vue
          └── MDBdjangoAPI

Step 2

Let's make some changes to the created vue app. First we need to install axios inside our mdb5-free-vue directory.

            npm install axios

Remove style.css file (don't forget to delete it from main.ts file) and remove HelloWorld file from components directory.

Step 3

Let's create a .env file inside a mdb5-free-vue directory. We have to add VITE_ before the name of your variable, because it's the only way to expose them to Vite-processed code. Don't forget to change LINK_TO_YOUR_BACKEND to the link your backend is running right now.


Step 4

Add new content to Home.vue file inside the views directory.

Since our starter database contains some sample models and routes, let's use them. We will create an application that will show a list of tasks. We also intend to create a functonality for adding new tasks, changing their content and removing them.

We have already prepared the code for you, so go ahead and copy and paste it into App.vue.

Ok, so what's actually going on there. We use MDB components, MDBBtn, MDBModal, MDBListGroup, MDBInputs and few other. The modal will be responsible to show inputs that will allow you to add, edit and send tasks to the database. The Manage tasks button, gives possibilty to modify or remove tasks. At the end, the list group will display our data.

        <MDBContainer class="mt-5">
          <MDBRow class="pt-5">
            <MDBCol class="text-center">
              <MDBBtn color="primary" @click="taskModal = true">Add task</MDBBtn>
          <MDBRow class="mt-3 p-5" style="min-height: 40vh">
            <MDBCol class="d-flex justify-content-center align-items-center">
              <div v-if="taskList.length === 0">
                Nothing to display. Add a few tasks.
              <MDBListGroup v-else class="list-group-light" style="min-width: 22rem">
                  class="d-flex justify-content-between align-items-center gap-5"
                  v-for="task in taskList"
                    <div class="fw-bold">
                      {{ }}
                    <div class="text-muted">{{ task.desc }}</div>
                      class="text-primary me-3"
                      style="cursor: pointer"
                      @click="() => editModal(task)"
                      style="cursor: pointer"
                      @click="() => deleteTask(task._id)"
            <MDBModalTitle id="exampleModalLabel">{{
              isEdited.edited ? "Edit task" : "Add task"
              <div class="my-4">
              <div class="my-4">
                  taskModal = false;
              >{{ isEdited.edited ? "Save changes" : "Add task" }}</MDBBtn
      <script setup lang="ts">
        import { ref, onMounted, computed } from "vue";
        import {
        } from "mdb-vue-ui-kit";
        import axios from "axios";
        interface SingleTask {
          _id: number;
          name: string;
          desc: string;
        const taskList = ref<SingleTask[]>([]);
        const taskModal = ref(false);
        const newTaskName = ref("");
        const newTaskDesc = ref("");
        const isEdited = ref({ edited: false, value: -1 });
        const API_URL = ref("");
        const canSendData = computed(() => {
          if (newTaskName.value.trim() === "" || newTaskDesc.value.trim() === "") {
            return false;
          return true;
        const resetInputs = () => {
          newTaskName.value = "";
          newTaskDesc.value = "";
          isEdited.value = { edited: false, value: -1 };
        const handleSaveChanges = async () => {
          if (!canSendData.value) {
            ? updateTask(isEdited.value.value, newTaskName.value, newTaskDesc.value)
            : createTask(newTaskName.value, newTaskDesc.value);
          taskModal.value = false;
        const editModal = (task: SingleTask) => {
          newTaskName.value =;
          newTaskDesc.value = task.desc;
          isEdited.value = { edited: true, value: task._id };
          taskModal.value = true;
        const getTaskList = () => {
            .then((res) => (taskList.value =;
        const createTask = (name: string, desc: string) => {
          const data = { name, desc };
`${API_URL.value}tasks/`, data).then(() => {
        const deleteTask = (id: number) => {
          axios.delete(`${API_URL.value}tasks/${id}`).then(() => {
        const updateTask = (id: number, name: string, desc: string) => {
          const data = { name, desc };
          axios.put(`${API_URL.value}tasks/${id}`, data).then(() => {
        onMounted(() => {
          API_URL.value = import.meta.env.VITE_API;

Step 5

The app should be fully functional and should work correctly with backend

        npm start


If you want to further optimize your application please visit:

Backend features


This example was created with use of Django. Our app is connected to MySQL database and is ready to receive get, post, put and delete requests.

Frontend features


To create the project we used our ui kit, with which we can build basic views very quickly.

Views and Layouts:

In this project we used the App.vue file, created by the Vite tool in which we placed our vue code. We have successfully integrated the backend with the MDB package and can send basic requests to backend Django application.