diff --git a/apps/www/src/content/docs/installation.md b/apps/www/src/content/docs/installation.md index 34a10e93..59d92b2c 100644 --- a/apps/www/src/content/docs/installation.md +++ b/apps/www/src/content/docs/installation.md @@ -64,9 +64,9 @@ This project and the components are written in TypeScript. We recommend using Ty However we provide a JavaScript version of the components as well. The JavaScript version is available via the [cli](/docs/cli). -To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file. +To opt-out of TypeScript, you can use the `typescript` flag in your `components.json` file. -```json {10} title="components.json" +```json {9} title="components.json" { "style": "default", "tailwind": { diff --git a/apps/www/src/content/docs/installation/laravel.md b/apps/www/src/content/docs/installation/laravel.md index 538b1e0e..3b8ffcd6 100644 --- a/apps/www/src/content/docs/installation/laravel.md +++ b/apps/www/src/content/docs/installation/laravel.md @@ -7,7 +7,7 @@ description: Install and configure Laravel with Inertia ### Create project -Start by creating a new Laravel project with Inertia and Vue using the laravel installer `laravel new my-app`: +Start by creating a new Laravel project with Inertia and Vue using the Laravel installer `laravel new my-app`: ```bash laravel new my-app --typescript --breeze --stack=vue --git --no-interaction @@ -30,10 +30,10 @@ Would you like to use TypeScript (recommended)? no / yes Which framework are you using? Vite / Nuxt / Laravel Which style would you like to use? › Default Which color would you like to use as base color? › Slate -Where is your global CSS file? › › src/index.css +Where is your global CSS file? › resources/css/app.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js -Configure the import alias for components: › @/components +Configure the import alias for components: › @/Components Configure the import alias for utils: › @/lib/utils ``` diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md index 1200e635..45e3ac63 100644 --- a/apps/www/src/content/docs/installation/nuxt.md +++ b/apps/www/src/content/docs/installation/nuxt.md @@ -19,13 +19,25 @@ npx nuxi@latest init my-app npm install -D @nuxtjs/tailwindcss ``` +### Configure `nuxt.config.ts` + ```ts export default defineNuxtConfig({ - modules: ['@nuxtjs/tailwindcss'] + modules: ['@nuxtjs/tailwindcss'], + components: [ + { + path: '~/components/ui', + // this is required else Nuxt will autoImport `.ts` file + extensions: ['.vue'], + // prefix for your components, eg: UiButton + prefix: 'Ui' + }, + ], }) ``` + ### Run the CLI Run the `shadcn-vue` init command to setup your project: @@ -89,7 +101,7 @@ Here's the default structure of Nuxt app. You can use this as a reference: - I place the UI components in the `components/ui` folder. - The rest of the components such as `` and `` are placed in the `components` folder. - The `lib` folder contains all the utility functions. I have a `utils.ts` where I define the `cn` helper. -- The `styles` folder contains the global CSS. +- The `assets/css` folder contains the global CSS. ### That's it @@ -99,16 +111,12 @@ You can now start adding components to your project. npx shadcn-vue@latest add button ``` -The command above will add the `Button` component to your project. You can then import it like this: - -```vue {2,7} - +The command above will add the `Button` component to your project. Nuxt autoImport will handle importing the components, you can just use it as such: +```vue {3} ``` diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index 1ef424ca..f7f08cf4 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -22,9 +22,8 @@ import { type Config, DEFAULT_COMPONENTS, DEFAULT_TAILWIND_CONFIG, - DEFAULT_TAILWIND_CSS, - DEFAULT_TAILWIND_CSS_NUXT, DEFAULT_UTILS, + TAILWIND_CSS_PATH, getConfig, rawConfigSchema, resolveConfigPaths, @@ -108,8 +107,9 @@ export async function promptForConfig( name: 'framework', message: `Which ${highlight('framework')} are you using?`, choices: [ - { title: 'Vite + Vue', value: 'vue' }, + { title: 'Vite', value: 'vite' }, { title: 'Nuxt', value: 'nuxt' }, + { title: 'Laravel', value: 'laravel' }, ], }, { @@ -136,7 +136,7 @@ export async function promptForConfig( type: 'text', name: 'tailwindCss', message: `Where is your ${highlight('Tailwind CSS')} file?`, - initial: (prev, values) => defaultConfig?.tailwind.css ?? (values.framework === 'nuxt' ? DEFAULT_TAILWIND_CSS_NUXT : DEFAULT_TAILWIND_CSS), + initial: (prev, values) => defaultConfig?.tailwind.css ?? TAILWIND_CSS_PATH[values.framework as 'vite' | 'nuxt' | 'laravel'], }, { type: 'toggle', @@ -236,8 +236,8 @@ export async function runInit(cwd: string, config: Config) { await fs.writeFile( config.resolvedPaths.tailwindConfig, config.tailwind.cssVariables - ? template(config.framework === 'nuxt' ? templates.NUXT_TAILWIND_CONFIG_WITH_VARIABLES : templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension }) - : template(config.framework === 'nuxt' ? templates.NUXT_TAILWIND_CONFIG : templates.TAILWIND_CONFIG)({ extension }), + ? template(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension }) + : template(templates.TAILWIND_CONFIG)({ extension }), 'utf8', ) diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts index 53f5637a..c85e36f7 100644 --- a/packages/cli/src/utils/get-config.ts +++ b/packages/cli/src/utils/get-config.ts @@ -9,11 +9,15 @@ import { resolveImport } from '@/src/utils/resolve-import' export const DEFAULT_STYLE = 'default' export const DEFAULT_COMPONENTS = '@/components' export const DEFAULT_UTILS = '@/lib/utils' -export const DEFAULT_TAILWIND_CSS = 'src/assets/index.css' -export const DEFAULT_TAILWIND_CSS_NUXT = 'assets/css/tailwind.css' export const DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js' export const DEFAULT_TAILWIND_BASE_COLOR = 'slate' +export const TAILWIND_CSS_PATH = { + nuxt: 'assets/css/tailwind.css', + vite: 'src/assets/index.css', + laravel: 'resources/css/app.css', +} + // TODO: Figure out if we want to support all cosmiconfig formats. // A simple components.json file would be nice. const explorer = cosmiconfig('components', { diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index 8d6636d1..3ddd2206 100644 --- a/packages/cli/src/utils/templates.ts +++ b/packages/cli/src/utils/templates.ts @@ -29,9 +29,11 @@ export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ - "./index.html", - "./src/**/*.{vue,js,ts,jsx,tsx}", - ], + './pages/**/*.{<%- extension %>,<%- extension %>x}', + './components/**/*.{<%- extension %>,<%- extension %>x}', + './app/**/*.{<%- extension %>,<%- extension %>x}', + './src/**/*.{<%- extension %>,<%- extension %>x}', + ], theme: { container: { center: true, @@ -64,111 +66,11 @@ export const TAILWIND_CONFIG_WITH_VARIABLES = `/** @type {import('tailwindcss'). module.exports = { darkMode: ["class"], content: [ - "./index.html", - "./src/**/*.{vue,js,ts,jsx,tsx}", - ], - theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, - extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - keyframes: { - "accordion-down": { - from: { height: 0 }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - }, - }, - }, - plugins: [require("tailwindcss-animate")], -}` - -export const NUXT_TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */ -module.exports = { - darkMode: ["class"], - theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, - extend: { - keyframes: { - "accordion-down": { - from: { height: 0 }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - }, - }, - }, - plugins: [require("tailwindcss-animate")], -}` - -export const NUXT_TAILWIND_CONFIG_WITH_VARIABLES = `/** @type {import('tailwindcss').Config} */ -module.exports = { - darkMode: ["class"], + './pages/**/*.{<%- extension %>,<%- extension %>x}', + './components/**/*.{<%- extension %>,<%- extension %>x}', + './app/**/*.{<%- extension %>,<%- extension %>x}', + './src/**/*.{<%- extension %>,<%- extension %>x}', + ], theme: { container: { center: true,