CoreUI & Laravel
The official guide for how to include and bundle CoreUIβs CSS and JavaScript in your Laravel project.
π€ Looking for the LLM-optimized version? View llm.md
Setup
-
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
-
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
-
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:
example-app/
βββ 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.
-
Open
vite.config.js
in your editor. Since itβs not blank, weβll need to make some changes to work with ourapp.scss
file instead ofapp.css
.import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ - input: ['resources/css/app.scss', 'resources/js/app.js'], + input: ['resources/sass/app.scss', 'resources/js/app.js'], refresh: true, }), ], });
-
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()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Fonts --> <link rel="preconnect" href="https://fonts.bunny.net"> <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" /> + + <!-- Scripts --> + @vite(['resources/sass/app.scss', 'resources/js/app.js']) <!-- Styles -->
Import CoreUI
-
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.
-
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
-
Now we need to build CSS and JS files. From the
example-app
folder in your terminal, run thatnpm run build
-
And finally, we can start our Laravel App. From the
example-app
folder in your terminal, run:php artisan serve
-
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.