{"id":13805337,"url":"https://github.com/zodman/inertia-django","last_synced_at":"2025-05-13T19:30:46.358Z","repository":{"id":45047552,"uuid":"241277048","full_name":"zodman/inertia-django","owner":"zodman","description":"django connector for inertia","archived":false,"fork":false,"pushed_at":"2023-05-20T15:37:37.000Z","size":115,"stargazers_count":91,"open_issues_count":2,"forks_count":15,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-04T01:04:48.719Z","etag":null,"topics":["hacktoberfest","hacktoberfest2020"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zodman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-02-18T05:04:22.000Z","updated_at":"2024-03-09T05:49:50.000Z","dependencies_parsed_at":"2024-04-10T01:49:43.510Z","dependency_job_id":"9ffc696e-842a-4c77-acea-1cf7614e5128","html_url":"https://github.com/zodman/inertia-django","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zodman%2Finertia-django","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zodman%2Finertia-django/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zodman%2Finertia-django/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zodman%2Finertia-django/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zodman","download_url":"https://codeload.github.com/zodman/inertia-django/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225254305,"owners_count":17445160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","hacktoberfest2020"],"created_at":"2024-08-04T01:01:00.212Z","updated_at":"2024-11-18T21:31:03.820Z","avatar_url":"https://github.com/zodman.png","language":"Python","funding_links":[],"categories":["Adapters"],"sub_categories":["Server-side"],"readme":"# inertia-django conector\n![Python package](https://github.com/zodman/inertia-django/workflows/Python%20package/badge.svg)\n[![Coverage Status](https://coveralls.io/repos/github/zodman/inertia-django/badge.svg?branch=master)](https://coveralls.io/github/zodman/inertia-django?branch=master)\n\n### TL;DR: \n\n`inertia-django` connetor gives you the ability to replace 'classic' templates with **Vue / React / Svelte** components.\n- SPA user experience with MPA style development flow.\n- No need for clientside routing, just use `urls.py`.\n- No need for API endpoints, just pass data directly to the props of the client-side component.\n\nbased on inertia-laravel.\n\n#### demo project available in this repo: https://github.com/zodman/django-inertia-demo\n#### more on inertia: https://inertiajs.com\n\n\n## Usage\n\n### `render_inertia` function\n\nThe easiest way to render a Vue component with inertia-django is to use the `render_inertia` function.   \n*Note:* You must  have an `Index.vue` component in your project.\n\n```python\nfrom inertia import render_inertia\n\ndef index(request):\n    # for function views just use the render_inertia function\n    return render_inertia(\n        request,\n        'Index',\n        props={'title': 'My inertia-django page'},\n        template_name='index.html'\n    )\n```\n\n----\n\n## Server-side setup\n\n### Install dependencies\n\n`pip install inertia-django django-js-routes`\n\n### Root Template\n\n```html+django\n{# templates/base.html #}\n{% load js_routes_tags %}\u003c!DOCTYPE html\u003e\n\u003chtml  class=\"h-full bg-gray-200\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0\" /\u003e\n    {% js_routes %}\n    \u003cscript src=\"{{ STATIC_URL}}dist/app.js\" defer\u003e\u003c/script\u003e\n    \u003clink href=\"{{ STATIC_URL}}dist/app.css\" rel=\"stylesheet\" /\u003e\n            \n  \u003c/head\u003e\n  \u003cbody class=\"font-sans leading-none text-gray-700 antialiased\"\u003e\n    {{ page|json_script:\"page\" }}\n    \u003cdiv id=\"app\"\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Creating responses\n\n```python\nfrom inertia.views import render_inertia\n\ndef event_detail(request, id):\n    event = Event.objects.get(pk=id)\n    props = {\n        'event': {\n            'id':event.id,\n            'title': event.title,\n            'start_date': event.start_date,\n            'description': event.description\n        }\n    }\n    return render_inertia(request, \"Event/Show\", props)\n```\n\nWe strongly recommend to use [marshmallow](https://marshmallow.readthedocs.io/en/latest/) \nsince it has a serializer, validation and  fully compatible with django.\n\n\n## Client-side setup\n### Install dependencies\n```bash\nnpm install @inertiajs/inertia @inertiajs/inertia-vue \n# extra deps\nnpm install parcel-bundler\n```\n\n### Initialize app\n\n```javascript\nimport { InertiaApp } from '@inertiajs/inertia-vue'\nimport Vue from 'vue'\nVue.use(InertiaApp);\n\nconst app = document.getElementById('app');\n// we are getting the initialPage from a rendered json_script\nconst page = JSON.parse(document.getElementById(\"page\").textContent);\n\nimport Index from \"./Pages/Index\";\nimport Contacts from \"./Pages/Contacts\";\nimport Organization from \"./Pages/Organizations\";\nimport ContactEdit from \"./Pages/Contacts.Edit\";\n\nconst pages = {\n  'Login': Login,\n  'Index': Index,\n  'Contacts': Contacts,\n  'Contacts.Edit': ContactEdit,\n}\n\nnew Vue({\n  render: h =\u003e h(InertiaApp, {\n    props: {\n      initialPage: page,\n      resolveComponent: (name) =\u003e {\n        console.log(\"resolveComponent \", name)\n        return pages[name];\n      },\n    },\n  }),\n}).$mount(app)\n\n```\n\nTODO: add why not use resolveComponent dynamic.  \n\n\n## Routing\n\n### Generating URLs\n\nFor the part of the urls the same functionality as laravel or ziggy is \n\n*django-js-routes* https://pypi.org/project/django-js-routes/\n\n# TODO: explain how inertia/middleware.py works\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzodman%2Finertia-django","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzodman%2Finertia-django","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzodman%2Finertia-django/lists"}