vueda

Appearance

VUEDA / Django + Vue

Build business applicationswith Django and Vue.

Turn your Django models, serializers, and viewsets into Vue forms, lists, and detail screens. Add workflows, permissions, and audit history, with room to make the UI your own.

Start building
Try the live demo

To try the demo, choose an account on its sign-in page.

Widget WarehouseExample application
Widget Warehouse widget list with sidebar navigation, filter and sort controls, search, and a table of widget records.Widget Warehouse widget list with sidebar navigation, filter and sort controls, search, and a table of widget records.
Widget Warehouse, a working application built with VUEDA.View demo source

View Markdown

How it works

Define it in Django. Work with it in Vue.

Once your application is connected, standard model screens need no separate per-model frontend code.

  1. Define your application

    Build models, serializers, and viewsets with VUEDA's Django and REST framework base classes.

    python
    class PurchaseOrder(VuedaModel):
    reference = models.CharField(max_length=32)
    supplier = models.ForeignKey(Supplier, ...)
    order_date = models.DateField()


class PurchaseOrderViewSet(VuedaViewSet):
    queryset = PurchaseOrder.objects.all()
    serializer_class = PurchaseOrderSerializer

  2. Let the server describe it

    Register your models. VUEDA exposes metadata: information about their fields, actions, and permissions.

    json
    {
  "verbose_name": "purchase order",
  "model_fields": {
    "supplier": {
      "label": "Supplier",
      "required": true,
      "type_model": "ForeignKey",
      "model": "supplier"
    },
    "order_date": { ... }
  },
  "model_actions": [{ "name": "update", ... }]
}

  3. Get application screens

    The Vue client uses that metadata to generate routes, forms, lists, and detail views.

    Generated purchase order form with reference, supplier, warehouse, and date fields above editable order lines.Generated purchase order form with reference, supplier, warehouse, and date fields above editable order lines.
Explore the architecture

Beyond editing records

Built for the way your business works.

Give work a workflow

Define states and transitions for your records. Make approvals and other business actions part of the application.

Add a workflow

Control access. Track changes.

Enforce model, object, and workflow permissions on the server. Inspect audit history to see what changed and who changed it.

Understand permissions

Make the interface your own

Configure fields and list columns, add custom Vue views, and adjust the theme to fit your application.

Customize your views
Custom Widget Warehouse dashboard with a welcome message and summary cards for stock below reorder level, overdue arrivals, suppliers under review, and open order value.Custom Widget Warehouse dashboard with a welcome message and summary cards for stock below reorder level, overdue arrivals, suppliers under review, and open order value.

Your first application

Start with a working inventory model.

Scaffold a project, connect Django and Vue, and build your first screens with the step-by-step tutorial.

Built on Django REST framework, PostgreSQL, and Vue 3.

Start building

VUEDA: Vue.js User Experience for Django Administration.BSD 3-Clause license Built by Arrai Innovations