mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(docs): nextUI with laravel (#4432)
* chore(docs): support laravel route * feat(docs): add laravel.mdx * chore(docs): update laravel.mdx * chore(docs): update laravel.mdx * Update apps/docs/config/routes.json --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com> Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
This commit is contained in:
Tsuki
GitHub
parent
0401f2548f
commit
0eb96f6e5e
@ -81,6 +81,13 @@
|
||||
"title": "Astro",
|
||||
"keywords": "astro, nextui",
|
||||
"path": "/docs/frameworks/astro.mdx"
|
||||
},
|
||||
{
|
||||
"key": "laravel",
|
||||
"title": "Laravel",
|
||||
"keywords": "laravel, nextui",
|
||||
"path": "/docs/frameworks/laravel.mdx",
|
||||
"newPost": true
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
238
apps/docs/content/docs/frameworks/laravel.mdx
Normal file
238
apps/docs/content/docs/frameworks/laravel.mdx
Normal file
@ -0,0 +1,238 @@
|
||||
---
|
||||
title: Laravel
|
||||
description: How to use NextUI with Laravel
|
||||
---
|
||||
|
||||
# Laravel
|
||||
|
||||
Requirements:
|
||||
|
||||
- [Laravel 11](https://laravel.com/)
|
||||
- [PHP v8.2](https://www.php.net/)
|
||||
- [React 18](https://reactjs.org/) or later
|
||||
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later
|
||||
- [Framer Motion 11.9](https://www.framer.com/motion/) or later
|
||||
|
||||
------
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
To use NextUI in your Laravel project, you need to follow the following steps:
|
||||
|
||||
### Using NextUI + Laravel template
|
||||
|
||||
If you are starting a new project, you can run one of the following commands to create a Laravel project pre-configured with NextUI:
|
||||
|
||||
<PackageManagers
|
||||
commands={{
|
||||
npm: 'npx create-laravel@latest --template https://github.com/nextui-org/laravel-template',
|
||||
yarn: 'yarn create laravel --template https://github.com/nextui-org/laravel-template',
|
||||
pnpm: 'pnpm create laravel --template https://github.com/nextui-org/laravel-template',
|
||||
bun: 'bunx create-laravel@latest --template https://github.com/nextui-org/laravel-template',
|
||||
}}
|
||||
/>
|
||||
|
||||
### Automatic Installation
|
||||
|
||||
You can add individual components using the CLI. For example, to add a button component:
|
||||
|
||||
```codeBlock bash
|
||||
nextui add button
|
||||
```
|
||||
|
||||
This command adds the Button component to your project and manages all related dependencies.
|
||||
|
||||
You can also add multiple components at once:
|
||||
|
||||
```codeBlock bash
|
||||
nextui add button input
|
||||
```
|
||||
|
||||
Or you can add the main library `@nextui-org/react` by running the following command:
|
||||
|
||||
```codeBlock bash
|
||||
nextui add --all
|
||||
```
|
||||
|
||||
If you leave out the component name, the CLI will prompt you to select the components you want to add.
|
||||
|
||||
```codeBlock bash
|
||||
? Which components would you like to add? › - Space to select. Return to submit
|
||||
Instructions:
|
||||
↑/↓: Highlight option
|
||||
←/→/[space]: Toggle selection
|
||||
[a,b,c]/delete: Filter choices
|
||||
enter/return: Complete answer
|
||||
|
||||
Filtered results for: Enter something to filter
|
||||
|
||||
◯ accordion
|
||||
◯ autocomplete
|
||||
◯ avatar
|
||||
◯ badge
|
||||
◯ breadcrumbs
|
||||
◉ button
|
||||
◯ card
|
||||
◯ checkbox
|
||||
◯ chip
|
||||
◯ code
|
||||
```
|
||||
|
||||
You still need to add the provider to your app manually (we are working on automating this step).
|
||||
|
||||
```jsx {3,7,9}
|
||||
// app/providers.tsx
|
||||
|
||||
import {NextUIProvider} from '@nextui-org/react'
|
||||
|
||||
export function Providers({children}: { children: React.ReactNode }) {
|
||||
return (
|
||||
<NextUIProvider>
|
||||
{children}
|
||||
</NextUIProvider>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
<Spacer y={4} />
|
||||
|
||||
```jsx {8,23,25}
|
||||
// app.tsx or app.jsx
|
||||
import '../css/app.css';
|
||||
import './bootstrap';
|
||||
|
||||
import { createInertiaApp } from '@inertiajs/react';
|
||||
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import {NextUIProvider} from "@nextui-org/react";
|
||||
|
||||
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
|
||||
|
||||
createInertiaApp({
|
||||
title: (title) => `${title} - ${appName}`,
|
||||
resolve: (name) =>
|
||||
resolvePageComponent(
|
||||
`./Pages/${name}.tsx`,
|
||||
import.meta.glob('./Pages/**/*.tsx'),
|
||||
),
|
||||
setup({ el, App, props }) {
|
||||
const root = createRoot(el);
|
||||
|
||||
root.render(
|
||||
<NextUIProvider>
|
||||
<App {...props} />
|
||||
</NextUIProvider>
|
||||
);
|
||||
},
|
||||
progress: {
|
||||
color: '#4B5563',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Manual Installation
|
||||
|
||||
<Steps>
|
||||
|
||||
### Add dependencies
|
||||
|
||||
In your Laravel project, run one of the following command to install NextUI:
|
||||
|
||||
<PackageManagers
|
||||
commands={{
|
||||
npm: 'npm i @nextui-org/react framer-motion',
|
||||
yarn: 'yarn add @nextui-org/react framer-motion',
|
||||
pnpm: 'pnpm add @nextui-org/react framer-motion',
|
||||
bun: "bun add @nextui-org/react framer-motion"
|
||||
}}
|
||||
/>
|
||||
|
||||
### Hoisted Dependencies Setup
|
||||
|
||||
<Blockquote color="primary">
|
||||
**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
|
||||
</Blockquote>
|
||||
|
||||
If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
|
||||
|
||||
```bash
|
||||
public-hoist-pattern[]=*@nextui-org/*
|
||||
```
|
||||
|
||||
After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
|
||||
|
||||
### Tailwind CSS Setup
|
||||
|
||||
NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
|
||||
[installation guide](https://tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add
|
||||
the following code to your `tailwind.config.js` file:
|
||||
|
||||
<Blockquote color="primary">
|
||||
**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
|
||||
</Blockquote>
|
||||
|
||||
```js {2,8,13-14}
|
||||
// tailwind.config.js
|
||||
const { nextui } = require("@nextui-org/react");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
// ...
|
||||
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
darkMode: "class",
|
||||
plugins: [nextui()]
|
||||
}
|
||||
```
|
||||
|
||||
### Provider Setup
|
||||
|
||||
After installing NextUI, you need to set up the `NextUIProvider` at the `root` of your application.
|
||||
|
||||
Go to the src directory and inside `app.jsx` or `app.tsx`, wrap `NextUIProvider` around App:
|
||||
|
||||
```jsx {8,23,25}
|
||||
// app.tsx or app.jsx
|
||||
import '../css/app.css';
|
||||
import './bootstrap';
|
||||
|
||||
import { createInertiaApp } from '@inertiajs/react';
|
||||
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import {NextUIProvider} from "@nextui-org/react";
|
||||
|
||||
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
|
||||
|
||||
createInertiaApp({
|
||||
title: (title) => `${title} - ${appName}`,
|
||||
resolve: (name) =>
|
||||
resolvePageComponent(
|
||||
`./Pages/${name}.tsx`,
|
||||
import.meta.glob('./Pages/**/*.tsx'),
|
||||
),
|
||||
setup({ el, App, props }) {
|
||||
const root = createRoot(el);
|
||||
|
||||
root.render(
|
||||
<NextUIProvider>
|
||||
<App {...props} />
|
||||
</NextUIProvider>
|
||||
);
|
||||
},
|
||||
progress: {
|
||||
color: '#4B5563',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
<Blockquote
|
||||
color="warning"
|
||||
>
|
||||
Version 2 is only compatible with React 18 or later. If you are using React 17 or earlier, please use <Link href="https://v1.nextui.org/docs/getting-started" isExternal>version 1 of NextUI</Link>.
|
||||
</Blockquote>
|
||||
Loading…
x
Reference in New Issue
Block a user