[{"data":1,"prerenderedAt":417},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":389,"doc-page-nav":409},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":384,"_id":385,"_source":386,"_file":387,"_extension":388},"/documentation/setup/configuration","setup",false,"","Configuration",{"type":11,"children":12,"toc":381},"root",[13,298,375],{"type":14,"tag":15,"props":16,"children":18},"element","doc-component-demo",{"title":17},"Nuxt configuration",[19,35,63,70,81,98,103,124,136,149,162,175,190,195,207,228,262,266,271],{"type":14,"tag":20,"props":21,"children":22},"p",{},[23,26,33],{"type":24,"value":25},"text","A Nuxt application is configured through the ",{"type":14,"tag":27,"props":28,"children":30},"code",{"className":29},[],[31],{"type":24,"value":32},"nuxt.config.ts",{"type":24,"value":34}," file. In this file, we can setup core features of nuxt, enable modules, configure them, extend from other layers, and more.",{"type":14,"tag":20,"props":36,"children":37},{},[38,40,45,47,53,55,61],{"type":24,"value":39},"Each layer has a ",{"type":14,"tag":27,"props":41,"children":43},{"className":42},[],[44],{"type":24,"value":32},{"type":24,"value":46}," file that is used to configure the layer itself. Layers can also have a ",{"type":14,"tag":27,"props":48,"children":50},{"className":49},[],[51],{"type":24,"value":52},"app.config.ts",{"type":24,"value":54}," file that is used to manage the layer's default app configuration. In that case, you should also find a ",{"type":14,"tag":27,"props":56,"children":58},{"className":57},[],[59],{"type":24,"value":60},"nuxt.schema.ts",{"type":24,"value":62}," file that is used to define the layer's configuration schema.",{"type":14,"tag":64,"props":65,"children":69},"doc-heading",{"label":66,"className":67},"nuxt.config.js",[68],"mb-4",[],{"type":14,"tag":20,"props":71,"children":72},{},[73,75],{"type":24,"value":74},"This is an overview of the nuxt configuration file. It's used to change the way nuxt works ",{"type":14,"tag":76,"props":77,"children":78},"em",{},[79],{"type":24,"value":80},"(disable server-side rendering, change the build directory, etc, apply cache rules to specific routes, ...)",{"type":14,"tag":82,"props":83,"children":84},"code-group",{},[85],{"type":14,"tag":86,"props":87,"children":93},"pre",{"className":88,"code":90,"filename":91,"language":92,"meta":8},[89],"language-ts","export default defineNuxtConfig({\n  extends: [\n    // register layers\n  ],\n  modules: [\n    // register modules\n  ],\n\n  // rest of your nuxt config ...\n})\n","\u003Capp>/nuxt.config.js","ts",[94],{"type":14,"tag":27,"props":95,"children":96},{"__ignoreMap":8},[97],{"type":24,"value":90},{"type":14,"tag":64,"props":99,"children":102},{"label":100,"className":101},"Runtime config",[68],[],{"type":14,"tag":20,"props":104,"children":105},{},[106,108,114,116,122],{"type":24,"value":107},"Everything defined in the ",{"type":14,"tag":27,"props":109,"children":111},{"className":110},[],[112],{"type":24,"value":113},"\u003Capp>/nuxt.config.ts",{"type":24,"value":115}," file is not exposed in either the client or the server. To expose a variable to the client, you need to use the ",{"type":14,"tag":27,"props":117,"children":119},{"className":118},[],[120],{"type":24,"value":121},"runtimeConfig",{"type":24,"value":123}," property. This property is used to expose variables to the client, and to the server.",{"type":14,"tag":82,"props":125,"children":126},{},[127],{"type":14,"tag":86,"props":128,"children":131},{"className":129,"code":130,"filename":91,"language":92,"meta":8},[89],"export default defineNuxtConfig({\n  runtimeConfig: {\n    // expose variables only to server\n    secretKey: 'my-private-key',\n\n    public: {\n      // expose variables to both server and client\n      mapboxToken: 'my-public-token'\n    }\n  }\n})\n",[132],{"type":14,"tag":27,"props":133,"children":134},{"__ignoreMap":8},[135],{"type":24,"value":130},{"type":14,"tag":20,"props":137,"children":138},{},[139,141,147],{"type":24,"value":140},"The runtime config can then be accessed in the server using the ",{"type":14,"tag":27,"props":142,"children":144},{"className":143},[],[145],{"type":24,"value":146},"useRuntimeConfig",{"type":24,"value":148}," nuxt composable:",{"type":14,"tag":82,"props":150,"children":151},{},[152],{"type":14,"tag":86,"props":153,"children":157},{"className":154,"code":155,"filename":156,"language":92,"meta":8},[89],"export default defineEventHandler((event) => {\n  const config = useRuntimeConfig()\n  // config.secretKey\n  // config.public.mapboxToken\n})\n","\u003Capp>/server/api/hello.ts",[158],{"type":14,"tag":27,"props":159,"children":160},{"__ignoreMap":8},[161],{"type":24,"value":155},{"type":14,"tag":20,"props":163,"children":164},{},[165,167,173],{"type":24,"value":166},"And in the client using same composable, note that you only have access to the ",{"type":14,"tag":27,"props":168,"children":170},{"className":169},[],[171],{"type":24,"value":172},"public",{"type":24,"value":174}," variables:",{"type":14,"tag":82,"props":176,"children":177},{},[178],{"type":14,"tag":86,"props":179,"children":185},{"className":180,"code":182,"filename":183,"language":184,"meta":8},[181],"language-vue","\u003Cscript setup lang=\"ts\">\nconst config = useRuntimeConfig()\n// config.public.mapboxToken\n\u003C/script>\n","\u003Capp>/components/MyComponent.vue","vue",[186],{"type":14,"tag":27,"props":187,"children":188},{"__ignoreMap":8},[189],{"type":24,"value":182},{"type":14,"tag":64,"props":191,"children":194},{"label":192,"className":193},"Environment variables",[68],[],{"type":14,"tag":20,"props":196,"children":197},{},[198,200,205],{"type":24,"value":199},"When using the ",{"type":14,"tag":27,"props":201,"children":203},{"className":202},[],[204],{"type":24,"value":121},{"type":24,"value":206}," property, you can use environment variables to define their value. This is useful when you want to use different values for different environments.",{"type":14,"tag":20,"props":208,"children":209},{},[210,212,218,220,226],{"type":24,"value":211},"Like seen in the previous example, you can define the ",{"type":14,"tag":27,"props":213,"children":215},{"className":214},[],[216],{"type":24,"value":217},"NUXT_SECRET_KEY",{"type":24,"value":219}," and ",{"type":14,"tag":27,"props":221,"children":223},{"className":222},[],[224],{"type":24,"value":225},"NUXT_PUBLIC_MAPBOX_TOKEN",{"type":24,"value":227}," value using an environment variable.",{"type":14,"tag":20,"props":229,"children":230},{},[231,233,239,241,246,247,253,255,260],{"type":24,"value":232},"During development, or at build time, you can use ",{"type":14,"tag":27,"props":234,"children":236},{"className":235},[],[237],{"type":24,"value":238},".env",{"type":24,"value":240}," files to define environment variables. These files are located at the root of your project and are named ",{"type":14,"tag":27,"props":242,"children":244},{"className":243},[],[245],{"type":24,"value":238},{"type":24,"value":219},{"type":14,"tag":27,"props":248,"children":250},{"className":249},[],[251],{"type":24,"value":252},".env.local",{"type":24,"value":254},". Note that when running the production build, no ",{"type":14,"tag":27,"props":256,"children":258},{"className":257},[],[259],{"type":24,"value":238},{"type":24,"value":261}," file is used.",{"type":14,"tag":263,"props":264,"children":265},"hr",{},[],{"type":14,"tag":20,"props":267,"children":268},{},[269],{"type":24,"value":270},"Useful resources:",{"type":14,"tag":272,"props":273,"children":274},"ul",{},[275,288],{"type":14,"tag":276,"props":277,"children":278},"li",{},[279],{"type":14,"tag":280,"props":281,"children":285},"a",{"href":282,"rel":283},"https://nuxt.com/docs/migration/configuration",[284],"nofollow",[286],{"type":24,"value":287},"Read configuration guide on nuxt.com",{"type":14,"tag":276,"props":289,"children":290},{},[291],{"type":14,"tag":280,"props":292,"children":295},{"href":293,"rel":294},"https://nuxt.com/docs/guide/going-further/runtime-config",[284],[296],{"type":24,"value":297},"Read runtime config guide on nuxt.com",{"type":14,"tag":15,"props":299,"children":301},{"title":300},"Tairo configuration",[302,314,317,330,343,355,358,362],{"type":14,"tag":20,"props":303,"children":304},{},[305,307,312],{"type":24,"value":306},"In addition to the nuxt configuration, another file is used to configure the app itself. This file is named ",{"type":14,"tag":27,"props":308,"children":310},{"className":309},[],[311],{"type":24,"value":52},{"type":24,"value":313}," and is used to configure the app layout, theme, and more.",{"type":14,"tag":64,"props":315,"children":316},{"label":52},[],{"type":14,"tag":82,"props":318,"children":319},{},[320],{"type":14,"tag":86,"props":321,"children":325},{"className":322,"code":323,"filename":324,"language":92,"meta":8},[89],"export default defineAppConfig({\n  // tairo specific config\n  tairo: {\n    // app title suffix\n    title: 'My app',\n\n    // register tairo panels\n    panels: [],\n\n    // configure error page\n    error: {},\n\n    // layout configuration...\n  },\n\n  // @shuriken-ui/nuxt specific config\n  nui: {\n    BaseButton: {\n      // default props for BaseButton\n    },\n  },\n\n  // rest of your app config ...\n})\n","\u003Capp>/app.config.js",[326],{"type":14,"tag":27,"props":327,"children":328},{"__ignoreMap":8},[329],{"type":24,"value":323},{"type":14,"tag":20,"props":331,"children":332},{},[333,335,341],{"type":24,"value":334},"App configuration can then be accessed in components using the ",{"type":14,"tag":27,"props":336,"children":338},{"className":337},[],[339],{"type":24,"value":340},"useAppConfig",{"type":24,"value":342}," nuxt composable. We use this internally to configure the layout, the theme, and other features, but nothing stops you from using it to configure your own components.",{"type":14,"tag":82,"props":344,"children":345},{},[346],{"type":14,"tag":86,"props":347,"children":350},{"className":348,"code":349,"filename":183,"language":184,"meta":8},[181],"\u003Cscript setup lang=\"ts\">\nconst appConfig = useAppConfig()\n// appConfig.tairo\n\u003C/script>\n",[351],{"type":14,"tag":27,"props":352,"children":353},{"__ignoreMap":8},[354],{"type":24,"value":349},{"type":14,"tag":263,"props":356,"children":357},{},[],{"type":14,"tag":20,"props":359,"children":360},{},[361],{"type":24,"value":270},{"type":14,"tag":272,"props":363,"children":364},{},[365],{"type":14,"tag":276,"props":366,"children":367},{},[368],{"type":14,"tag":280,"props":369,"children":372},{"href":370,"rel":371},"https://github.com/shuriken-ui/nuxt#configuration",[284],[373],{"type":24,"value":374},"مشاهده تنظیمات پیش‌فرض NUI در github.com",{"type":14,"tag":376,"props":377,"children":380},"doc-nav",{"next":378,"prev":379},"/documentation/layers","/documentation/setup/first-api-route",[],{"title":8,"searchDepth":382,"depth":382,"links":383},2,[],"markdown","content:documentation:10.setup:7.configuration.md","content","documentation/10.setup/7.configuration.md","md",[390,396,403],{"_path":391,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":392,"description":8,"toc":393,"_type":384,"_id":394,"_source":386,"_file":395,"_extension":388},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":397,"_dir":6,"_draft":7,"_partial":393,"_locale":8,"title":398,"_id":399,"_type":400,"_source":386,"_file":401,"_extension":402},"/documentation/setup/_dir","Setup","content:documentation:10.setup:_dir.yml","yaml","documentation/10.setup/_dir.yml","yml",{"_path":404,"_dir":405,"_draft":7,"_partial":7,"_locale":8,"title":406,"description":8,"_type":384,"_id":407,"_source":386,"_file":408,"_extension":388},"/documentation/setup","documentation","Prerequisites","content:documentation:10.setup:1.index.md","documentation/10.setup/1.index.md",[410,412],{"_path":379,"title":411},"Your first API route",{"_path":378,"title":413,"_dir":414},"Tairo base layer",{"_path":415,"title":416},"/documentation/layers/_dir","Layers",1779173534323]