chore: shadcn init

components.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-vue.com/schema.json",
+	"style": "default",
+	"typescript": true,
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "assets/css/tailwind.css",
+		"baseColor": "slate",
+		"cssVariables": true
+	},
+	"framework": "nuxt",
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils"
+	}
+}

lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}

modules/shadcn.ts

@@ -0,0 +1,96 @@
+import {
+	addComponent,
+	addComponentsDir,
+	defineNuxtModule,
+	tryResolveModule,
+} from 'nuxt/kit'
+
+export interface ShadcnVueOptions {
+	/**
+	 * Prefix for all the imported component
+	 */
+	prefix: string
+
+	/**
+	 * Directory that the component lives in.
+	 * @default "~/components/ui"
+	 */
+	componentDir: string
+}
+
+export default defineNuxtModule<ShadcnVueOptions>({
+	defaults: {
+		prefix: 'Ui',
+		componentDir: '~/components/ui',
+	},
+	meta: {
+		name: 'ShadcnVue',
+		configKey: 'shadcn',
+		version: '0.0.1',
+		compatibility: {
+			nuxt: '^3.9.0',
+			bridge: false,
+		},
+	},
+	async setup({ componentDir, prefix }) {
+		const isVeeValidateExist = await tryResolveModule('vee-validate')
+
+		addComponentsDir(
+			{
+				path: componentDir,
+				extensions: ['.vue'],
+				prefix,
+				pathPrefix: false,
+			},
+			{
+				prepend: true,
+			},
+		)
+
+		if (isVeeValidateExist !== undefined) {
+			addComponent({
+				filePath: 'vee-validate',
+				export: 'Form',
+				name: `${prefix}Form`,
+				priority: 999,
+			})
+
+			addComponent({
+				filePath: 'vee-validate',
+				export: 'Field',
+				name: `${prefix}FormField`,
+				priority: 999,
+			})
+		}
+
+		addComponent({
+			filePath: 'radix-vue',
+			export: 'PaginationRoot',
+			name: `${prefix}Pagination`,
+			priority: 999,
+		})
+
+		addComponent({
+			filePath: 'radix-vue',
+			export: 'PaginationList',
+			name: `${prefix}PaginationList`,
+			priority: 999,
+		})
+
+		addComponent({
+			filePath: 'radix-vue',
+			export: 'PaginationListItem',
+			name: `${prefix}PaginationListItem`,
+			priority: 999,
+		})
+	},
+})
+
+declare module '@nuxt/schema' {
+	interface NuxtConfig {
+		shadcn?: ShadcnVueOptions
+	}
+	interface NuxtOptions {
+		shadcn?: ShadcnVueOptions
+	}
+}

nuxt.config.ts

@@ -30,6 +30,17 @@ export default defineNuxtConfig({
 			},
 		],
 	],
+	shadcn: {
+		/**
+		 * Prefix for all the imported component
+		 */
+		prefix: '',
+		/**
+		 * Directory that the component lives in.
+		 * @default "./components/ui"
+		 */
+		componentDir: './components/ui',
+	},
 	ogImage: {
 		googleFontMirror: true,
 		fonts: [

package.json

@@ -23,9 +23,15 @@
 		"@trpc/client": "^10.45.2",
 		"@trpc/server": "^10.45.2",
 		"@vitest/coverage-v8": "^1.4.0",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.1.1",
 		"consola": "^3.2.3",
+		"lucide-vue-next": "^0.372.0",
 		"pinia": "^2.1.7",
+		"radix-vue": "^1.7.2",
 		"sharp": "^0.33.3",
+		"tailwind-merge": "^2.3.0",
+		"tailwindcss-animate": "^1.0.7",
 		"trpc-nuxt": "^0.10.21",
 		"zod": "^3.22.4"
 	},
@@ -36,7 +42,7 @@
 		"@nuxtjs/google-fonts": "^3.2.0",
 		"@nuxtjs/i18n": "^8.3.0",
 		"@nuxtjs/seo": "2.0.0-rc.10",
-		"@nuxtjs/tailwindcss": "^6.11.4",
+		"@nuxtjs/tailwindcss": "^6.12.0",
 		"@testing-library/vue": "^8.0.3",
 		"@vitejs/plugin-vue": "^5.0.4",
 		"@vitest/ui": "^1.4.0",