Django VueJS

Tools to help integrate vuejs into Django projects especially with regards to forms

Installation

1. Add to your requirements or install via pip

   pip install git+https://github.com/sopelj/django-vuejs.git@version  # eg. @v0.1
   

2. To use template tags add to your projects INSTALLED_APPS

   INSTALLED_APPS = [
       ...
       'django_vuejs',
       ...
   ]

Forms

Create a form that uses the VueJsFormMixin

from django import forms
from django_vuejs.forms import VueFormMixin
from .models import Example  

class ExampleForm(VueFormMixin, forms.ModelForm):
    class Meta:
        model = Example

If you wish to change the layout of your form you can override the form template_name and create your own

from django import forms
from django_vuejs.forms import VueFormMixin
from .models import Example 

class ExampleForm(VueFormMixin, forms.ModelForm):
    template_name = 'myapp/example_form.html'
    
    class Meta:
        model = Example

This will create a form that binds the form fields to a prop called form and expects form errors to be in a prop called errors This can be changed with the properties form_prop_name and errors_prop_name.

If you wish to use a Vue component for one of your fields you can override the widgets and use the VueComponentWidget or the VueSelectWidget.

from django import forms
from django_vuejs.forms import VueFormMixin
from django_vuejs.widgets import VueComponentWidget, VueSelectWidget
from .models import Example 

class ExampleForm(VueFormMixin, forms.ModelForm):
    class Meta:
        model = Example
        widgets = {
            'phone': VueComponentWidget('phone-input'),
            'birth_date': VueComponentWidget('date-input'),
            'favourite_colour': VueSelectWidget('v-select'),
        }

Api Views

To use the Api Views, simply create a ModelViewSet with your model that extends VueFormAPIViewSet

from django_vuejs.views import VueFormAPIViewSet
from .models import Example
from .serializers import ExampleSerializer

class ExampleAPIViewSet(VueFormAPIViewSet):
    queryset = Example.objects.all()
    serializer_class = ExampleSerializer

Then include the views in your URLs.

from rest_framework.routers import DefaultRouter
from . import views

# With routers
router = DefaultRouter()
router.register(r'snippets', views.ExampleAPIViewSet)

# Or manually