Skip to content

Commit d7a56d3

Browse files
mrholekmrholek
committed
docs: add Laravel integration example
1 parent 84cc954 commit d7a56d3

File tree

3 files changed

+202
-0
lines changed

3 files changed

+202
-0
lines changed

‎docs/content/integration-guides/laravel.md

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
---
2+
layout: docs
3+
title: CoreUI & Laravel
4+
description: The official guide for how to include and bundle CoreUI’s CSS and JavaScript in your Laravel project.
5+
group: integrations-guides
6+
toc: true
7+
---
8+
9+
10+
## Setup
11+
12+
1. **Create a new Laravel project.** Start by creating a new Laravel project
13+
14+
```sh
15+
composer create-project laravel/laravel example-app
16+
```
17+
18+
after installtion go to project
19+
20+
```sh
21+
cd example-app
22+
```
23+
24+
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.
25+
26+
```sh
27+
npm i --save @coreui/coreui @popperjs/core
28+
```
29+
30+
**For PRO users**
31+
32+
```sh
33+
npm i --save @coreui/coreui-pro @popperjs/core
34+
```
35+
36+
3. **Install additional dependency.** In addition to CoreUI, we need another dependency (Sass) to properly import and bundle CoreUI’s CSS.
37+
38+
```sh
39+
npm i --save-dev sass
40+
```
41+
42+
Now that we have all the necessary dependencies installed and setup, we can get to work creating the project files and importing CoreUI.
43+
44+
## Project structure
45+
46+
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.
47+
48+
```sh
49+
mkdir resources/sass
50+
touch resources/sass/app.scss
51+
```
52+
53+
You can also remove `app.css` file because we don't need it.
54+
55+
```sh
56+
rm resources/css/app.css
57+
rmdir resources/css
58+
```
59+
60+
When you're done, your complete project should look like this:
61+
62+
```text
63+
example-app/
64+
├── app/
65+
├── bootstrap/
66+
├── config/
67+
├── database/
68+
├── node_modules/
69+
├── public/
70+
├── resources/
71+
│ ├── js/
72+
│ │ ├── app.js
73+
│ │ └── bootstrap.js
74+
│ ├── sass/
75+
│ │ └── app.scss
76+
│ └── views/
77+
│ └── welcome.blade.php
78+
├── routes/
79+
├── storage/
80+
├── tests/
81+
├── vendor/
82+
├── ...
83+
├── composer.json
84+
├── composer.lock
85+
├── package-lock.json
86+
├── package.json
87+
├── ...
88+
└── vite.config.js
89+
```
90+
91+
92+
## Configure Vite
93+
94+
With dependencies installed and our project folder ready for us to start coding, we can now configure Vite.
95+
96+
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`.
97+
98+
```diff
99+
import { defineConfig } from 'vite';
100+
import laravel from 'laravel-vite-plugin';
101+
102+
export default defineConfig({
103+
plugins: [
104+
laravel({
105+
- input: ['resources/css/app.scss', 'resources/js/app.js'],
106+
+ input: ['resources/sass/app.scss', 'resources/js/app.js'],
107+
refresh: true,
108+
}),
109+
],
110+
});
111+
```
112+
113+
2. **Next, we modify `resources/views/welcome.blade.php`.** We'll need to add our SCSS and JavaScript files to our blade file.
114+
115+
```diff
116+
<!DOCTYPE html>
117+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
118+
<head>
119+
<meta charset="utf-8">
120+
<meta name="viewport" content="width=device-width, initial-scale=1">
121+
122+
<title>Laravel</title>
123+
124+
<!-- Fonts -->
125+
<link rel="preconnect" href="https://fonts.bunny.net">
126+
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
127+
+
128+
+ <!-- Scripts -->
129+
+ @vite(['resources/sass/app.scss', 'resources/js/app.js'])
130+
131+
<!-- Styles -->
132+
```
133+
134+
## Import CoreUI
135+
136+
1. **Now, let’s import CoreUI’s CSS.** Add the following to `resources/sass/app.scss` to import all of CoreUI’s source Sass.
137+
138+
```scss
139+
// Import all of CoreUI's CSS
140+
@import "@coreui/coreui/scss/coreui";
141+
```
142+
143+
**For PRO users**
144+
145+
```scss
146+
// Import all of CoreUI PRO's CSS
147+
@import "@coreui/coreui-pro/scss/coreui";
148+
```
149+
150+
*You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.*
151+
152+
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.
153+
154+
```js
155+
// Import all of CoreUI's JS
156+
import * as coreui from '@coreui/coreui';
157+
158+
window.coreui = coreui;
159+
```
160+
161+
**For PRO users**
162+
163+
```js
164+
// Import all of CoreUI's JS
165+
import * as coreui from '@coreui/coreui-pro';
166+
167+
window.coreui = coreui;
168+
```
169+
170+
You can also import JavaScript plugins individually as needed to keep bundle sizes down:
171+
172+
```js
173+
import { Tooltip, Toast, Popover } from '@coreui/coreui';
174+
```
175+
176+
*[Read our JavaScript docs]({{< docsref "/getting-started/javascript" >}}) for more information on how to use CoreUI's plugins.*
177+
178+
## Build and Run Laravel App
179+
180+
1. **Now we need to build CSS and JS files.** From the `example-app` folder in your terminal, run that
181+
182+
```sh
183+
npm run build
184+
```
185+
186+
2. **And finally, we can start our Laravel App.** From the `example-app` folder in your terminal, run:
187+
188+
```sh
189+
php artisan serve
190+
```
191+
192+
3. **And you’re done!** 🎉 With CoreUI’s source Sass and JS fully loaded, your local development server should now look like this.
193+
194+
Now you can start adding any CoreUI components you want to use.

‎docs/data/sidebar.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@
1616
- title: RFS
1717
- title: RTL
1818

19+
- title: Integration guides
20+
icon: input-power
21+
pages:
22+
- title: Laravel
23+
1924
- title: Customize
2025
icon: color-palette
2126
pages:

‎docs/layouts/partials/icons/input-power.svg

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)