Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zodman/inertia-django
django connector for inertia
https://github.com/zodman/inertia-django
hacktoberfest hacktoberfest2020
Last synced: about 2 months ago
JSON representation
django connector for inertia
- Host: GitHub
- URL: https://github.com/zodman/inertia-django
- Owner: zodman
- License: unlicense
- Created: 2020-02-18T05:04:22.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-20T15:37:37.000Z (over 1 year ago)
- Last Synced: 2024-08-04T01:04:48.719Z (5 months ago)
- Topics: hacktoberfest, hacktoberfest2020
- Language: Python
- Homepage:
- Size: 112 KB
- Stars: 91
- Watchers: 2
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-inertiajs - Django
README
# inertia-django conector
[](https://coveralls.io/github/zodman/inertia-django?branch=master)
### TL;DR:
`inertia-django` connetor gives you the ability to replace 'classic' templates with **Vue / React / Svelte** components.
- SPA user experience with MPA style development flow.
- No need for clientside routing, just use `urls.py`.
- No need for API endpoints, just pass data directly to the props of the client-side component.
based on inertia-laravel.
#### demo project available in this repo: https://github.com/zodman/django-inertia-demo
#### more on inertia: https://inertiajs.com
## 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.
```python
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
```html+django
{# templates/base.html #}
{% load js_routes_tags %}
{% js_routes %}
{{ page|json_script:"page" }}
```
### Creating responses
```python
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)
```
We strongly recommend to use [marshmallow](https://marshmallow.readthedocs.io/en/latest/)
since it has a serializer, validation and fully compatible with django.
## Client-side setup
### Install dependencies
```bash
npm install @inertiajs/inertia @inertiajs/inertia-vue
# extra deps
npm install parcel-bundler
```
### Initialize app
```javascript
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: add 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/
# TODO: explain how inertia/middleware.py works