Installation

Important notices

⚠ Pre-release

Adonis Cockpit is in pre-release stage. It might not work as expected and is subject to change. You can track current progress on the dedicated issue.

Feedback is greatly appreciated, feel free to create an issue.

Install adonis-cockpit

Adonis Cockpit tries to be an Out of the box Administration panel. It relies on different dependencies that will be installed and configured if they are not already present in your project:

• Lucid
• EdgeJS
• VineJS
• InertiaJS (Vue 3)
• @adonisjs/inertia

Install and configure Adonis Cockpit using the following command.

node ace add adonis-cockpit

Configure Inertia Root layout

Adonis Cockpit bring its own root layout, to avoid breaking your existing Inertia configuration you have to manually update it to use the Cockpit layout when the path starts with /admin.

const inertiaConfig = defineConfig({
  rootView: ({ request }) => {
    if (request.url().startsWith("/admin")) {
      return "cockpit::layouts/app";
    }
 
    return "inertia_layout";
  },
});
 
export default inertiaConfig;

Disable SSR for Cockpit pages

Cockpit does not support Server Side Rendering. If you are using SSR for a different Inertia app, you will encounter an error. Hopefully, it is possible to disable SSR for all the Cockpit pages:

const inertiaConfig = defineConfig({
  ssr: {
    enabled: true,
    entrypoint: "inertia/app/ssr.ts",
    pages(ctx, page) {
      if (page.startsWith("cockpit::")) {
        return false;
      }
      return true;
    },
  },
});
 
export default inertiaConfig;

Configure TailwindCSS

Adonis Cockpit uses TailwindCSS for styling. To give you the ability to customize the styles the CSS is not pre-generated.

import { Config } from "tailwindcss";
import cockpit from "adonis-cockpit/tailwind";
 
export default {
  presets: [cockpit],
} as Config;

TailwindCSS does not allow plugins to extends content and plugins options, if you have a custom TailwindCSS configuration you must manually extend them using the preset:

import { Config } from "tailwindcss";
import cockpit from "adonis-cockpit/tailwind";
import customPlugin from "custom-plugin";
 
export default {
  content: ["../custom-content/**/*.vue", ...cockpit.content],
  plugins: [customPlugin, ...cockpit.plugins],
  // Rest of your config...
} as Config;

Start your Adonis App

Start your Adonis application using node ace serve command and navigate to the /admin route.

You should already see an empty Administration Panel! It is now time to create your first Resource.