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.

Source Distribution

djangovue-0.0.12.tar.gz (204.9 kB view hashes)

Uploaded Source

Built Distribution

djangovue-0.0.12-py3-none-any.whl (206.8 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page