Django x Vue.js: Learn how to integrate Django with Vue.js

Django x Vue.js: Learn how to integrate Django with Vue.js

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 21 lectures (1h 58m) | 1.58 GB

Learn to create a foundation for robust projects using Django and Vue.js

Django is one of the most popular backend web application frameworks that exists and it’s written in Python. Vue.js is one of the most popular JavaScript tools for adding dynamic features to a web application.

Django doesn’t need Vue to run. Vue doesn’t need Django to run. The combination gives developers an incredibly flexible and dynamic paradigm while also leveraging a number of the built-in benefits that each tool has.

Django is excellent because it’s open source, has built-in user management, built-in database integrations, and built-in security measures. There’s features make it not only the best Python-based web framework but the best framework across all programming languages. I love tools like Flask, FastAPI, Express.js, Adonis.js, but none of them have the ease of implementation and the built-in features like Django.

Vue.js has quickly become my go-to for JavaScript frameworks. This is for two reasons: (1) The template / script syntax is very intuitive and reminds me a lot of a 100x better version of jQuery. (2) You can make incredibly small components really quickly and simply.

This course is not meant to be comprehensive in using Vue or Django but rather show you the best and most modern approach to integrating the two tools. Here’s exactly what we’re going to cover:

  • Develop Django & Vue.js simultaneously
  • Limit third-party package usage (no Python-based JavaScript compilers here)
  • Leverage Django Templates with Vue.js
  • Implement Cross Site Request Forgery (csrf) safely
  • Dynamically load file paths with Pathlib
  • Use custom Django Template Context Processors
  • CRUD from Vue.js to Django without additional API frameworks (such as Django Rest Framework)
  • Use Vite to build and compile our Vue.js application
  • And more

The goal of this course is to build a practical and forward-thinking approach to integrate nearly any JavaScript library with your Django project. While you can take Vue.js and Django many places, having this type of integration will help you get there.

Table of Contents

Welcome & Setup
1 Welcome
2 Recommended Requirements & Course Resources
3 Python Virtual Environment and Django Project
4 Create the Vuejs Project

Configuring Django + Vue
5 Static File Configuration for Django
6 Custom Context Processor in Django
7 Using Pathlib to Set Dynamic File Paths
8 Mounting the Vue App in a Django Template
9 HTML Attributes as Props in Vue
10 Vue Ref for Managing State
11 Global State Management with Vue

HTTP Requests and Responses
12 Your First API Request with Vue
13 Handling an API Request with Django
14 Replacing Fetch with Axios
15 Map Input Value to Vue Ref with v-model
16 Built-in Directives with Vue
17 Axios Post with Reactive Form Data

Django + Vue Data Handling
18 Django Create API View
19 Handling HTML Forms in Vue
20 Vue Integratio to Django Model & Django Model Form

Wrap up section
21 Thank you and next steps!

Homepage