From 3f152ead797085604da2d1243fb2f1deccb340e3 Mon Sep 17 00:00:00 2001 From: Tsuki <976499226@qq.com> Date: Mon, 23 Dec 2024 18:15:37 +0800 Subject: [PATCH 1/5] chore(docs): support laravel route --- apps/docs/config/routes.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json index 5f080986d7..d67c406715 100644 --- a/apps/docs/config/routes.json +++ b/apps/docs/config/routes.json @@ -81,6 +81,12 @@ "title": "Astro", "keywords": "astro, nextui", "path": "/docs/frameworks/astro.mdx" + }, + { + "key": "laravel", + "title": "Laravel", + "keywords": "laravel, nextui", + "path": "/docs/frameworks/laravel.mdx" } ] }, @@ -515,4 +521,4 @@ ] } ] -} \ No newline at end of file +} From 0c988af80832ec4e9569e2c6c231113deb384493 Mon Sep 17 00:00:00 2001 From: Tsuki <976499226@qq.com> Date: Mon, 23 Dec 2024 18:16:00 +0800 Subject: [PATCH 2/5] feat(docs): add laravel.mdx --- apps/docs/content/docs/frameworks/laravel.mdx | 119 ++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 apps/docs/content/docs/frameworks/laravel.mdx diff --git a/apps/docs/content/docs/frameworks/laravel.mdx b/apps/docs/content/docs/frameworks/laravel.mdx new file mode 100644 index 0000000000..190b5ddf94 --- /dev/null +++ b/apps/docs/content/docs/frameworks/laravel.mdx @@ -0,0 +1,119 @@ +--- +title: Vite +description: How to use Laravel with Vite +--- + +# Vite + +Requirements: + +- [Laravel](https://laravel.com/) +- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later +- [Framer Motion 11.9](https://www.framer.com/motion/) or later + +------ + + + +To use NextUI in your Laravel project, you need to follow the following steps: + + + +### Installation + +In your Laravel project, run one of the following command to install NextUI: + + + +### Hoisted Dependencies Setup + +
+**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. +
+ +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: + +
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules` +
+ +```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,22} +// 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(); + }, + progress: { + color: '#4B5563', + }, +}); +``` + + + +
+ Version 2 is only compatible with React 18 or later. If you are using React 17 or earlier, please use version 1 of NextUI. +
From 4ae4d7708b633b0bea971f1940a40b9c2c11d1ae Mon Sep 17 00:00:00 2001 From: Tsuki <976499226@qq.com> Date: Mon, 23 Dec 2024 18:42:33 +0800 Subject: [PATCH 3/5] chore(docs): update laravel.mdx --- apps/docs/content/docs/frameworks/laravel.mdx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/docs/content/docs/frameworks/laravel.mdx b/apps/docs/content/docs/frameworks/laravel.mdx index 190b5ddf94..415353ae46 100644 --- a/apps/docs/content/docs/frameworks/laravel.mdx +++ b/apps/docs/content/docs/frameworks/laravel.mdx @@ -1,9 +1,9 @@ --- -title: Vite -description: How to use Laravel with Vite +title: Laravel +description: How to use NextUI with Laravel --- -# Vite +# Laravel Requirements: @@ -80,7 +80,7 @@ After installing NextUI, you need to set up the `NextUIProvider` at the `root` o Go to the src directory and inside `app.jsx` or `app.tsx`, wrap `NextUIProvider` around App: -```jsx {8,22} +```jsx {8,23,25} // app.tsx or app.jsx import '../css/app.css'; import './bootstrap'; @@ -102,7 +102,11 @@ createInertiaApp({ setup({ el, App, props }) { const root = createRoot(el); - root.render(); + root.render( + + + + ); }, progress: { color: '#4B5563', From 14abdc0d442548f85b791d62da19fed2f98f7628 Mon Sep 17 00:00:00 2001 From: Tsuki <976499226@qq.com> Date: Tue, 24 Dec 2024 17:14:18 +0800 Subject: [PATCH 4/5] chore(docs): update laravel.mdx --- apps/docs/content/docs/frameworks/laravel.mdx | 119 +++++++++++++++++- 1 file changed, 117 insertions(+), 2 deletions(-) diff --git a/apps/docs/content/docs/frameworks/laravel.mdx b/apps/docs/content/docs/frameworks/laravel.mdx index 415353ae46..bab544ce68 100644 --- a/apps/docs/content/docs/frameworks/laravel.mdx +++ b/apps/docs/content/docs/frameworks/laravel.mdx @@ -7,7 +7,9 @@ description: How to use NextUI with Laravel Requirements: -- [Laravel](https://laravel.com/) +- [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 @@ -17,9 +19,122 @@ Requirements: 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: + + + +### 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 ( + + {children} + + ) +} +``` + + + +```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( + + + + ); + }, + progress: { + color: '#4B5563', + }, +}); +``` + +### Manual Installation + -### Installation +### Add dependencies In your Laravel project, run one of the following command to install NextUI: From f61f2bb2cce261fbdd2fa5d70f88572544669482 Mon Sep 17 00:00:00 2001 From: Junior Garcia Date: Thu, 2 Jan 2025 16:20:41 -0300 Subject: [PATCH 5/5] Update apps/docs/config/routes.json --- apps/docs/config/routes.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json index d67c406715..6dbda33f6f 100644 --- a/apps/docs/config/routes.json +++ b/apps/docs/config/routes.json @@ -86,7 +86,8 @@ "key": "laravel", "title": "Laravel", "keywords": "laravel, nextui", - "path": "/docs/frameworks/laravel.mdx" + "path": "/docs/frameworks/laravel.mdx", + "newPost": true } ] },