add root class to Laravel / Inertia

Question

ok, I am going MAD...

I need to add class="h-full" to the root div inside Laravel Jetstream using Inertia. The reason for this is inside a vue file using Tailwind UI, it wants the following

However, anytime I change anything inside app.blade.php, the @inertia overrides it. I can add it manually using web inspector which resolves it but I do not get where to make modifications to it inside the app. I am not sure why.

Please see the highlighted web inspector screenshot to see where it needs to go

the code below is the app.blade.php file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        <!-- Scripts -->
        @routes
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased h-full">
        @inertia

        @env ('local')
            <script src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
        @endenv
    </body>
</html>

Where am I supposed to put the class as I am just not mentally getting this.

Did you try to write css for #app or body tag? – gguney Mar 02 '22 at 02:45 — gguney, Mar 02 '22 at 02:45

score 9 · Accepted Answer · answered Apr 12 '22 at 15:21

When using InertiaJS as a default setup, you can use @inertia to simplify what it does. When you need to add class tags, you need to break it out and expand it accordingly.

go to your app.blade.php file found under resources/views/

This is an EXAMPLE set of code

<body class="h-full font-sans antialiased">
        <div id="app" class="h-full" data-page="{{ json_encode($page) }}"></div>

        @env ('local')
            <script src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
        @endenv
    </body>

You will notice that I replaced @inertia with <div id="app"> Then at this point you can use any classes you need

D.R. · Answer 2 · 2023-02-14T15:58:56.863

9

Until this issue is fixed, I suggest a less...intrusive fix.

In your tailwind.css add

#app {
    @apply h-full; /* feel free to add more classes */
}

This is better @ArcticMediaRyan solution cause

SSR is not broken, if you ever need it
Inertia may receive an important update to the @inertia directive, that we don't want to miss.
Quite neat, I love plug-n-play nature of it :D

My personal tailwind.css looks like this (I've faced the same issue)

/* nothing new should without a good damn reason */
@tailwind base;
@tailwind components;
@tailwind utilities;

/*
fixme   not able to add classes easily to the root component
        https://github.com/inertiajs/inertia-laravel/issues/370
*/
#app {
    @apply h-full;
}

edited Feb 14 '23 at 15:58

answered Jun 18 '22 at 19:05

D.R.

2,540
3
24
49

1

I love this solution for sure. The solution I provided was given to me on discord by the creator of Inertia. Yours however does fix things cleanly! – ArcticMediaRyan Jun 19 '22 at 22:31
1

@ArcticMediaRyan ❤️ – D.R. Jun 20 '22 at 23:32
You're saying to simply add styles to the element? Madness :-) Yeah, I was needlessly wracking my brain on this one too. – Spencer Williams Nov 20 '22 at 19:16
1

@SpencerWilliams nah, every simple solution took 5-10 hours of perfectionism and banging head over the keyboard : D – D.R. Dec 02 '22 at 06:26
1

Option #2 is not correct. That comment was recommending where this config item could potentially be added if Inertia were going to implement something for this use case. Right now...only option #1 is really viable. – Nick Poulos Feb 14 '23 at 06:51
in my case #app was not sufficent so i end up seting the h-full to html&body at app.css. html,body,#app { @apply h-full } – SeyT Jun 07 '23 at 13:01

score 0 · Answer 3 · answered May 02 '23 at 13:18

It's not just Jeststream (and other Tailwind-inclined apps) that like to assume that the "app" <div> has some classes inherent on it. Some Bootstrap frameworks are also built this way.

For those who don't use Tailwind, you can also add the class via JavaScript. Agreed, it's not quite as elegant as doing it through the CSS, but this is a more generalised solution that will work for all Inertia applications:

//
// Inertia's `app.js` file
//   The DOM has been mounted by the time this function is called
//   hence we can manipulate it with JavaScript:
createInertiaApp({
    id: 'app',
    resolve: async(name) => {

        // your logic goes here, import.meta.glob();, etc.

        document.getElementById('app').classList.add('h-full');

        // more logic?

        return page;
    },
    setup({ el, App, props, plugin }).mount(el);
});

score 0 · Answer 4 · answered May 14 '23 at 17:17

When creating inertia App in your app.js file, you just need to define a class for the root element:

* all code of app.js

import './bootstrap'
import '../css/app.css'

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'

createInertiaApp({
  title: title => `${title} - ${appName}`,
  resolve: name => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup ({ el, App, props, plugin }) {
    return createApp({
      render: () => {
        el.classList.add('h-full') // <---
        return h(App, props)
      }
    })
      .use(plugin)
      .use(ZiggyVue, Ziggy)
      .mount(el)
  },
  progress: {
    color: '#4B5563'
  }
})

Work checked on inertia-laravel v.0.6.8 !

add root class to Laravel / Inertia

4 Answers4