Django + Vue.js: CRUD App with Django Rest Framework

In this tutorial, we will learn how to build a full stack Django + Vue.js example with a CRUD Application. The back-end server uses Django with Rest Framework for REST APIs and interacts with MySQL/PostgreSQL/MongoDB database. Front-end side is made with Vue, Vue Router, Axios & Bootstrap.

Django Vue.js example Overview

We will build a full-stack Tutorial Application in that:

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.
  • We can also find Tutorials by title.

The images below shows screenshots of our System.

– Create an object:


– Retrieve all objects:


– Click on Edit button to retrieve an object:


On this Page, you can:

  • change status to Published using Publish button
  • remove the Tutorial from Database using Delete button
  • update the Tutorial details on Database with Update button


– Search objects by field title:


Architecture of Django Vue.js example

This is the application architecture we’re gonna build:


– Django exports REST Apis using Django Rest Framework & interacts with Database using Django Model.
– Vue Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use Vue Router for navigating to pages.

Django Rest Apis Back-end


These are APIs that Django App will export:

Methods Urls Actions
POST /api/tutorials create new Tutorial
GET /api/tutorials retrieve all Tutorials
GET /api/tutorials/:id retrieve a Tutorial by :id
PUT /api/tutorials/:id update a Tutorial by :id
DELETE /api/tutorials/:id delete a Tutorial by :id
DELETE /api/tutorials delete all Tutorials
GET /api/tutorials?title=[keyword] find all Tutorials which title contains keyword


  • Django 2.1.15
  • Django Rest Framework 3.11.0
  • PyMySQL 0.9.3 (for MySQL)/ djongo 1.3.1 (for MongoDB)
  • django-cors-headers 3.2.1

Project Structure

This is our Django project structure:


tutorials/ declares TutorialsConfig class (subclass of django.apps.AppConfig) that represents Rest CRUD Apis app and its configuration.
bzkRestApis/ contains settings for our Django project: Database engine, INSTALLED_APPS list with Django REST framework, Tutorials Application, CORS and MIDDLEWARE.
tutorials/ defines Tutorial data model class (subclass of django.db.models.Model).
migrations/ is created when we make migrations for the data model, and will be used for generating database table/collection.
tutorials/ manages serialization and deserialization with TutorialSerializer class (subclass of rest_framework.serializers.ModelSerializer).
tutorials/ contains functions to process HTTP requests and produce HTTP responses (using TutorialSerializer).
tutorials/ defines URL patterns along with request functions in the Views.
bzkRestApis/ also has URL patterns that includes tutorials.urls, it is the root URL configurations.


You can find step by step to implement this Django Rest Api Server Application in one of the posts:

Vue.js Front-end



– The App component is a container with router-view. It has navbar that links to routes paths.

TutorialsList component gets and displays Tutorials.
Tutorial component has form for editing Tutorial’s details based on :id.
AddTutorial component has form for submission new Tutorial.

– These Components call TutorialDataService methods which use axios to make HTTP requests and receive responses.


  • vue: 2.6.10
  • vue-router: 3.1.3
  • axios: 0.19.0

If you want to use Vue 3 instead, please visit:
Vue 3 CRUD example with Axios & Vue Router

Project Structure


package.json contains 3 main modules: vue, vue-router, axios.
– There are 3 components: TutorialsList, Tutorial, AddTutorial.
router.js defines routes for each component.
http-common.js initializes axios with HTTP base Url and headers.
TutorialDataService has methods for sending HTTP requests to the Apis.
vue.config.js configures port for this Vue Client.


You can find step by step to implement this Vue App in the post:
Vue.js CRUD App with Vue Router & Axios

Or using Vuetify: Vuetify data-table example with a CRUD App


Further Reading


Now we have an overview of Django Vue.js example when building a CRUD App. We also take a look at client-server architecture for REST API using Django Rest Framework, as well as Vue.js with Vue Router, Axios project structure for building a front-end app to make HTTP requests and consume responses.

Next tutorials show you more details about how to implement the system (with source code):
– Back-end:

– Front-end:

If you want a Typescript version for the Vue App, it is here:
Vue Typescript CRUD Application to consume Web API example

Or serverless with Firebase:
Vue Firebase Realtime Database: CRUD example
Vue Firestore: Build a CRUD App example

Happy learning, see you again!

13 thoughts to “Django + Vue.js: CRUD App with Django Rest Framework”

  1. Thank you for this Django tutorial. I’ve tested with Vue client and it works!

  2. Hello! I’m definitely enjoying your tutorial and look forward too new Django tutorials.

    1. Yeah, you can find the github source code in the tutorials that I mention at Conclusion section.

      1. Hello,

        Thanks for this great example !
        I can’t see anymore the repository with code example.
        Is it possible to share it again ?

        Best !


  3. Thanks alot! I’m looking for fullstack with Django & Vue and found your tutorial.

Comments are closed to reduce spam. If you have any question, please send me an email.