Integrating CoreUI with Laravel 8

CoreUI is a free admin template built on top of Bootstrap 4. It's modern, beautiful and very clean. In this post, I'll show you how one can integrate & theme this amazing kit.
If you'd like to see it in action you can have a look at their live demo.

Since this is just a tutorial, let's keep things simple and to the point. I'll list the steps here and if you'd like to take a look at a more structured way to do this, you can have a look at my repo on GitHub.

Import CoreUI Package

Import the CoreUI package using NPM.
npm install @coreui/coreui@ --save

Create a Layout with Starter Code

<!doctype html>
<html lang="en">
 <head>
 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- CoreUI CSS -->
 <link rel="stylesheet" href="https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css" crossorigin="anonymous">

 <title>CoreUI</title>
 </head>
 <body class="c-app">

 <script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.bundle.min.js"></script>
 </body>
</html>

Setup SASS

Create resources/scss/app.scss.

// CoreUI
// - Variables
@import "./variables";
// - Main
@import "~@coreui/coreui/scss/coreui";

Create resources/scss/_variables.scss.

// CoreUI Variable Overrides

Update webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/app.scss', 'public/css', [
        //
    ]);

Compile to CSS
npm run dev

Update Previously Created Template

<!doctype html>
<html lang="en">
 <head>
 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

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

 <title>@yield('title')</title>
 </head>
 <body class="c-app">
  @yield('content')
 <script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.bundle.min.js"></script>
 </body>
</html>