Vue in django template

Last updated: May 16, 2023

This a course about vue and django. Django is very famous for multi-page large scale project. For dynamically data load from a multi-page website's client site vue is the best option. To achieve that to need to use npm. In this course I taught, how to use vue cdn inside django template and achieve single page application's power with multi-page django application.

 

Learning Topics

Basic of vue:

  1. Creating a new djagno project and setup basic configuration
  2. Vue integrating in django template using CDN
  3. Vue data show in django template
  4. Vue lifecycle hooks or lifecycle functions
  5. Vue functions
  6. Using @click, click event handle
  7.  Using v-model, form data handle
  8. Vue watch function
  9. Vue computed functions as variable
  10. Using v-for, loop data in template
  11. Api calling using Vue
  12. Vue and Axios GET request
  13. Vue and Axios POST request
  14. Vue and Axios PUT, DELETE request

 

Vue Component and routing:

  1. Creating Vue component
  2. Vue routing different url

 

Vue state management :

  1. Vue props
  2. Vue passing parent to child component
  3. Disadvantage of props and it's solving teaching
  4. Advantage of VueX
  5. VueX integration
  6. VueX store data
  7. VueX update data

Vue Chart:

  1. Vue integrate chartkick
  2. Chartkick bar chart
  3. Charkick line chart
  4. Chartkick pie chart
  5. Vue integrate Chart js
  6. Vue chartjs bar chart
  7. Vue chartjs line chart

Vue utilities:

  1. Show progress bar when api is calling
  2. Show dialog box
  3. Login/signup dialog box
  4. Generate CSV from json and download file
  5. Generate PDF and print

Pre Requirements:

  1. Basic knowledge about django and django rest framework
  2. Basic knowledge about JavaScript

If you want to create complete single page application, you should use Vue CLI porject and that's not part of this course.

Related post