DEV Community

loading...
Cover image for Integrating CoreUI with Laravel 8

Integrating CoreUI with Laravel 8

zaxwebs profile image Zack Webster ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

Setup SASS

Create resources/scss/app.scss.

// CoreUI
// - Variables
@import "./variables";
// - Main
@import "~@coreui/coreui/scss/coreui";
Enter fullscreen mode Exit fullscreen mode

Create resources/scss/_variables.scss.

// CoreUI Variable Overrides
Enter fullscreen mode Exit fullscreen mode

Update webpack.mix.js

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

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>
Enter fullscreen mode Exit fullscreen mode

Theming

You can now update CoreUI variables by setting them in resources/scss/_variables.scss and get your admin template set as per your desired branding.

That's All, Folks!

I hope this article helps people out there. Feel free to reach out in the comments about any concerns.

Buy me a Coffee?

Discussion (3)

Collapse
tomeq34 profile image
Tomeq34

Thank you Zack, great article. Fingers crossed for more :) Greetings

Collapse
zaxwebs profile image
Zack Webster Author

Welcome! And thank you for the kind words.

Collapse
tomeq34 profile image
Tomeq34

if you find a minute or two to check our other CoreUI tools, just let me know ;]

Forem Open with the Forem app