[{"data":1,"prerenderedAt":773},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":404,"/docs/installation/nuxt":417,"surround-/docs/installation/nuxt":770},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","/docs","docs",[9,273,299,317,330,356],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":272},"Components","/docs/components","docs/02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":81,"path":82,"stem":83,"new":18,"type":19,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":85,"path":86,"stem":87,"new":18,"type":19,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":89,"path":90,"stem":91,"new":18,"type":19,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":93,"path":94,"stem":95,"new":18,"type":19,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":97,"path":98,"stem":99,"new":18,"type":19,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":101,"path":102,"stem":103,"new":18,"type":19,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":105,"path":106,"stem":107,"new":18,"type":19,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":109,"path":110,"stem":111,"new":18,"type":19,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":113,"path":114,"stem":115,"new":18,"type":19,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":117,"path":118,"stem":119,"new":18,"type":19,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":121,"path":122,"stem":123,"new":18,"type":19,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":125,"path":126,"stem":127,"new":18,"type":19,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":129,"path":130,"stem":131,"new":18,"type":19,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":133,"path":134,"stem":135,"new":18,"type":19,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":137,"path":138,"stem":139,"new":18,"type":19,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":141,"path":142,"stem":143,"new":18,"type":19,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":145,"path":146,"stem":147,"new":18,"type":19,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":149,"path":150,"stem":151,"new":18,"type":19,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":153,"path":154,"stem":155,"new":18,"type":19,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":157,"path":158,"stem":159,"new":18,"type":19,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":161,"path":162,"stem":163,"new":18,"type":19,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":165,"path":166,"stem":167,"new":18,"type":19,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":169,"path":170,"stem":171,"new":18,"type":19,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":173,"path":174,"stem":175,"new":18,"type":19,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":177,"path":178,"stem":179,"new":18,"type":19,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":181,"path":182,"stem":183,"new":18,"type":19,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":185,"path":186,"stem":187,"new":18,"type":19,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":189,"path":190,"stem":191,"new":18,"type":19,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":193,"path":194,"stem":195,"new":18,"type":19,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":197,"path":198,"stem":199,"new":18,"type":19,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":201,"path":202,"stem":203,"new":18,"type":19,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":205,"path":206,"stem":207,"new":18,"type":19,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":209,"path":210,"stem":211,"new":18,"type":19,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":213,"path":214,"stem":215,"new":18,"type":19,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":217,"path":218,"stem":219,"new":18,"type":19,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":221,"path":222,"stem":223,"new":18,"type":19,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":225,"path":226,"stem":227,"new":18,"type":19,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":229,"path":230,"stem":231,"new":18,"type":19,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":233,"path":234,"stem":235,"new":18,"type":19,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":237,"path":238,"stem":239,"new":18,"type":19,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":241,"path":242,"stem":243,"new":18,"type":19,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":245,"path":246,"stem":247,"new":18,"type":19,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":249,"path":250,"stem":251,"new":18,"type":19,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":253,"path":254,"stem":255,"new":18,"type":19,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":257,"path":258,"stem":259,"new":18,"type":19,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":261,"path":262,"stem":263,"new":18,"type":19,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":265,"path":266,"stem":267,"new":18,"type":19,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":269,"path":270,"stem":271,"new":18,"type":19,"children":-1},"Typography","/docs/components/typography","docs/components/typography","group",{"title":274,"path":275,"stem":276,"children":277,"new":18,"type":272},"Installation","/docs/installation","docs/02.installation",[278,283,287,291,295],{"title":279,"path":280,"stem":281,"new":18,"type":282,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite","page",{"title":284,"path":285,"stem":286,"new":18,"type":282,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":288,"path":289,"stem":290,"new":18,"type":282,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":292,"path":293,"stem":294,"new":18,"type":282,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":296,"path":297,"stem":298,"new":18,"type":282,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":300,"path":301,"stem":302,"children":303,"new":18,"type":272},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[304,307,310,314],{"title":279,"path":305,"stem":306,"new":18,"type":282,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":284,"path":308,"stem":309,"new":18,"type":282,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":311,"path":312,"stem":313,"new":18,"type":282,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":288,"path":315,"stem":316,"new":18,"type":282,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":318,"path":319,"stem":320,"children":321,"new":18,"type":272},"Forms","/docs/forms","docs/forms",[322,326],{"title":323,"path":324,"stem":325,"new":18,"type":282,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":327,"path":328,"stem":329,"new":18,"type":282,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":331,"path":332,"stem":333,"children":334,"new":18,"type":272},"Registry","/docs/registry","docs/registry/index",[335,336,340,344,348,352],{"title":331,"path":332,"stem":333,"new":18,"type":282,"children":-1},{"title":337,"path":338,"stem":339,"new":18,"type":282,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":341,"path":342,"stem":343,"new":18,"type":282,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":345,"path":346,"stem":347,"new":18,"type":282,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":349,"path":350,"stem":351,"new":18,"type":282,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":353,"path":354,"stem":355,"new":18,"type":282,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"path":6,"stem":7,"title":357,"type":272,"children":358},"Get Started",[359,363,370,374,378,384,388,392,396,400],{"title":360,"path":361,"stem":362,"new":18,"type":282,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",{"title":274,"path":275,"stem":276,"children":364,"new":18,"type":272},[365,366,367,368,369],{"title":279,"path":280,"stem":281,"new":18,"type":282,"children":-1},{"title":284,"path":285,"stem":286,"new":18,"type":282,"children":-1},{"title":288,"path":289,"stem":290,"new":18,"type":282,"children":-1},{"title":292,"path":293,"stem":294,"new":18,"type":282,"children":-1},{"title":296,"path":297,"stem":298,"new":18,"type":282,"children":-1},{"title":371,"path":372,"stem":373,"new":18,"type":282,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":375,"path":376,"stem":377,"new":18,"type":282,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":300,"path":301,"stem":302,"children":379,"new":18,"type":272},[380,381,382,383],{"title":279,"path":305,"stem":306,"new":18,"type":282,"children":-1},{"title":284,"path":308,"stem":309,"new":18,"type":282,"children":-1},{"title":311,"path":312,"stem":313,"new":18,"type":282,"children":-1},{"title":288,"path":315,"stem":316,"new":18,"type":282,"children":-1},{"title":385,"path":386,"stem":387,"new":18,"type":282,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":389,"path":390,"stem":391,"new":18,"type":282,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":393,"path":394,"stem":395,"new":18,"type":282,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":397,"path":398,"stem":399,"new":18,"type":282,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":401,"path":402,"stem":403,"new":18,"type":282,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"repo":405},{"id":406,"name":407,"repo":408,"description":409,"createdAt":410,"updatedAt":411,"pushedAt":412,"stars":413,"watchers":414,"forks":415,"defaultBranch":416},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-04-14T10:18:37Z","2026-04-13T06:37:16Z",9755,38,638,"dev",{"id":418,"title":284,"body":419,"description":762,"extension":763,"links":764,"meta":765,"navigation":766,"new":18,"path":285,"rawbody":767,"seo":768,"stem":286,"__hash__":769},"content/docs/installation/02.nuxt.md",{"type":420,"value":421,"toc":749},"minimark",[422],[423,424,425,430,439,449,475,479,482,567,574,577,632,638,644,648,651,657,667,673,677,684,690,694,700,706,711,719,723,726,732,738],"steps",{},[426,427,429],"h3",{"id":428},"create-project","Create project",[431,432,433,434,438],"p",{},"Start by creating a new Nuxt project using ",[435,436,437],"code",{},"create-nuxt-app",":",[440,441,447],"pre",{"className":442,"code":444,"language":445,"meta":446},[443],"language-bash","npm create nuxt@latest\n","bash","",[435,448,444],{"__ignoreMap":446},[450,451,455,469],"callout",{"className":452},[453,454],"[&_figure]:w-full","[&_figure]:m-0",[431,456,457,458,461,462],{},"If you encounter the error ",[435,459,460],{},"ERROR: Cannot read properties of undefined (reading 'sys') (x4)",", please proceed to install TypeScript as a dependency, as advised in this ",[463,464,468],"a",{"href":465,"rel":466},"https://github.com/nuxt/nuxt/issues/20936",[467],"nofollow","issue",[440,470,473],{"className":471,"code":472,"language":445,"meta":446},[443],"npm install -D typescript\n",[435,474,472],{"__ignoreMap":446},[426,476,478],{"id":477},"add-tailwind-css","Add Tailwind CSS",[431,480,481],{},"How to setup tailwindcss",[483,484,490,505,544],"tabs",{"className":485,"default-value":489},[486,487,488],"relative","mt-6","w-full","vite",[491,492,493,499],"tabs-list",{},[494,495,496],"tabs-trigger",{"value":489},[431,497,498],{},"@tailwindcss/vite",[494,500,502],{"value":501},"nuxt-module",[431,503,504],{},"@nuxtjs/tailwindcss",[506,507,508,514,521,530,536],"tabs-content",{"value":489},[440,509,512],{"className":510,"code":511,"language":445,"meta":446},[443],"npm install tailwindcss @tailwindcss/vite -D\n",[435,513,511],{"__ignoreMap":446},[431,515,516,517,520],{},"Replace everything in ",[435,518,519],{},"app/assets/css/tailwind.css"," with the following:",[440,522,528],{"className":523,"code":525,"language":526,"meta":527},[524],"language-css","@import \"tailwindcss\";\n","css","title=\"app/assets/css/tailwind.css\"",[435,529,525],{"__ignoreMap":446},[431,531,532,533,520],{},"Update ",[435,534,535],{},"nuxt.config.ts",[440,537,542],{"className":538,"code":540,"language":541,"meta":446},[539],"language-ts","import tailwindcss from '@tailwindcss/vite'\n\nexport default defineNuxtConfig({\n  // ...\n  css: ['~/assets/css/tailwind.css'],\n  vite: {\n    plugins: [\n      tailwindcss(),\n    ],\n  },\n})\n","ts",[435,543,540],{"__ignoreMap":446},[506,545,546,552,556,561],{"value":501},[440,547,550],{"className":548,"code":549,"language":445,"meta":446},[443],"npm install tailwindcss @nuxtjs/tailwindcss@7.0.0-beta.1 -D\n",[435,551,549],{"__ignoreMap":446},[431,553,516,554,520],{},[435,555,519],{},[440,557,559],{"className":558,"code":525,"language":526,"meta":527},[524],[435,560,525],{"__ignoreMap":446},[440,562,565],{"className":563,"code":564,"language":541,"meta":446},[539],"export default defineNuxtConfig({\n  // ...\n  modules: ['@nuxtjs/tailwindcss'],\n})\n",[435,566,564],{"__ignoreMap":446},[426,568,570,571,573],{"id":569},"add-nuxt-module","Add ",[435,572,284],{}," module",[431,575,576],{},"Skipping this step triggers numerous console warnings due to Nuxt's auto-import feature.",[483,578,581,594,605],{"className":579,"default-value":580},[486,487,488],"module",[491,582,583,588],{},[494,584,585],{"value":580},[431,586,587],{},"Module",[494,589,591],{"value":590},"manual",[431,592,593],{},"Manual",[506,595,596,599],{"value":580},[431,597,598],{},"Install the package below.",[440,600,603],{"className":601,"code":602,"language":445,"meta":446},[443],"npx nuxi@latest module add shadcn-nuxt\n",[435,604,602],{"__ignoreMap":446},[506,606,607,613,619,626],{"value":590},[431,608,609,610],{},"Install the ",[435,611,612],{},"@types/node",[440,614,617],{"className":615,"code":616,"language":445,"meta":446},[443],"npm install -D @types/node\n",[435,618,616],{"__ignoreMap":446},[431,620,621,622,625],{},"Add the following code to ",[435,623,624],{},"modules/shadcn.ts",".",[440,627,630],{"className":628,"code":629,"language":541,"meta":446},[539],"import { readdirSync } from 'node:fs'\nimport { join } from 'node:path'\nimport {\n  addComponentExports,\n  addComponentsDir,\n  createResolver,\n  defineNuxtModule,\n} from 'nuxt/kit'\n\nexport interface ShadcnVueOptions {\n  /**\n   * Prefix for all the imported component\n   * @default \"Ui\"\n   */\n  prefix: string\n\n  /**\n   * Directory that the component lives in.\n   * @default \"@/components/ui\"\n   */\n  componentDir: string\n}\n\nexport default defineNuxtModule\u003CShadcnVueOptions>({\n  defaults: {\n    prefix: 'Ui',\n    componentDir: '@/components/ui',\n  },\n  meta: {\n    name: 'ShadcnVue',\n    configKey: 'shadcn',\n    version: '0.0.1',\n    compatibility: {\n      nuxt: '>=3.17.0',\n    },\n  },\n  async setup({ componentDir, prefix }, nuxt) {\n    const COMPONENT_DIR_PATH = componentDir!\n    const ROOT_DIR_PATH = nuxt.options.rootDir\n    const { resolve, resolvePath } = createResolver(ROOT_DIR_PATH)\n\n    const componentsPath = await resolvePath(COMPONENT_DIR_PATH)\n\n    addComponentsDir({\n      path: componentsPath,\n      extensions: [],\n      ignore: ['**/*'],\n    }, {\n      prepend: true,\n    })\n\n    try {\n      await Promise.all(readdirSync(componentsPath).map(async (dir) => {\n        try {\n          const filePath = await resolvePath(join(COMPONENT_DIR_PATH, dir, 'index'), { extensions: ['.ts', '.js'] })\n\n          addComponentExports({\n            prefix,\n            filePath: resolve(filePath),\n            priority: 1,\n          })\n        }\n        catch (err) {\n          if (err instanceof Error)\n            console.warn('Module error: ', err.message)\n        }\n      }))\n    }\n    catch (err) {\n      if (err instanceof Error)\n        console.warn(err.message)\n    }\n  },\n})\n",[435,631,629],{"__ignoreMap":446},[426,633,635,636],{"id":634},"configure-nuxtconfigts","Configure ",[435,637,535],{},[440,639,642],{"className":640,"code":641,"language":541,"meta":446},[539],"export default defineNuxtConfig({\n  // ...\n  modules: ['shadcn-nuxt'],\n  shadcn: {\n    /**\n     * Prefix for all the imported component.\n     * @default \"Ui\"\n     */\n    prefix: '',\n    /**\n     * Directory that the component lives in.\n     * Will respect the Nuxt aliases.\n     * @link https://nuxt.com/docs/api/nuxt-config#alias\n     * @default \"@/components/ui\"\n     */\n    componentDir: '@/components/ui'\n  }\n})\n",[435,643,641],{"__ignoreMap":446},[426,645,647],{"id":646},"add-a-nuxt-plugin-for-providing-ssrwidth-optional","Add a Nuxt Plugin for providing ssrWidth (optional)",[431,649,650],{},"Some components require a ssrWidth to be set through VueUse to avoid Hydration errors on mobile.",[431,652,653,654],{},"Add the following plugin to your Nuxt application: ",[435,655,656],{},"app/plugins/ssr-width.ts",[431,658,659,660],{},"Read more about ",[463,661,664],{"href":662,"rel":663},"https://vueuse.org/core/useSSRWidth/",[467],[435,665,666],{},"useSSRWidth",[440,668,671],{"className":669,"code":670,"language":541,"meta":446},[539],"import { provideSSRWidth } from '@vueuse/core'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  provideSSRWidth(1024, nuxtApp.vueApp)\n})\n",[435,672,670],{"__ignoreMap":446},[426,674,676],{"id":675},"run-nuxt-prepare","Run Nuxt Prepare",[431,678,679,680,683],{},"If you are initiating a new project, you need to run the command so that Nuxt generates the necessary ",[435,681,682],{},".nuxt"," folder:",[440,685,688],{"className":686,"code":687,"language":445,"meta":446},[443],"npx nuxi prepare\n",[435,689,687],{"__ignoreMap":446},[426,691,693],{"id":692},"run-the-cli","Run the CLI",[431,695,696,697,699],{},"Run the ",[435,698,407],{}," init command to setup your project:",[440,701,704],{"className":702,"code":703,"language":445,"meta":446},[443],"npx shadcn-vue@latest init\n",[435,705,703],{"__ignoreMap":446},[431,707,708,709,625],{},"You will be asked a few questions to configure ",[435,710,371],{},[440,712,717],{"className":713,"code":715,"language":716,"meta":446},[714],"language-txt","Which color would you like to use as base color? › Neutral\n","txt",[435,718,715],{"__ignoreMap":446},[426,720,722],{"id":721},"add-components","Add Components",[431,724,725],{},"You can now start adding components to your project.",[440,727,730],{"className":728,"code":729,"language":445,"meta":446},[443],"npx shadcn-vue@latest add button\n",[435,731,729],{"__ignoreMap":446},[431,733,734,735,737],{},"The command above will add the ",[435,736,45],{}," component to your project. Nuxt autoImport will handle importing the components, you can just use it as such:",[440,739,747],{"className":740,"code":742,"highlights":743,"language":745,"meta":746},[741],"language-vue","\u003Ctemplate>\n  \u003Cdiv>\n    \u003CButton>Click me\u003C/Button>\n  \u003C/div>\n\u003C/template>\n",[744],3,"vue","showLineNumbers title=\"pages/index.vue\"",[435,748,742],{"__ignoreMap":446},{"title":446,"searchDepth":750,"depth":750,"links":751},2,[752,753,754,756,758,759,760,761],{"id":428,"depth":744,"text":429},{"id":477,"depth":744,"text":478},{"id":569,"depth":744,"text":755},"Add Nuxt module",{"id":634,"depth":744,"text":757},"Configure nuxt.config.ts",{"id":646,"depth":744,"text":647},{"id":675,"depth":744,"text":676},{"id":692,"depth":744,"text":693},{"id":721,"depth":744,"text":722},"Install and configure Nuxt.","md",null,{},true,"---\ntitle: Nuxt\ndescription: Install and configure Nuxt.\n---\n\n\u003CSteps>\n\n### Create project\n\nStart by creating a new Nuxt project using `create-nuxt-app`:\n\n```bash\nnpm create nuxt@latest\n```\n\n\u003CCallout class=\"[&_figure]:w-full [&_figure]:m-0\">\n\nIf you encounter the error `ERROR: Cannot read properties of undefined (reading 'sys') (x4)`, please proceed to install TypeScript as a dependency, as advised in this [issue](https://github.com/nuxt/nuxt/issues/20936)\n\n```bash\nnpm install -D typescript\n```\n\n\u003C/Callout>\n\n### Add Tailwind CSS\n\nHow to setup tailwindcss\n\n::tabs{default-value=\"vite\" class=\"relative mt-6 w-full\"}\n  ::tabs-list\n    ::tabs-trigger{value=\"vite\"}\n      @tailwindcss/vite\n    ::\n\n    ::tabs-trigger{value=\"nuxt-module\"}\n      @nuxtjs/tailwindcss\n    ::\n  ::\n\n  ::tabs-content{value=\"vite\"}\n\n    ```bash\n    npm install tailwindcss @tailwindcss/vite -D\n    ```\n\n    Replace everything in `app/assets/css/tailwind.css` with the following:\n\n    ```css title=\"app/assets/css/tailwind.css\"\n    @import \"tailwindcss\";\n    ```\n\n    Update `nuxt.config.ts` with the following:\n\n    ```ts\n    import tailwindcss from '@tailwindcss/vite'\n\n    export default defineNuxtConfig({\n      // ...\n      css: ['~/assets/css/tailwind.css'],\n      vite: {\n        plugins: [\n          tailwindcss(),\n        ],\n      },\n    })\n    ```\n\n  ::\n\n  ::tabs-content{value=\"nuxt-module\"}\n\n     ```bash\n    npm install tailwindcss @nuxtjs/tailwindcss@7.0.0-beta.1 -D\n    ```\n\n    Replace everything in `app/assets/css/tailwind.css` with the following:\n\n    ```css title=\"app/assets/css/tailwind.css\"\n    @import \"tailwindcss\";\n    ```\n\n    ```ts\n    export default defineNuxtConfig({\n      // ...\n      modules: ['@nuxtjs/tailwindcss'],\n    })\n    ```\n\n  ::\n::\n\n### Add `Nuxt` module\n\nSkipping this step triggers numerous console warnings due to Nuxt's auto-import feature.\n\n::tabs{default-value=\"module\" class=\"relative mt-6 w-full\"}\n  ::tabs-list\n    ::tabs-trigger{value=\"module\"}\n      Module\n    ::\n\n    ::tabs-trigger{value=\"manual\"}\n      Manual\n    ::\n  ::\n\n  ::tabs-content{value=\"module\"}\n\n    Install the package below.\n\n    ```bash\n  npx nuxi@latest module add shadcn-nuxt\n    ```\n  ::\n\n  ::tabs-content{value=\"manual\"}\n\n  Install the `@types/node`\n\n  ```bash\n  npm install -D @types/node\n  ```\n\n  Add the following code to `modules/shadcn.ts`.\n\n  ```ts\n  import { readdirSync } from 'node:fs'\n  import { join } from 'node:path'\n  import {\n    addComponentExports,\n    addComponentsDir,\n    createResolver,\n    defineNuxtModule,\n  } from 'nuxt/kit'\n\n  export interface ShadcnVueOptions {\n    /**\n     * Prefix for all the imported component\n     * @default \"Ui\"\n     */\n    prefix: string\n\n    /**\n     * Directory that the component lives in.\n     * @default \"@/components/ui\"\n     */\n    componentDir: string\n  }\n\n  export default defineNuxtModule\u003CShadcnVueOptions>({\n    defaults: {\n      prefix: 'Ui',\n      componentDir: '@/components/ui',\n    },\n    meta: {\n      name: 'ShadcnVue',\n      configKey: 'shadcn',\n      version: '0.0.1',\n      compatibility: {\n        nuxt: '>=3.17.0',\n      },\n    },\n    async setup({ componentDir, prefix }, nuxt) {\n      const COMPONENT_DIR_PATH = componentDir!\n      const ROOT_DIR_PATH = nuxt.options.rootDir\n      const { resolve, resolvePath } = createResolver(ROOT_DIR_PATH)\n\n      const componentsPath = await resolvePath(COMPONENT_DIR_PATH)\n\n      addComponentsDir({\n        path: componentsPath,\n        extensions: [],\n        ignore: ['**/*'],\n      }, {\n        prepend: true,\n      })\n\n      try {\n        await Promise.all(readdirSync(componentsPath).map(async (dir) => {\n          try {\n            const filePath = await resolvePath(join(COMPONENT_DIR_PATH, dir, 'index'), { extensions: ['.ts', '.js'] })\n\n            addComponentExports({\n              prefix,\n              filePath: resolve(filePath),\n              priority: 1,\n            })\n          }\n          catch (err) {\n            if (err instanceof Error)\n              console.warn('Module error: ', err.message)\n          }\n        }))\n      }\n      catch (err) {\n        if (err instanceof Error)\n          console.warn(err.message)\n      }\n    },\n  })\n  ```\n\n  ::\n::\n\n### Configure `nuxt.config.ts`\n\n```ts\nexport default defineNuxtConfig({\n  // ...\n  modules: ['shadcn-nuxt'],\n  shadcn: {\n    /**\n     * Prefix for all the imported component.\n     * @default \"Ui\"\n     */\n    prefix: '',\n    /**\n     * Directory that the component lives in.\n     * Will respect the Nuxt aliases.\n     * @link https://nuxt.com/docs/api/nuxt-config#alias\n     * @default \"@/components/ui\"\n     */\n    componentDir: '@/components/ui'\n  }\n})\n```\n\n### Add a Nuxt Plugin for providing ssrWidth (optional)\n\nSome components require a ssrWidth to be set through VueUse to avoid Hydration errors on mobile.\n\nAdd the following plugin to your Nuxt application: `app/plugins/ssr-width.ts`\n\nRead more about [`useSSRWidth`](https://vueuse.org/core/useSSRWidth/)\n\n```ts\nimport { provideSSRWidth } from '@vueuse/core'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  provideSSRWidth(1024, nuxtApp.vueApp)\n})\n```\n\n### Run Nuxt Prepare\n\nIf you are initiating a new project, you need to run the command so that Nuxt generates the necessary `.nuxt` folder:\n\n```bash\nnpx nuxi prepare\n```\n\n### Run the CLI\n\nRun the `shadcn-vue` init command to setup your project:\n\n```bash\nnpx shadcn-vue@latest init\n```\n\nYou will be asked a few questions to configure `components.json`.\n\n```txt\nWhich color would you like to use as base color? › Neutral\n```\n\n### Add Components\n\nYou can now start adding components to your project.\n\n```bash\nnpx shadcn-vue@latest add button\n```\n\nThe command above will add the `Button` component to your project. Nuxt autoImport will handle importing the components, you can just use it as such:\n\n```vue {3} showLineNumbers title=\"pages/index.vue\"\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CButton>Click me\u003C/Button>\n  \u003C/div>\n\u003C/template>\n```\n\n\u003C/Steps>\n",{"title":284,"description":762},"G-2rNPtGLinCFpY_mK67L3sWQYPYAL2WUbL0Tp6-v0k",[771,772],{"title":279,"path":280,"stem":281,"children":-1},{"title":288,"path":289,"stem":290,"children":-1},1776258658427]