Keeping up with the latest: need some help!

Why not check out the new starter kits for auth? They have a livewire one too :) https://laravel.com/docs/12.x/starter-kits

There is also filamentphp which is a whole backend system https://filamentphp.com/

But I would at least learn tailwind for the frontend. It is what almost everything uses today and it isnt that hard. Also livewire ships with vite+tailwind set up for you

I you want to continue with Laravel, I think that the TALL (TailwindCSS, AlpineJS, Laravel, Livewire) technologies are important.

@ilovecodinginphp Don’t be dismayed, I still use my beloved Bootstrap with Laravel, even right up to Laravel 12 😉

I’d say, unfortunately, front-end development is changing. Most projects, CSS and JavaScript is modular and transpiled instead of just straight-linking to a static .css or .js file using <link> and <script> tags. So, I’d get familiar with Vite, even if it’s just to get used to the workflow, by creating static CSS and JavaScript files in your resources directory:

touch resources/css/app.css
touch resources/js/app.js

Building them with Vite:

npm install
npm run build

And then adding the Blade directive to your layout template to inject those files:

@vite([
    'resources/css/app.css',
    'resources/js/app.js',
])

If all is good, you can then maybe look at replacing the app.css file with a Scss file (if you intend to use Bootstrap):

touch resources/sass/app.scss

You’ll need to update the entry points in your vite.config.js file:

  export default defineConfig({
      plugins: [
          laravel({
              input: [
-                 'resources/css/app.css',
+                 'resources/sass/app.scss',
                  'resources/js/app.js',
              ],
              refresh: true,
          }),
      ],
  });

And also in your Blade layout:

  @vite([
-     'resources/css/app.css',
+     'resources/sass/app.scss',
      'resources/js/app.js',
  ])

When building using npm run build you might get an error saying you need to install a Sass-related module. That’s fine, just install the package. I think it’ll try and say sass-embedded is missing, so install it as a dev dependency:

npm install --save-dev sass-embedded

And then try running npm run build again.

If that works, you can look at installing and using Bootstrap:

npm install --save-dev bootstrap

Update your resources/sass/app.scss file to import Bootstrap:

@import "bootstrap/scss/bootstrap";

And hopefully you should now have a Blade view using Bootstrap styling.

Obviously running npm run build after each change is tiresome in development, so you can instead run npm run dev. This will start running the Vite dev server, which will watch for changes in your files, and automatically refresh the page when needed. You also don’t need to change anything in your Blade view(s); the @vite directly will automatically inject the correct tags in your web page based on if you’re building static assets or running the dev server.