djangovue

A set of helper tags and form widgets for making django and vue play nicely.

Installation

pip install djangovue

Tags Example

class IndexView(TemplateView):
  template = 'index.html'

  def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    context['message'] = 'Hello from Django'
    return context

{% load djangovue %}

{% load_vuejs %}

{% djangovue on %}
  <div id="app">
    <p>
      {{ message }}
  </p>
  {% djangovue off %}
    <p>
    {{ message }}
  </p>
  {% enddjangovue off %}

  </div>
  
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello from Vue'
      }
    });
  </script>
{% enddjangovue%}

Widgets Example

from django import forms
from djangovue import widgets


class UserForm(forms.Form):
    username = forms.CharField(
        max_length=30,
        widget=widgets.TextInput(
            model="user.username",
            modifier=widgets.TextInput.LAZY,
            attrs={":disabled": "disable"},
        ),
    )
    first_name = forms.CharField(
        max_length=30,
        widget=widgets.TextInput(
            model="user.first_name", attrs={":disabled": "disable"}
        ),
    )
    last_name = forms.CharField(
        max_length=30,
        widget=widgets.TextInput(
            model="user.last_name", attrs={":disabled": "disable"}
        ),
    )
    gender = forms.ChoiceField(
        choices=[("male", "Male"), ("female", "Female")],
        widget=widgets.RadioSelect(
            attrs={"v-model": "user.gender", ":disabled": "disable"}
        ),
    )
    disable = forms.BooleanField(
        required=False, widget=widgets.CheckboxInput() # v-model will automatically be set to `disable`
    )

Development

Should you wish to develop the library there are some helper functions within the Makefile to get you started.

make install # Installs the project dependencies including the node modules required for the DjangoVue Vue plugin
make bundle # Transpiles and bundles the DjangoVue.ts file
make test # Runs tests
make black # Applies black formatting to the project

Once installed run the following to view the examples:

cd djangovue/examples
poetry run ./manage.py runserver

Note this project uses Poetry for packaging and managing dependencies.