inertia-laravel
inertia-laravel copied to clipboard
inertiajs
[IDEA] Custom classes on the root component
@inertia('custom-app-id', 'h-full bg-white')
Rendering:
<div id="'.$id.'" class="'.$classes.'" data-page="{{ json_encode($page) }}"></div>
This could come in handy when you need to add classes to the main div without having to overwrite it or nest the app inside further components.
I'm not sure if Inertia should include this, because of different ways frontend frameworks might render/mount. As an example, Vue 2 replaces the mount point with the mounted component, which means the added classes won't have any effect:
<body>
<div id="app" class="h-full bg-white"></div>
</body>
<script>
const vm = new Vue({
template:`<h1>Vue 2 Demo</h1>`
})
vm.$mount("#app")
</script>
<!-- Output -->
<body>
<h1>Vue 2 Demo</h1>
</body>
Vue 3 does mount inside the mounting point, which would result in the following output:
<body>
<div id="app" class="h-full bg-white"></div>
</body>
<script>
const app = Vue.createApp({
template:`<h1>Vue 3 Demo</h1>`
})
app.mount("#app")
</script>
<!-- Output -->
<body>
<div id="app" class="h-full bg-white">
<h1>Vue 3 Demo</h1>
</div>
</body>
These differences between frameworks means it won't be a reliable solution and will only work for certain frameworks
I'm not sure if Inertia should include this, because of different ways frontend frameworks might render/mount. As an example, Vue 2 replaces the mount point with the mounted component, which means the added classes won't have any effect:
I don't see why that would be an issue. If it doesn't work on/for a given framework then that shouldn't stop this from being included. Simply don't use it if your framework doesn't support it. This would be a very helpful feature as there is no way to accomplish this w/o modifying the package.
Meanwhile I consider this an easy-fix for those, who need it for tailwind-ui :D https://stackoverflow.com/a/72671986/6252398
Another idea would also be to add it here.
createInertiaApp({
class: 'h-full bg-white',
// ...
})
@lucaSabato if you want to fix this yourself @nurdism has a PR for it https://github.com/inertiajs/inertia-laravel/pull/382
Hey there,
We're closing this issue because it's inactive, already solved, old or not relevant anymore. Feel free to open up a new issue if you're still experiencing this problem.
