Where to put assets CSS and JS in app.blade.php ?

When I look at the Inertia Server-side Setup documentation, they look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

However, when building a monolith app whether using an existing free template, or creating your own, you'll certainly have your own CSS and JS which you will link them in app.blade.php. CSS in the head, and JS in the body (usually).

My question is, for CSS where should I put my assets?

Above or below this code?

    @vite('resources/js/app.js')
    @inertiaHead

And for my JS assets, should I put it above or below this code?

@inertia

Thank you in advance.

abdullahal_22

2 years ago

Level 1

i also started learning inertia JS with react, I think standard webpage structure would be the best option!!

Merklin

1 year ago

Level 7

Overall, it doesn't matter in what order you add them. Just be aware, that if you add custom css and add it after vite directive, if there is an overlap of CSS classes (two classes with same name), the class from the custom css will be applied, as it is added/loaded later. Using this approach allows to override some default talwind/bootstrap classes.

As for JS files, add those that may break the page, add them before the closing head tag, while the once not so necessary, defer before the closing body tag. Here, it also doesn't matter in what order you add the js files.

Please or to participate in this conversation.