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

Configure Django to serve static files in development with static files dirs and a local CDN, then prepare production using Django storages with S3 or other providers.

Learn how to configure a custom Django context processor to inject Vue.js static file paths into templates via a base template, enabling dynamic loading of static assets.

Learn to use pathlib to dynamically set static asset paths in a Django and Vue.js project, including globbing JavaScript and CSS files and toggling dev and prod settings.

Mount a Vue.js app inside a Django template by targeting the div id app and creating the app with createApp, passing data via the element dataset for Django context.

Demonstrate passing dataset values as props in a Vue.js app, define token and user props with the setup composition API, and unpack data for streamlined token access.

Learn vue state management with ref to track a count and token across components, bind click events, and update the UI without reloading the page.

Build a simple global state in Vue using a reactive store to hold a token and a counter, accessible across components and used for API requests.

Create a Vue single-page component that performs an API get request to a Django endpoint and updates title and content from the JSON response.

Create a Django API view that returns serialized content as JSON via a relative URL, then integrate with Vue.js, handling get and preparing for post with csf token.

Replace fetch with Axios in a Vue.js Django app, install Axios, import it, and handle responses with try-catch, inspecting response.status and response.data for success or error, including 404 not found.

Map an html input to a Vue ref with v-model, then build a simple form using reactive data for title and slug to send to the backend.

Explore how Vue's built-in v-on directive handles input events to dynamically update a title and slug, demonstrating event targets, reactive data, and basic slugification.

Post reactive form data from a Vue.js front end to a Django back end using Axios. Submit the form with a token header and JSON payload, then handle API response.

Create a Django API view to handle post requests for API posts, return JSON responses, validate input, and note when to use Django Rest Framework for validation.

Learn to convert a Vue view into a functional HTML form, handle the submit event, prevent defaults, gather form data with FormData, and convert it to JSON for backend integration.

Create a Django model and a model form for title, slug, and content, register admin, run migrations, and expose an API endpoint for Vue submissions with validation.

Explore how to integrate Vue with Django's authentication, sessions, and caching, using CSRF tokens for safe requests and accessing the logged-in user in the backend.