CoreUI & Laravel

The official guide for how to include and bundle CoreUI’s CSS and JavaScript in your Laravel project.


  1. Create a new Laravel project. Start by creating a new Laravel project

    composer create-project laravel/laravel example-app

    after installtion go to project

    cd example-app
  2. Install CoreUI Now we can install CoreUI. We’ll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Popper here.

    npm i --save @coreui/coreui @popperjs/core

    For PRO users

    npm i --save @coreui/coreui-pro @popperjs/core
  3. Install additional dependency. In addition to CoreUI, we need another dependency (Sass) to properly import and bundle CoreUI’s CSS.

    npm i --save-dev sass

Now that we have all the necessary dependencies installed and setup, we can get to work creating the project files and importing CoreUI.

Project structure

We’ve already created the example-app folder and installed all dependencies. Now we’ll also create our app.scss file. Run the following from example-app, or manually create the folder and file structure shown below.

mkdir resources/sass
touch resources/sass/app.scss

You can also remove app.css file because we don’t need it.

rm resources/css/app.css
rmdir resources/css

When you’re done, your complete project should look like this:

├── app/
├── bootstrap/
├── config/
├── database/
├── node_modules/
├── public/
├── resources/
│   ├── js/
│   │   ├── app.js
│   │   └── bootstrap.js
│   ├── sass/
│   │   └── app.scss
│   └── views/
│       └── welcome.blade.php
├── routes/
├── storage/
├── tests/
├── vendor/
├── ...
├── composer.json
├── composer.lock
├── package-lock.json
├── package.json
├── ...
└── vite.config.js

Configure Vite

With dependencies installed and our project folder ready for us to start coding, we can now configure Vite.

  1. Open vite.config.js in your editor. Since it’s not blank, we’ll need to make some changes to work with our app.scss file instead of app.css.

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    export default defineConfig({
       plugins: [
    -        input: ['resources/css/app.scss', 'resources/js/app.js'],
    +        input: ['resources/sass/app.scss', 'resources/js/app.js'],
             refresh: true,
  2. Next, we modify resources/views/welcome.blade.php. We’ll need to add our SCSS and JavaScript files to our blade file.

    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <!-- Fonts -->
          <link rel="preconnect" href="">
          <link href=",600&display=swap" rel="stylesheet" />
    +     <!-- Scripts -->
    +     @vite(['resources/sass/app.scss', 'resources/js/app.js'])
          <!-- Styles -->

Import CoreUI

  1. Now, let’s import CoreUI’s CSS. Add the following to resources/sass/app.scss to import all of CoreUI’s source Sass.

    // Import all of CoreUI's CSS
    @import "@coreui/coreui/scss/coreui"

    For PRO users

    // Import all of CoreUI PRO's CSS
    @import "@coreui/coreui-pro/scss/coreui"

    You can also import our stylesheets individually if you want. Read our Sass import docs for details.

  2. Next we import CoreUI’s JavaScript. Add the following to resources/js/bootstrap.js to import all of CoreUI’s JS. Popper will be imported automatically through CoreUI.

    // Import all of CoreUI's JS
    import * as coreui from '@coreui/coreui'
    window.coreui = coreui

    For PRO users

    // Import all of CoreUI's JS
    import * as coreui from '@coreui/coreui-pro'
    window.coreui = coreui

    You can also import JavaScript plugins individually as needed to keep bundle sizes down:

    import { Tooltip, Toast, Popover } from '@coreui/coreui'

    Read our JavaScript docs for more information on how to use CoreUI’s plugins.

Build and Run Laravel App

  1. Now we need to build CSS and JS files. From the example-app folder in your terminal, run that

    npm run build
  2. And finally, we can start our Laravel App. From the example-app folder in your terminal, run:

    php artisan serve	
  3. And you’re done! 🎉 With CoreUI’s source Sass and JS fully loaded, your local development server should now look like this.

    Now you can start adding any CoreUI components you want to use.