[{"data":1,"prerenderedAt":770},["ShallowReactive",2],{"navigation":3,"/getting-started/setup":60,"/getting-started/setup-surround":767},[4,22,35],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","1.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Setup","/getting-started/setup","1.getting-started/1.setup",{"title":15,"path":16,"stem":17},"Options","/getting-started/options","1.getting-started/2.options",{"title":19,"path":20,"stem":21},"TypeScript","/getting-started/typescript","1.getting-started/3.typescript",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Storybook","/storybook","2.storybook",[27,31],{"title":28,"path":29,"stem":30},"Configuration","/storybook/config","2.storybook/1.config",{"title":32,"path":33,"stem":34},"Storybook Viewer","/storybook/viewer","2.storybook/2.viewer",{"title":36,"path":37,"stem":38,"children":39,"page":6},"Examples","/examples","3.examples",[40,44,48,52,56],{"title":41,"path":42,"stem":43},"Basic Usage","/examples/basic","3.examples/1.basic",{"title":45,"path":46,"stem":47},"Tailwind CSS","/examples/tailwind","3.examples/2.tailwind",{"title":49,"path":50,"stem":51},"Advanced Usage","/examples/showcase","3.examples/3.showcase",{"title":53,"path":54,"stem":55},"Composables","/examples/composables","3.examples/6.composables",{"title":57,"path":58,"stem":59},"File System Routing","/examples/routing","3.examples/7.routing",{"id":61,"title":11,"body":62,"description":760,"extension":761,"links":762,"meta":763,"navigation":764,"path":12,"seo":765,"stem":13,"__hash__":766},"docs/1.getting-started/1.setup.md",{"type":63,"value":64,"toc":752},"minimark",[65,70,74,137,148,151,162,235,247,310,320,327,331,338,397,418,429,438,445,450,453,458,461,537,541,544,604,608,615,627,630,644,656,659,668,742,748],[66,67,69],"h2",{"id":68},"installation","Installation",[71,72,73],"p",{},"The Storybook CLI provides a convenient way to integrate Storybook with Nuxt. Run the following command in your project's root directory:",[75,76,77,106,122],"code-group",{},[78,79,85],"pre",{"className":80,"code":81,"filename":82,"language":83,"meta":84,"style":84},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm dlx storybook@latest init\n","pnpm","bash","",[86,87,88],"code",{"__ignoreMap":84},[89,90,93,96,100,103],"span",{"class":91,"line":92},"line",1,[89,94,82],{"class":95},"sBMFI",[89,97,99],{"class":98},"sfazB"," dlx",[89,101,102],{"class":98}," storybook@latest",[89,104,105],{"class":98}," init\n",[78,107,110],{"className":80,"code":108,"filename":109,"language":83,"meta":84,"style":84},"yarn dlx storybook@latest init\n","yarn",[86,111,112],{"__ignoreMap":84},[89,113,114,116,118,120],{"class":91,"line":92},[89,115,109],{"class":95},[89,117,99],{"class":98},[89,119,102],{"class":98},[89,121,105],{"class":98},[78,123,126],{"className":80,"code":124,"filename":125,"language":83,"meta":84,"style":84},"npx storybook@latest init\n","npm",[86,127,128],{"__ignoreMap":84},[89,129,130,133,135],{"class":91,"line":92},[89,131,132],{"class":95},"npx",[89,134,102],{"class":98},[89,136,105],{"class":98},[71,138,139,140,147],{},"This command will install Storybook (v10x) along with the Nuxt module, set up the necessary scripts to configure Storybook, and add some boilerplate stories to get you started.\nPlease consult the ",[141,142,146],"a",{"href":143,"rel":144},"https://storybook.js.org/docs/get-started/install",[145],"nofollow","Storybook documentation"," for more information.",[71,149,150],{},"Alternatively, you can install Storybook and the Nuxt module manually.",[152,153,154],"ol",{},[155,156,157,158,161],"li",{},"Add ",[86,159,160],{},"@nuxtjs/storybook"," as a development dependency to your project:",[75,163,164,186,204,219],{},[78,165,168],{"className":80,"code":166,"filename":167,"language":83,"meta":84,"style":84},"npx nuxi@latest module add storybook\n","nuxi",[86,169,170],{"__ignoreMap":84},[89,171,172,174,177,180,183],{"class":91,"line":92},[89,173,132],{"class":95},[89,175,176],{"class":98}," nuxi@latest",[89,178,179],{"class":98}," module",[89,181,182],{"class":98}," add",[89,184,185],{"class":98}," storybook\n",[78,187,189],{"className":80,"code":188,"filename":82,"language":83,"meta":84,"style":84},"pnpm i -D @nuxtjs/storybook\n",[86,190,191],{"__ignoreMap":84},[89,192,193,195,198,201],{"class":91,"line":92},[89,194,82],{"class":95},[89,196,197],{"class":98}," i",[89,199,200],{"class":98}," -D",[89,202,203],{"class":98}," @nuxtjs/storybook\n",[78,205,207],{"className":80,"code":206,"filename":109,"language":83,"meta":84,"style":84},"yarn add -D @nuxtjs/storybook\n",[86,208,209],{"__ignoreMap":84},[89,210,211,213,215,217],{"class":91,"line":92},[89,212,109],{"class":95},[89,214,182],{"class":98},[89,216,200],{"class":98},[89,218,203],{"class":98},[78,220,222],{"className":80,"code":221,"filename":125,"language":83,"meta":84,"style":84},"npm install -D @nuxtjs/storybook\n",[86,223,224],{"__ignoreMap":84},[89,225,226,228,231,233],{"class":91,"line":92},[89,227,125],{"class":95},[89,229,230],{"class":98}," install",[89,232,200],{"class":98},[89,234,203],{"class":98},[152,236,238],{"start":237},2,[155,239,240,241,243,244,246],{},"If not using ",[86,242,167],{}," above, add the module ",[86,245,160],{}," to your Nuxt configuration:",[78,248,253],{"className":249,"code":250,"filename":251,"language":252,"meta":84,"style":84},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxtjs/storybook'],\n})\n","nuxt.config.ts","ts",[86,254,255,276,301],{"__ignoreMap":84},[89,256,257,261,264,268,272],{"class":91,"line":92},[89,258,260],{"class":259},"s7zQu","export",[89,262,263],{"class":259}," default",[89,265,267],{"class":266},"s2Zo4"," defineNuxtConfig",[89,269,271],{"class":270},"sTEyZ","(",[89,273,275],{"class":274},"sMK4o","{\n",[89,277,278,282,285,288,291,293,295,298],{"class":91,"line":237},[89,279,281],{"class":280},"swJcz","  modules",[89,283,284],{"class":274},":",[89,286,287],{"class":270}," [",[89,289,290],{"class":274},"'",[89,292,160],{"class":98},[89,294,290],{"class":274},[89,296,297],{"class":270},"]",[89,299,300],{"class":274},",\n",[89,302,304,307],{"class":91,"line":303},3,[89,305,306],{"class":274},"}",[89,308,309],{"class":270},")\n",[152,311,312],{"start":303},[155,313,314,315,319],{},"Prepare ",[141,316,318],{"href":317},"#storybook-config-files","Storybook config files",".",[321,322,324],"tip",{"type":323},"success",[71,325,326],{},"That's it! You can now use Storybook in your Nuxt app ✨",[66,328,330],{"id":329},"usage","Usage",[71,332,333,334,337],{},"When you run your Nuxt app in development mode, the Storybook server will automatically start in the background. The URL to access Storybook will be displayed in the console (",[86,335,336],{},"http://localhost:6006"," by default).\nIf you want to start Storybook without running your Nuxt app, you can use the following command:",[75,339,340,351,362,376],{},[78,341,343],{"className":80,"code":342,"filename":82,"language":83,"meta":84,"style":84},"pnpm storybook\n",[86,344,345],{"__ignoreMap":84},[89,346,347,349],{"class":91,"line":92},[89,348,82],{"class":95},[89,350,185],{"class":98},[78,352,354],{"className":80,"code":353,"filename":109,"language":83,"meta":84,"style":84},"yarn storybook\n",[86,355,356],{"__ignoreMap":84},[89,357,358,360],{"class":91,"line":92},[89,359,109],{"class":95},[89,361,185],{"class":98},[78,363,365],{"className":80,"code":364,"filename":125,"language":83,"meta":84,"style":84},"npm run storybook\n",[86,366,367],{"__ignoreMap":84},[89,368,369,371,374],{"class":91,"line":92},[89,370,125],{"class":95},[89,372,373],{"class":98}," run",[89,375,185],{"class":98},[78,377,380],{"className":80,"code":378,"filename":379,"language":83,"meta":84,"style":84},"storybook dev -p 6006\n","manual",[86,381,382],{"__ignoreMap":84},[89,383,384,387,390,393],{"class":91,"line":92},[89,385,386],{"class":95},"storybook",[89,388,389],{"class":98}," dev",[89,391,392],{"class":98}," -p",[89,394,396],{"class":395},"sbssI"," 6006\n",[398,399,400],"warning",{},[71,401,402,403,406,407,410,411,414,415,319],{},"Running Storybook on its own will result in Nuxt running on ",[86,404,405],{},"production"," mode instead of ",[86,408,409],{},"development",". This will have an effect on any stories for components that use ",[86,412,413],{},"\u003CDevOnly>"," or ",[86,416,417],{},"import.meta.dev",[71,419,420,421,424,425,428],{},"When you install Storybook using the CLI, you will find a few stories in the ",[86,422,423],{},"components"," directory to get you started. You can add your own stories to this directory or create a new directory for your stories (in which case you will need to update the ",[141,426,427],{"href":29},"Storybook configuration",").\nThe Storybook server will automatically detect changes to your stories and update the UI accordingly.",[321,430,432],{"type":431},"info",[71,433,434,435,319],{},"Discover your Stories directly within the ",[86,436,437],{},"Storybook Devtools tab",[71,439,440,441,319],{},"For more information on how to write stories and the next steps, refer to the ",[141,442,146],{"href":443,"rel":444},"https://storybook.js.org/docs/get-started/whats-a-story",[145],[446,447,449],"h3",{"id":448},"nightly-builds","Nightly Builds",[71,451,452],{},"The nightly release channel allows you to test the latest updates and features, directly from the most recent commits. This is useful for experimenting with new features, improvements, and bug fixes before they are included in the stable release.",[454,455,457],"h4",{"id":456},"opting-in-to-the-nightly-release","Opting in to the nightly release",[71,459,460],{},"To use the nightly version, follow these steps:",[462,463,464,534],"ul",{},[155,465,466,467,469,470,473,474],{},"Modify the ",[86,468,160],{}," dependency in your ",[86,471,472],{},"package.json"," to use the latest nightly release:",[78,475,479],{"className":476,"code":477,"language":478,"meta":84,"style":84},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"devDependencies\": {\n    \"@nuxtjs/storybook\": \"npm:@nuxtjs/storybook@nightly\"\n  }\n}\n","json",[86,480,481,485,502,522,528],{"__ignoreMap":84},[89,482,483],{"class":91,"line":92},[89,484,275],{"class":274},[89,486,487,490,494,497,499],{"class":91,"line":237},[89,488,489],{"class":274},"  \"",[89,491,493],{"class":492},"spNyl","devDependencies",[89,495,496],{"class":274},"\"",[89,498,284],{"class":274},[89,500,501],{"class":274}," {\n",[89,503,504,507,509,511,513,516,519],{"class":91,"line":303},[89,505,506],{"class":274},"    \"",[89,508,160],{"class":95},[89,510,496],{"class":274},[89,512,284],{"class":274},[89,514,515],{"class":274}," \"",[89,517,518],{"class":98},"npm:@nuxtjs/storybook@nightly",[89,520,521],{"class":274},"\"\n",[89,523,525],{"class":91,"line":524},4,[89,526,527],{"class":274},"  }\n",[89,529,531],{"class":91,"line":530},5,[89,532,533],{"class":274},"}\n",[155,535,536],{},"Remove the lockfile and reinstall the dependencies using your package manager to ensure the nightly release is installed.",[454,538,540],{"id":539},"opting-out-of-the-nightly-release","Opting out of the nightly release",[71,542,543],{},"If you need to revert to the stable release, follow these steps:",[462,545,546,601],{},[155,547,548,549,551,552,554,555],{},"Change the ",[86,550,160],{}," dependency in ",[86,553,472],{}," back to the stable version:",[78,556,558],{"className":476,"code":557,"language":478,"meta":84,"style":84},"{\n  \"devDependencies\": {\n    \"@nuxtjs/storybook\": \"latest\"\n  }\n}\n",[86,559,560,564,576,593,597],{"__ignoreMap":84},[89,561,562],{"class":91,"line":92},[89,563,275],{"class":274},[89,565,566,568,570,572,574],{"class":91,"line":237},[89,567,489],{"class":274},[89,569,493],{"class":492},[89,571,496],{"class":274},[89,573,284],{"class":274},[89,575,501],{"class":274},[89,577,578,580,582,584,586,588,591],{"class":91,"line":303},[89,579,506],{"class":274},[89,581,160],{"class":95},[89,583,496],{"class":274},[89,585,284],{"class":274},[89,587,515],{"class":274},[89,589,590],{"class":98},"latest",[89,592,521],{"class":274},[89,594,595],{"class":91,"line":524},[89,596,527],{"class":274},[89,598,599],{"class":91,"line":530},[89,600,533],{"class":274},[155,602,603],{},"Remove the lockfile and reinstall the dependencies to revert to the stable release.",[66,605,607],{"id":606},"storybook-config-files","Storybook config Files",[71,609,610,611,614],{},"When running ",[86,612,613],{},"npm run dev",", this module will look for these files:",[462,616,617,622],{},[155,618,619],{},[86,620,621],{},".storybook/main.{ts,js}",[155,623,624],{},[86,625,626],{},".storybook/preview.{js,cjs,mjs,ts}",[71,628,629],{},"You can create these files manually or by running the following command:",[78,631,633],{"className":80,"code":632,"language":83,"meta":84,"style":84},"npx storybook-nuxt init\n",[86,634,635],{"__ignoreMap":84},[89,636,637,639,642],{"class":91,"line":92},[89,638,132],{"class":95},[89,640,641],{"class":98}," storybook-nuxt",[89,643,105],{"class":98},[321,645,646],{"type":431},[71,647,648,649,652,653],{},"If you want to auto launch storybook after init pass ",[86,650,651],{},"--start","\nIf you want to enable Nuxt module pass ",[86,654,655],{},"--enable-module",[66,657,15],{"id":658},"options",[71,660,661,662,664,665,284],{},"You can customize the module's behavior by using the ",[86,663,386],{}," property in ",[86,666,667],{},"nuxt.config",[78,669,671],{"className":249,"code":670,"filename":667,"language":252,"meta":84,"style":84},"export default defineNuxtConfig({\n  storybook: {\n    // Options\n    host: 'http://localhost',\n    port: 6006,\n  },\n})\n",[86,672,673,685,694,700,717,729,735],{"__ignoreMap":84},[89,674,675,677,679,681,683],{"class":91,"line":92},[89,676,260],{"class":259},[89,678,263],{"class":259},[89,680,267],{"class":266},[89,682,271],{"class":270},[89,684,275],{"class":274},[89,686,687,690,692],{"class":91,"line":237},[89,688,689],{"class":280},"  storybook",[89,691,284],{"class":274},[89,693,501],{"class":274},[89,695,696],{"class":91,"line":303},[89,697,699],{"class":698},"sHwdD","    // Options\n",[89,701,702,705,707,710,713,715],{"class":91,"line":524},[89,703,704],{"class":280},"    host",[89,706,284],{"class":274},[89,708,709],{"class":274}," '",[89,711,712],{"class":98},"http://localhost",[89,714,290],{"class":274},[89,716,300],{"class":274},[89,718,719,722,724,727],{"class":91,"line":530},[89,720,721],{"class":280},"    port",[89,723,284],{"class":274},[89,725,726],{"class":395}," 6006",[89,728,300],{"class":274},[89,730,732],{"class":91,"line":731},6,[89,733,734],{"class":274},"  },\n",[89,736,738,740],{"class":91,"line":737},7,[89,739,306],{"class":274},[89,741,309],{"class":270},[71,743,744,745,319],{},"See the ",[141,746,747],{"href":16},"module options",[749,750,751],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":84,"searchDepth":92,"depth":237,"links":753},[754,755,758,759],{"id":68,"depth":237,"text":69},{"id":329,"depth":237,"text":330,"children":756},[757],{"id":448,"depth":303,"text":449},{"id":606,"depth":237,"text":607},{"id":658,"depth":237,"text":15},"Using Storybook in your Nuxt project is only one command away ✨","md",null,{},true,{"title":11,"description":760},"nLTyeCJoy0ApaP1A3berkmwd5indd2BRiCyKzXRphFU",[762,768],{"title":15,"path":16,"stem":17,"description":769,"children":-1},"Configuration options for the Nuxt Storybook module.",1778943829139]