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

Ответ

Существует два основных подхода к интеграции Vue.js с Django, выбор между которыми зависит от архитектуры проекта.

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

Это самый популярный и масштабируемый подход. Django выступает в роли backend-сервиса, предоставляя REST API, а Vue.js — это полностью отдельное одностраничное приложение (SPA), которое взаимодействует с этим API.

Django: Используется Django REST Framework (DRF) для создания эндпоинтов.
Vue.js: Разрабатывается и собирается независимо (с помощью Vite или Vue CLI). Деплоится на статический хостинг (Nginx, S3) или Node.js сервер.

Пример эндпоинта на DRF:

# models.py
from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    completed = models.BooleanField(default=False)

# serializers.py
from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = '__all__'

# views.py
from rest_framework import viewsets

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer

Важные аспекты:

Требуется настройка CORS (django-cors-headers) для междоменных запросов.
Аутентификация обычно реализуется через токены (JWT, OAuth2).

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

В этом подходе Vue.js встраивается непосредственно в шаблоны Django для добавления интерактивности на отдельные страницы. Django по-прежнему отвечает за рендеринг HTML.

Django: Рендерит шаблоны, в которые включены скрипты Vue.
Vue.js: Используется либо как простая библиотека, подключенная через <script>, либо собирается с помощью Webpack/Vite и интегрируется через django-webpack-loader.

Пример в Django-шаблоне:

{% load static %}

<div id="app">
    <!-- Тег verbatim нужен, чтобы Django не пытался обработать синтаксис Vue {{...}} -->
    {% verbatim %}
        <p>{{ message }}</p>
        <button @click="reverseMessage">Перевернуть</button>
    {% endverbatim %}
</div>

<!-- Подключение собранного JS-файла Vue -->
<script src="{% static 'js/vue-app.js' %}"></script>

Этот способ хорошо подходит для постепенного добавления реактивности в существующий Django-проект или для небольших приложений.