Skip to main content

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

Project description

djangovue

Code style: black

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.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for djangovue, version 0.0.12
Filename, size File type Python version Upload date Hashes
Filename, size djangovue-0.0.12-py3-none-any.whl (206.8 kB) File type Wheel Python version py3 Upload date Hashes View
Filename, size djangovue-0.0.12.tar.gz (204.9 kB) File type Source Python version None Upload date Hashes View

Supported by

Pingdom Pingdom Monitoring Google Google Object Storage and Download Analytics Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page