[{"data":1,"prerenderedAt":556},["ShallowReactive",2],{"navigation":3,"/getting-started/typescript":60,"/getting-started/typescript-surround":551},[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":19,"body":62,"description":545,"extension":546,"links":547,"meta":548,"navigation":139,"path":20,"seo":549,"stem":21,"__hash__":550},"docs/1.getting-started/3.typescript.md",{"type":63,"value":64,"toc":543},"minimark",[65,82,85,539],[66,67,68,69,73,74,77,78,81],"p",{},"To use the Nuxt module with TypeScript, ensure that imports typically from ",[70,71,72],"code",{},"@storybook/*"," are now replaced by imports from ",[70,75,76],{},"@nuxtjs/storybook"," (or ",[70,79,80],{},"@storybook-vue/nuxt"," if the Nuxt module is not used). This is needed since the Storybook packages are dependencies of the Nuxt module, and are not directly installed in the project.",[66,83,84],{},"The following example demonstrates how to use types when configuring Storybook and for writing stories.",[86,87,88,240],"code-group",{},[89,90,96],"pre",{"className":91,"code":92,"filename":93,"language":94,"meta":95,"style":95},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { StorybookConfig } from '@nuxtjs/storybook' // not from '@storybook/core-common'\n\nexport default {\n  stories: ['../components/**/*.stories.ts'],\n  addons: ['@storybook/addon-links', '@storybook/addon-docs'],\n  framework: '@storybook/vue3',\n} as StorybookConfig\n",".storybook/main.ts","typescript","",[70,97,98,134,141,153,179,210,227],{"__ignoreMap":95},[99,100,103,107,111,115,118,121,124,127,130],"span",{"class":101,"line":102},"line",1,[99,104,106],{"class":105},"s7zQu","import",[99,108,110],{"class":109},"sMK4o"," {",[99,112,114],{"class":113},"sTEyZ"," StorybookConfig",[99,116,117],{"class":109}," }",[99,119,120],{"class":105}," from",[99,122,123],{"class":109}," '",[99,125,76],{"class":126},"sfazB",[99,128,129],{"class":109},"'",[99,131,133],{"class":132},"sHwdD"," // not from '@storybook/core-common'\n",[99,135,137],{"class":101,"line":136},2,[99,138,140],{"emptyLinePlaceholder":139},true,"\n",[99,142,144,147,150],{"class":101,"line":143},3,[99,145,146],{"class":105},"export",[99,148,149],{"class":105}," default",[99,151,152],{"class":109}," {\n",[99,154,156,160,163,166,168,171,173,176],{"class":101,"line":155},4,[99,157,159],{"class":158},"swJcz","  stories",[99,161,162],{"class":109},":",[99,164,165],{"class":113}," [",[99,167,129],{"class":109},[99,169,170],{"class":126},"../components/**/*.stories.ts",[99,172,129],{"class":109},[99,174,175],{"class":113},"]",[99,177,178],{"class":109},",\n",[99,180,182,185,187,189,191,194,196,199,201,204,206,208],{"class":101,"line":181},5,[99,183,184],{"class":158},"  addons",[99,186,162],{"class":109},[99,188,165],{"class":113},[99,190,129],{"class":109},[99,192,193],{"class":126},"@storybook/addon-links",[99,195,129],{"class":109},[99,197,198],{"class":109},",",[99,200,123],{"class":109},[99,202,203],{"class":126},"@storybook/addon-docs",[99,205,129],{"class":109},[99,207,175],{"class":113},[99,209,178],{"class":109},[99,211,213,216,218,220,223,225],{"class":101,"line":212},6,[99,214,215],{"class":158},"  framework",[99,217,162],{"class":109},[99,219,123],{"class":109},[99,221,222],{"class":126},"@storybook/vue3",[99,224,129],{"class":109},[99,226,178],{"class":109},[99,228,230,233,236],{"class":101,"line":229},7,[99,231,232],{"class":109},"}",[99,234,235],{"class":105}," as",[99,237,239],{"class":238},"sBMFI"," StorybookConfig\n",[89,241,244],{"className":91,"code":242,"filename":243,"language":94,"meta":95,"style":95},"import { Meta, Story } from '@nuxtjs/storybook' // not from '@storybook/vue3-vite'\nimport Button from './Button.vue'\n\nexport default {\n  title: 'Example/Button',\n  component: Button,\n} as Meta\n\nconst Template: Story = (args) => ({\n  components: { Button },\n  setup() {\n    return { args }\n  },\n  template: '\u003CButton v-bind=\"args\" />',\n})\n\nexport const Primary = Template.bind({})\nPrimary.args = {\n  primary: true,\n  label: 'Button',\n}\n","components/Button.stories.ts",[70,245,246,273,291,295,303,319,331,340,345,380,395,406,420,426,443,451,456,487,502,516,533],{"__ignoreMap":95},[99,247,248,250,252,255,257,260,262,264,266,268,270],{"class":101,"line":102},[99,249,106],{"class":105},[99,251,110],{"class":109},[99,253,254],{"class":113}," Meta",[99,256,198],{"class":109},[99,258,259],{"class":113}," Story",[99,261,117],{"class":109},[99,263,120],{"class":105},[99,265,123],{"class":109},[99,267,76],{"class":126},[99,269,129],{"class":109},[99,271,272],{"class":132}," // not from '@storybook/vue3-vite'\n",[99,274,275,277,280,283,285,288],{"class":101,"line":136},[99,276,106],{"class":105},[99,278,279],{"class":113}," Button ",[99,281,282],{"class":105},"from",[99,284,123],{"class":109},[99,286,287],{"class":126},"./Button.vue",[99,289,290],{"class":109},"'\n",[99,292,293],{"class":101,"line":143},[99,294,140],{"emptyLinePlaceholder":139},[99,296,297,299,301],{"class":101,"line":155},[99,298,146],{"class":105},[99,300,149],{"class":105},[99,302,152],{"class":109},[99,304,305,308,310,312,315,317],{"class":101,"line":181},[99,306,307],{"class":158},"  title",[99,309,162],{"class":109},[99,311,123],{"class":109},[99,313,314],{"class":126},"Example/Button",[99,316,129],{"class":109},[99,318,178],{"class":109},[99,320,321,324,326,329],{"class":101,"line":212},[99,322,323],{"class":158},"  component",[99,325,162],{"class":109},[99,327,328],{"class":113}," Button",[99,330,178],{"class":109},[99,332,333,335,337],{"class":101,"line":229},[99,334,232],{"class":109},[99,336,235],{"class":105},[99,338,339],{"class":238}," Meta\n",[99,341,343],{"class":101,"line":342},8,[99,344,140],{"emptyLinePlaceholder":139},[99,346,348,352,355,357,359,362,365,369,372,375,377],{"class":101,"line":347},9,[99,349,351],{"class":350},"spNyl","const",[99,353,354],{"class":113}," Template",[99,356,162],{"class":109},[99,358,259],{"class":238},[99,360,361],{"class":109}," =",[99,363,364],{"class":109}," (",[99,366,368],{"class":367},"sHdIc","args",[99,370,371],{"class":109},")",[99,373,374],{"class":350}," =>",[99,376,364],{"class":113},[99,378,379],{"class":109},"{\n",[99,381,383,386,388,390,392],{"class":101,"line":382},10,[99,384,385],{"class":158},"  components",[99,387,162],{"class":109},[99,389,110],{"class":109},[99,391,279],{"class":113},[99,393,394],{"class":109},"},\n",[99,396,398,401,404],{"class":101,"line":397},11,[99,399,400],{"class":158},"  setup",[99,402,403],{"class":109},"()",[99,405,152],{"class":109},[99,407,409,412,414,417],{"class":101,"line":408},12,[99,410,411],{"class":105},"    return",[99,413,110],{"class":109},[99,415,416],{"class":113}," args",[99,418,419],{"class":109}," }\n",[99,421,423],{"class":101,"line":422},13,[99,424,425],{"class":109},"  },\n",[99,427,429,432,434,436,439,441],{"class":101,"line":428},14,[99,430,431],{"class":158},"  template",[99,433,162],{"class":109},[99,435,123],{"class":109},[99,437,438],{"class":126},"\u003CButton v-bind=\"args\" />",[99,440,129],{"class":109},[99,442,178],{"class":109},[99,444,446,448],{"class":101,"line":445},15,[99,447,232],{"class":109},[99,449,450],{"class":113},")\n",[99,452,454],{"class":101,"line":453},16,[99,455,140],{"emptyLinePlaceholder":139},[99,457,459,461,464,467,470,472,475,479,482,485],{"class":101,"line":458},17,[99,460,146],{"class":105},[99,462,463],{"class":350}," const",[99,465,466],{"class":113}," Primary ",[99,468,469],{"class":109},"=",[99,471,354],{"class":113},[99,473,474],{"class":109},".",[99,476,478],{"class":477},"s2Zo4","bind",[99,480,481],{"class":113},"(",[99,483,484],{"class":109},"{}",[99,486,450],{"class":113},[99,488,490,493,495,498,500],{"class":101,"line":489},18,[99,491,492],{"class":113},"Primary",[99,494,474],{"class":109},[99,496,497],{"class":113},"args ",[99,499,469],{"class":109},[99,501,152],{"class":109},[99,503,505,508,510,514],{"class":101,"line":504},19,[99,506,507],{"class":158},"  primary",[99,509,162],{"class":109},[99,511,513],{"class":512},"sfNiH"," true",[99,515,178],{"class":109},[99,517,519,522,524,526,529,531],{"class":101,"line":518},20,[99,520,521],{"class":158},"  label",[99,523,162],{"class":109},[99,525,123],{"class":109},[99,527,528],{"class":126},"Button",[99,530,129],{"class":109},[99,532,178],{"class":109},[99,534,536],{"class":101,"line":535},21,[99,537,538],{"class":109},"}\n",[540,541,542],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":95,"searchDepth":102,"depth":136,"links":544},[],"Guide on how to use TypeScript with the Nuxt module","md",null,{},{"title":19,"description":545},"h0mPQ0WK-dusv5FRGdqwu7Q2wa33j-zwmsvmWULqMYw",[552,554],{"title":15,"path":16,"stem":17,"description":553,"children":-1},"Configuration options for the Nuxt Storybook module.",{"title":28,"path":29,"stem":30,"description":555,"children":-1},"Configure your Storybook.",1778943829479]