Warning: This project is in a very early stage and depends on another early stage library and its frontend adapters called Inertia.js.
This package is meant to be used in a Django application and it uses django-rest-framework's serializers.
$ pipenv install django djangorestframework django-webpack-loader
There is still a few too many manual steps involved using inertia-django. I'm looking for ways (and people to help) to make the initial setup more smooth.
Install the inertia-django package from PyPI:
$ pipenv install inertia-django
The easiest way to get started is with the inertia-django-boilerpate.
INFO: For now it might be the easiest to take a look or clone the example repository.
You have to use webpack for the Dynamic Imports Feature. The following config is borrowed from the Django Inertia.js Example. It uses a few plugins that are not necessary like PurgeCSS, Tailwind, MiniCSSExtract, etc. But the important ones are:
- Webpack Bundle Tracker for Django Webpack Loader.
- Vue Loader is optional, but there is only the inertia-vue adapter yet.
webpack.config.js:
const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const glob = require("glob-all");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PurgecssPlugin = require("purgecss-webpack-plugin");
class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
}
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
// TODO: adjust the entry points to your project
entry: ["./core/assets/js/index.js", "./core/assets/css/index.postcss"],
output: {
publicPath: "/static/bundles/",
filename: "[name]-[hash].js",
chunkFilename: '[name]-[hash].js',
path: path.resolve('./bundles/'),
},
plugins: [
new BundleTracker({ filename: './webpack-stats.json' }),
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "[name]-[hash].css"
}),
new PurgecssPlugin({
paths: glob.sync([
// TODO: adjust the directories to your project
path.join(__dirname, "core/assets/js/**/*.vue"),
path.join(__dirname, "core/templates/index.html")
]),
extractors: [
{
extractor: TailwindExtractor,
extensions: ["html", "js", "vue"]
}
]
})
],
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
],
plugins: ["@babel/plugin-syntax-dynamic-import"]
}
}
},
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.postcss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader',
]
}
]
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue$': 'vue/dist/vue.runtime.js',
// TODO: adjust or remove, it's a convenient way to import js files in your components
'@': path.resolve('core/assets/js'),
}
},
}The easiest way to render a Vue component with inertia-django is to use the render_inertia function. Note: You have to 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')This would be a bit much to write everytime so you can omit the template_name and set it in settings.py:
INERTIA_TEMPLATE = 'index.html'After that you just have to call:
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'})inertia-django ships with a crude implementations of the generic ListView:
views.py:
class Index(InertiaListView):
# Inertia supports List and DetailViews right now
model = Contact
serializer_class = ContactSerializer
component_name = "Index"Index.vue
<template>
<Layout>
<h2 class="mb-4">Contacts</h2>
<p>User: {{shared.user.username}}</p>
<ul>
<li :key="contact.id" v-for="contact in contact_list">
<inertia-link :href="'/contact/' + contact.id">
{{contact.name}}
</inertia-link>
</li>
</ul>
</Layout>
</template>
<script>
import { InertiaLink } from "inertia-vue";
import Layout from "@/Components/Layout";
export default {
props: ["contact_list", "shared"],
components: { Layout, InertiaLink }
};
</script>inertia-django ships with a crude implementations of the generic DetailView:
views.py:
class ContactView(InertiaDetailView):
model = Contact
serializer_class = ContactSerializer
component_name = "Contact"
props = {"test": True} # you can inject any props you wantContact.vue:
<template>
<Layout>
<inertia-link href="/">Home</inertia-link>
<h2 class="mb-4">{{contact.name}}, {{contact.first_name}}</h2>
<p>Age: {{contact.age}}</p>
<p>Test: {{test}}</p>
</Layout>
</template>
<script>
import { InertiaLink } from "inertia-vue";
import Layout from "@/Components/Layout";
export default {
props: ['contact', 'test'],
components: { Layout, InertiaLink }
};
</script>If you want to have some basic props that are always injected, you can share them between Components:
I had to declare the
UserSerializerin apps.py so that it is available at startup. If somebody has a better idea feel free to create an issue.
e.g. apps.py:
from django.apps import AppConfig
from django.contrib.auth import get_user, get_user_model
from rest_framework import serializers
from inertia import share
def current_user(request):
class UserSerializer(serializers.ModelSerializer):
class Meta:
model = get_user_model()
fields = ["username", "email"]
return UserSerializer(get_user(request)).data
class CoreConfig(AppConfig):
name = 'core'
def ready(self):
share('title', 'Django Inertia.js Example 🤘')
share('user', current_user)As you might have recognized current_user is a function. While rendering inertia-django checks if a shared property is callable and if it is, it will call that function with the current request.
Take a look at this repository for an example of how to use this package.