Django x Vue.js
0:00
1/13/2023
In this course, you will learn how to integrate a Django project with the popular JavaScript user interface library Vue.js. We'll cover the following:
- 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.
Recommended Experience
- A Try Django course or Your First Django project or similar
- JavaScript fundamentals
References
- Code on Github
- Vue.js
- Vite (for compiling Vue.js)
- Create a Predict Input with Vue
- Django Static Files Docs
- Live Demo
Sections
1
Welcome
0:00
2
Recommended Requirements
0:00
3
Python Virtual Environment and Django Project
0:00
4
Create the Vuejs Project
0:00
5
Static File Configuration for Django
0:00
6
Custom Context Processor in Django
0:00
7
Using Pathlib to Set Dynamic File Paths
0:00
8
Mounting the Vue App in a Django Template
0:00
9
HTML Attributes as Props in Vue
0:00
10
Vue Ref for Managing State
0:00
11
Global State Management with Vue
0:00
12
Your First API Request with Vue
0:00
13
Handling an API Request with Django
0:00
14
Replacing Fetch with Axios
0:00
15
Map Input Value to Vue Ref with v-model
0:00
16
Built-in Directives with Vue
0:00
17
Axios Post with Reactive Form Data
0:00
18
Django Create API View
0:00
19
Handling HTML Forms with Vue
0:00
20
Vue integration to Django Model & Model Form
0:00
21
Thank you
0:00