chore: update installations

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": {

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 
 ```
 

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 `<PageHeader />` and `<MainNav />` 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:
+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 {2,7}
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-</script>
 
+```vue {3}
 <template>
   <div>
-    <Button>Click me</Button>
+    <UiButton>Click me</UiButton>
   </div>
 </template>
 ```

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(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension })
-      : template(config.framework === 'nuxt' ? templates.NUXT_TAILWIND_CONFIG : templates.TAILWIND_CONFIG)({ extension }),
+      : template(templates.TAILWIND_CONFIG)({ extension }),
     'utf8',
   )
 

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', {

packages/cli/src/utils/templates.ts

@@ -29,8 +29,10 @@ export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
   content: [
-    "./index.html",
+    './pages/**/*.{<%- extension %>,<%- extension %>x}',
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    './components/**/*.{<%- extension %>,<%- extension %>x}',
+    './app/**/*.{<%- extension %>,<%- extension %>x}',
+    './src/**/*.{<%- extension %>,<%- extension %>x}',
 	],
   theme: {
     container: {
@@ -64,8 +66,10 @@ export const TAILWIND_CONFIG_WITH_VARIABLES = `/** @type {import('tailwindcss').
 module.exports = {
   darkMode: ["class"],
   content: [
-    "./index.html",
+    './pages/**/*.{<%- extension %>,<%- extension %>x}',
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    './components/**/*.{<%- extension %>,<%- extension %>x}',
+    './app/**/*.{<%- extension %>,<%- extension %>x}',
+    './src/**/*.{<%- extension %>,<%- extension %>x}',
 	],
   theme: {
     container: {
@@ -134,105 +138,3 @@ module.exports = {
   },
   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"],
-  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")],
-}`