Django and Vue.js Integration Example

The example you've provided demonstrates a basic integration between Django (backend) and Vue.js (frontend) using a REST API approach.

Django Model

The Django model defines a simple Item with two fields:

PYTHONCopied
# Django model example
from django.db import models

class Item(models.Model):
    name = models.CharField(max_length=100)
    value = models.IntegerField()

    def __str__(self):
        return self.name

This model would be stored in your database and represents items with a name (string) and value (integer).

Vue.js Frontend

The Vue.js instance fetches data from a Django REST API endpoint:

JAVASCRIPTCopied
// Vue.js example to fetch data from Django
new Vue({
    el: '#app',
    data: {
        items: []
    },
    created() {
        fetch('/api/items/')
            .then(response => response.json())
            .then(data => {
                this.items = data;
            });
    }
});

This Vue instance:

• Targets an HTML element with the ID #app
• Initializes an empty items array
• When created, fetches data from /api/items/ endpoint
• Parses the JSON response
• Populates the items array with the retrieved data

To complete this integration, you would need to:

1. Set up Django REST Framework to create the API endpoint
2. Create a serializer for the Item model
3. Create a view and URL configuration for the endpoint
4. Set up CORS if your Vue app is served separately from Django

This pattern provides a solid foundation for building more complex applications with Django and Vue.js.