Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
AdonisJS is a fully featured web framework focused on productivity and developer ergonomics.
# NPM
npm i @eidellev/inertia-adonisjs
# or Yarn
yarn add @eidellev/inertia-adonisjsYou can register the package, generate additional files and install additional depdencies by running:
node ace configure @eidellev/inertia-adonisjsAdd Inertia middleware to start/kernel.ts:
Server.middleware.register([
() => import('@ioc:Adonis/Core/BodyParser'),
() => import('@ioc:EidelLev/Inertia/Middleware'),
]);
export default class UsersController {
public async index({ inertia, request }: HttpContextContract) {
const users = await User.all();
return inertia.render('Users/IndexPage', { users });
}
}There are situations where you may want to access your prop data in your root Edge template. For example, you may want to add a meta description tag, Twitter card meta tags, or Facebook Open Graph meta tags.
<meta name="twitter:title" content="{{ page.title }}">Sometimes you may even want to provide data that will not be sent to your JavaScript component.
return inertia.render('Users/IndexPage', { users }, { metadata: '...' : '...' });Sometimes you need to access certain data on numerous pages within your application. For example, a common use-case for this is showing the current user in the site header. Passing this data manually in each response isn't practical. In these situations shared data can be useful.
In order to add shared props, edit start/inertia.ts:
import Inertia from '@ioc:EidelLev/Inertia';
Inertia.share({
errors: (ctx) => {
return ctx.session.flashMessages.get('errors');
},
// Add more shared props here
});If you have a page that doesn't need a corresponding controller method, like an FAQ or about page, you can route directly to a component.
// /start/routes.ts
import Route from '@ioc:Adonis/Core/Route';
Route.inertia('about', 'About');
// You can also pass root template data as the third parameter:
Route.inertia('about', 'About', { metadata: '...' });Sometimes it's necessary to redirect to an external website, or even another non-Inertia endpoint in your app, within an Inertia request. This is possible using a server-side initiated window.location visit.
Route.get('redirect', async ({ inertia }) => {
inertia.location('https://inertiajs.com/redirects');
});To enable automatic asset refreshing, you simply need to tell Inertia what the current version of your assets is. This can be any string (letters, numbers, or a file hash), as long as it changes when your assets have been updated.
To configure the current asset version, edit start/inertia.ts:
import Inertia from '@ioc:EidelLev/Inertia';
Inertia.version('v1');
// You can also pass a function that will be lazily evaluated:
Inertia.version(() => 'v2');If you are using Adonis's built-in assets manager webpack encore you can also pass the path to the manifest file to Inertia and the current version will be set automatically:
Inertia.version(() => Inertia.manifestFile('public/assets/manifest.json'));The configuration for inertia-adonisjs is set in /config/app.ts:
import { InertiaConfig } from '@ioc:EidelLev/Inertia';
export const inertia: InertiaConfig = {
view: 'app',
};You can set up the inertia root div in your view using the @inertia tag:
<body>
@inertia()
</body>