Какие существуют способы интеграции Vue.js с Django?

Да ты посмотри, какие распиздяйства творятся в мире фронтенда! Сидят два фреймворка, как два мужика в бане, и думают, как бы им подружиться, чтобы не обосраться. Ну, варианта, по сути, всего два, и оба — пиздец как интересные.

1. Раздельная архитектура: SPA + REST API

Это когда они живут в разных квартирах, но переписываются записками. Джа́нга сидит у себя на кухне, варит борщ из данных, а Вью — это такой отдельный, красивый, но слегка выёбистый интерфейс в соседнем доме.

• Джа́нга (Django): Её работа — быть задницей, простите, бэкендом. Она не показывает морду пользователю, а только шлёт JSON'ы через Django REST Framework (DRF). Типа, «на, Вью, жри данные, обработай и покажи красиво».
• Вью (Vue.js): Это уже отдельное, одностраничное приложение (SPA), которое собирается своими инструментами (Vite, Vue CLI) и живёт своей жизнью на каком-нибудь статическом хостинге. Оно только и делает, что дёргает Джа́нгу: «Дай задачку!», «Обнови статус!».

Вот, смотри, как Джа́нга готовит эти самые «записки» (эндпоинты):

# models.py — тут она описывает, как данные выглядят в её погребе (базе)
from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    completed = models.BooleanField(default=False) # сделано или нет, по дефолту — нихуя не сделано

# serializers.py — а это инструкция, как превратить борщ в JSON, чтобы Вью не подавился
from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = '__all__' # «всё, что есть, отдавай, не жадничай»

# views.py — и вот сама раздавальщица, которая по запросу «/api/tasks/» выдаст всё, что надо
from rest_framework import viewsets

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all() # «тащи сюда все задачи»
    serializer_class = TaskSerializer # «и упаковывай по этой инструкции»

Важные моменты, а то обосрёшься:

• CORS: Поскольку они живут на разных доменах, Джа́нга по умолчанию скажет Вью: «Пошёл на хуй, чужой». Надо поставить django-cors-headers и разрешить общение. Без этого — пиздец и тишина в ответ на запросы.
• Аутентификация: Как Вью докажет, что это он, а не левый пидор? Через токены! JWT, OAuth2 — в общем, «предъяви пропуск, сука».

2. Гибридная (монолитная) архитектура

А это когда они живут в одной комнате. Джа́нга, как бабка, печёт HTML-блины, а Вью — как внучек-компьютерщик — встраивает в эти блины интерактивную начинку. Подходит, если не хочешь заморачиваться с двумя отдельными проектами или делаешь небольшую, но хитрожопую фичу.

• Джа́нга: Как и раньше, рендерит шаблоны, но теперь внутри них прячутся куски Вью-кода.
• Вью: Подключается либо прямо тегом <script> (как в старые добрые времена), либо собирается в один файл и подсовывается в шаблон.

Смотри, как это выглядит в шаблоне Джа́нги:

{% load static %}

<!-- Вот наш островок реактивности посреди серверного рендеринга -->
<div id="app">
    <!-- А этот тег verbatim — святое! Он говорит Джа́нге: «Отойди, сука, это не твои фигурные скобки, не парься». -->
    {% verbatim %}
        <p>{{ message }}</p> <!-- Это уже синтаксис Вью! -->
        <button @click="reverseMessage">Перевернуть сообщение</button>
    {% endverbatim %}
</div>

<!-- А вот и сам Вью, собранный в один файл, подъехал -->
<script src="{% static 'js/vue-app.js' %}"></script>

Вот так, блядь. Первый способ — это овердохуища масштабируемости, но и мороки побольше. Второй — быстрый, монолитный, но если Вью раздуется, как жопа после праздников, будет тесно. Выбирай, что для твоего проекта менее пиздецово.