Skip to main content

inertia connector for django

Project description

inertia-django conector

Python package Coverage Status

Based on inertia-laravel.

Check https://github.com/zodman/django-inertia-demo for example how to use

Usage

render_inertia function

The easiest way to render a Vue component with inertia-django is to use the render_inertia function.
Note: You must have an Index.vue component in your project.

from inertia import render_inertia

def index(request):
    # for function views just use the render_inertia function
    return render_inertia(request, 'Index', props={'title': 'My inertia-django page'}, template_name='index.html')

Server-side setup

Install dependencies

pip install inertia-django django-js-routes

Root Template

{# templates/base.html #}
{% load js_routes_tags %}<!DOCTYPE html>
<html  class="h-full bg-gray-200">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    {% js_routes %}
    <script src="{{ STATIC_URL}}dist/app.js" defer></script>
    <link href="{{ STATIC_URL}}dist/app.css" rel="stylesheet" />
            
  </head>
  <body class="font-sans leading-none text-gray-700 antialiased">
    {{ page|json_script:"page" }}
    <div id="app">
    </div>
  </body>
</html>

Creating responses

from inertia.views import render_inertia

def event_detail(request, id):
    event = Event.objects.get(pk=id)
    props = {
        'event': {
            'id':event.id,
            'title': event.title,
            'start_date': event.start_date,
            'description': event.description
        }
    }
    return render_inertia(request, "Event/Show", props)

Client-side setup

Install dependencies

npm install @inertiajs/inertia @inertiajs/inertia-vue 
# extra deps
npm install parcel-bundler

Initialize app

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'
Vue.use(InertiaApp);

const app = document.getElementById('app');
// we are getting the initialPage from a rendered json_script
const page = JSON.parse(document.getElementById("page").textContent);

import Index from "./Pages/Index";
import Contacts from "./Pages/Contacts";
import Organization from "./Pages/Organizations";
import ContactEdit from "./Pages/Contacts.Edit";

const pages = {
  'Login': Login,
  'Index': Index,
  'Contacts': Contacts,
  'Contacts.Edit': ContactEdit,
}

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: page,
      resolveComponent: (name) => {
        console.log("resolveComponent ", name)
        return pages[name];
      },
    },
  }),
}).$mount(app)

TODO: why not use resolveComponent dynamic. TODO: partials reloads

Routing

Generating URLs

For the part of the urls the same functionality as laravel or ziggy is

django-js-routes https://pypi.org/project/django-js-routes/

TODO: explain how inertia/middleware.py works

more info https://inertiajs.com/

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 inertia-django, version 0.3.1
Filename, size File type Python version Upload date Hashes
Filename, size inertia-django-0.3.1.tar.gz (6.1 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