Django integration

How to use Vue with Django - free starter

This guide will provide you with a free template for a Django application, with MongoDB database and Vue + Bootstrap 5 front-end.

Prerequisites

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

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

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.

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.

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.

Step 6

Register the app and new modules in settings.py. If you are not sure about the name of your app, go to restAPI/apps.py 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.

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.

Step 9

Go to settings.py, 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.

Step 10

Make migration with our models to the database.

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 https://phpmyadmin.mdbgo.com/

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.

Step 13

Open views.py 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.

Step 14

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

Step 15

Add new path to urls.py in the main project directory.

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.

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.

Your folder structure should look like this

  mdb-vue-django-app/ ├── 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.

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.

Step 5

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

Optimization

If you want to further optimize your application please visit:

Backend features

Django:

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

MDB UI KIT:

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.