inertia connector for django
Project description
inertia-django conector
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.
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/
more info https://inertiajs.com/
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file inertia-django-0.2.2.tar.gz.
File metadata
- Download URL: inertia-django-0.2.2.tar.gz
- Upload date:
- Size: 5.6 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.1.1 pkginfo/1.5.0.1 requests/2.22.0 setuptools/45.2.0 requests-toolbelt/0.9.1 tqdm/4.42.1 CPython/3.7.5
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
5e01d1477554e693b9d616b4b670d076263dcef6132a5435999fcfb421154765
|
|
| MD5 |
ac1b406324d7c5d162c5a2d4d382cc6e
|
|
| BLAKE2b-256 |
31225c44af01f899560152b8e13b08c3c45191d42c5aebd9995459a4153db885
|
File details
Details for the file inertia_django-0.2.2-py2.py3-none-any.whl.
File metadata
- Download URL: inertia_django-0.2.2-py2.py3-none-any.whl
- Upload date:
- Size: 5.6 kB
- Tags: Python 2, Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.1.1 pkginfo/1.5.0.1 requests/2.22.0 setuptools/45.2.0 requests-toolbelt/0.9.1 tqdm/4.42.1 CPython/3.7.5
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
14738d18a1aebf176aa35730f3181df98f836401570796c7c1e3c4511bf6a6f6
|
|
| MD5 |
738a25dd9c24e688522ab643c879f961
|
|
| BLAKE2b-256 |
bbd2b79b61d7992a760ff1e80b3bb6fe8a6acfce9bbae5c70a0e19d93c033f7e
|
