[{"data":1,"prerenderedAt":824},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":799,"doc-page-nav":819},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":794,"_id":795,"_source":796,"_file":797,"_extension":798},"/documentation/setup/installation","setup",false,"","Installation",{"type":11,"children":12,"toc":791},"root",[13,394,659,786],{"type":14,"tag":15,"props":16,"children":18},"element","doc-component-demo",{"title":17},"گزینه ۱: پروژه جدید Nuxt با لایه‌های GitHub",[19,34,65,322,340,352,356,361],{"type":14,"tag":20,"props":21,"children":22},"p",{},[23,26,32],{"type":24,"value":25},"text","روش ",{"type":14,"tag":27,"props":28,"children":29},"strong",{},[30],{"type":24,"value":31},"توصیه‌شده",{"type":24,"value":33}," برای شروع یک پروژه جدید با تایرو.",{"type":14,"tag":35,"props":36,"children":39},"doc-message",{"color":37,"icon":38},"muted-contrast","ph:info",[40],{"type":14,"tag":20,"props":41,"children":42},{},[43,45,54,56,63],{"type":24,"value":44},"This step requires you to have unlocked your ",{"type":14,"tag":46,"props":47,"children":51},"a",{"href":48,"rel":49},"https://cssninja.io/faq/github-access",[50],"nofollow",[52],{"type":24,"value":53},"github access",{"type":24,"value":55}," and have a ",{"type":14,"tag":46,"props":57,"children":60},{"href":58,"rel":59},"https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens",[50],[61],{"type":24,"value":62},"github personal access token",{"type":24,"value":64},".",{"type":14,"tag":66,"props":67,"children":70},"code-timeline",{"className":68},[69],"mt-12",[71,113,162,193,223,279],{"type":14,"tag":72,"props":73,"children":75},"code-timeline-item",{":vertical":74,"vertical":8},"true",[76,94,105],{"type":14,"tag":77,"props":78,"children":79},"code-group",{},[80],{"type":14,"tag":81,"props":82,"children":88},"pre",{"className":83,"code":85,"filename":86,"language":87,"meta":8},[84],"language-bash","npx nuxi@latest init \u003Capp>\n","Terminal","bash",[89],{"type":14,"tag":90,"props":91,"children":92},"code",{"__ignoreMap":8},[93],{"type":24,"value":85},{"type":14,"tag":95,"props":96,"children":97},"template",{"v-slot:title":8},[98],{"type":14,"tag":99,"props":100,"children":104},"tairo-toc-anchor",{":level":101,"label":102,"prefix":103},"3","Create a new Nuxt project (or use an existing one)"," ",[],{"type":14,"tag":95,"props":106,"children":107},{"v-slot:description":8},[108],{"type":14,"tag":20,"props":109,"children":110},{},[111],{"type":24,"value":112},"This command will create a new Nuxt project with minimal configuration and dependencies.",{"type":14,"tag":72,"props":114,"children":115},{":vertical":74,"vertical":8},[116,131,138],{"type":14,"tag":77,"props":117,"children":118},{},[119],{"type":14,"tag":81,"props":120,"children":126},{"className":121,"code":123,"filename":124,"language":125,"meta":8},[122],"language-ts","export default defineNuxtConfig({\n  extends: [\n    [\"gh:cssninjaStudio/tairo/layers/tairo#1.5.0\", {\n      install: true,\n      auth: import.meta.env.GITHUB_TOKEN,\n    }],\n  ]\n})\n","\u003Capp>/nuxt.config.ts","ts",[127],{"type":14,"tag":90,"props":128,"children":129},{"__ignoreMap":8},[130],{"type":24,"value":123},{"type":14,"tag":95,"props":132,"children":133},{"v-slot:title":8},[134],{"type":14,"tag":99,"props":135,"children":137},{":level":101,"label":136,"prefix":103},"Add the Tairo layers from github",[],{"type":14,"tag":95,"props":139,"children":140},{"v-slot:description":8},[141],{"type":14,"tag":20,"props":142,"children":143},{},[144,146,152,154,160],{"type":24,"value":145},"Link your project to the Tairo layers by adding them to the ",{"type":14,"tag":90,"props":147,"children":149},{"className":148},[],[150],{"type":24,"value":151},"nuxt.config.ts",{"type":24,"value":153}," file. Note the version number ",{"type":14,"tag":90,"props":155,"children":157},{"className":156},[],[158],{"type":24,"value":159},"1.5.0",{"type":24,"value":161}," which you can change to the latest version.",{"type":14,"tag":72,"props":163,"children":164},{":vertical":74,"vertical":8},[165,178,185],{"type":14,"tag":77,"props":166,"children":167},{},[168],{"type":14,"tag":81,"props":169,"children":173},{"className":170,"code":171,"filename":172,"language":87,"meta":8},[84],"GITHUB_TOKEN=ghp_your_github_token\n","\u003Capp>/.env",[174],{"type":14,"tag":90,"props":175,"children":176},{"__ignoreMap":8},[177],{"type":24,"value":171},{"type":14,"tag":95,"props":179,"children":180},{"v-slot:title":8},[181],{"type":14,"tag":99,"props":182,"children":184},{":level":101,"label":183,"prefix":103},"Add your Github token",[],{"type":14,"tag":95,"props":186,"children":187},{"v-slot:description":8},[188],{"type":14,"tag":20,"props":189,"children":190},{},[191],{"type":24,"value":192},"The token is only need when installing. It is also needed on CI/CD environments.",{"type":14,"tag":72,"props":194,"children":195},{":vertical":74,"vertical":8},[196,208,215],{"type":14,"tag":77,"props":197,"children":198},{},[199],{"type":14,"tag":81,"props":200,"children":203},{"className":201,"code":202,"filename":86,"language":87,"meta":8},[84],"npm install # or yarn, pnpm depending on your setup\n",[204],{"type":14,"tag":90,"props":205,"children":206},{"__ignoreMap":8},[207],{"type":24,"value":202},{"type":14,"tag":95,"props":209,"children":210},{"v-slot:title":8},[211],{"type":14,"tag":99,"props":212,"children":214},{":level":101,"label":213,"prefix":103},"Install dependencies with your package manager",[],{"type":14,"tag":95,"props":216,"children":217},{"v-slot:description":8},[218],{"type":14,"tag":20,"props":219,"children":220},{},[221],{"type":24,"value":222},"In previous step, you should have chosen a package manager, use it to install the dependencies.",{"type":14,"tag":72,"props":224,"children":225},{":vertical":74,"vertical":8},[226,238,264,271],{"type":14,"tag":77,"props":227,"children":228},{},[229],{"type":14,"tag":81,"props":230,"children":233},{"className":231,"code":232,"filename":86,"language":87,"meta":8},[84],"npm run dev # or yarn, pnpm depending on your setup\n",[234],{"type":14,"tag":90,"props":235,"children":236},{"__ignoreMap":8},[237],{"type":24,"value":232},{"type":14,"tag":35,"props":239,"children":242},{"color":37,"icon":38,"className":240},[241],"mb-12",[243],{"type":14,"tag":20,"props":244,"children":245},{},[246,248,254,256,262],{"type":24,"value":247},"Once you are done, you can stop the development server by pressing ",{"type":14,"tag":90,"props":249,"children":251},{"className":250},[],[252],{"type":24,"value":253},"Ctrl+C",{"type":24,"value":255}," (or ",{"type":14,"tag":90,"props":257,"children":259},{"className":258},[],[260],{"type":24,"value":261},"⌘+C",{"type":24,"value":263}," on macOS) in your terminal.",{"type":14,"tag":95,"props":265,"children":266},{"v-slot:title":8},[267],{"type":14,"tag":99,"props":268,"children":270},{":level":101,"label":269,"prefix":103},"Run the development server",[],{"type":14,"tag":95,"props":272,"children":273},{"v-slot:description":8},[274],{"type":14,"tag":20,"props":275,"children":276},{},[277],{"type":24,"value":278},"Start nuxt from the current folder and open the frontend in your browser.",{"type":14,"tag":72,"props":280,"children":281},{":vertical":74,"vertical":8},[282,289],{"type":14,"tag":95,"props":283,"children":284},{"v-slot:title":8},[285],{"type":14,"tag":99,"props":286,"children":288},{":level":101,"label":287,"prefix":103},"Done!",[],{"type":14,"tag":95,"props":290,"children":291},{"v-slot:description":8},[292],{"type":14,"tag":20,"props":293,"children":294},{},[295,297,303,305,309,312,314,320],{"type":24,"value":296},"You are now ready to edit your nuxt app! Continue by ",{"type":14,"tag":46,"props":298,"children":300},{"href":299},"/documentation/setup/add-a-layout",[301],{"type":24,"value":302},"adding a layout",{"type":24,"value":304},".\n",{"type":14,"tag":306,"props":307,"children":308},"br",{},[],{"type":14,"tag":306,"props":310,"children":311},{},[],{"type":24,"value":313},"\nIn the documentation, ",{"type":14,"tag":90,"props":315,"children":317},{"className":316},[],[318],{"type":24,"value":319},"\u003Capp>",{"type":24,"value":321}," in paths refers to the root of your project.",{"type":14,"tag":20,"props":323,"children":324},{},[325,330,332,338],{"type":14,"tag":326,"props":327,"children":329},"icon",{"name":328},"ph:warning",[],{"type":24,"value":331}," If you forgot to set the ",{"type":14,"tag":90,"props":333,"children":335},{"className":334},[],[336],{"type":24,"value":337},"GITHUB_TOKEN",{"type":24,"value":339}," environment variable, or if your token does not allow access to Tairo repository, you will see an error message like this:",{"type":14,"tag":77,"props":341,"children":342},{},[343],{"type":14,"tag":81,"props":344,"children":347},{"className":345,"code":346,"filename":86,"language":87,"meta":8},[84]," ERROR  Failed to download https://api.github.com/repos/cssninjaStudio/tairo/tarball/1.5.0: 404 Not Found\n",[348],{"type":14,"tag":90,"props":349,"children":350},{"__ignoreMap":8},[351],{"type":24,"value":346},{"type":14,"tag":353,"props":354,"children":355},"hr",{},[],{"type":14,"tag":20,"props":357,"children":358},{},[359],{"type":24,"value":360},"Useful resources:",{"type":14,"tag":362,"props":363,"children":364},"ul",{},[365,375,384],{"type":14,"tag":366,"props":367,"children":368},"li",{},[369],{"type":14,"tag":46,"props":370,"children":372},{"href":48,"rel":371},[50],[373],{"type":24,"value":374},"Github Access on cssninja.io",{"type":14,"tag":366,"props":376,"children":377},{},[378],{"type":14,"tag":46,"props":379,"children":381},{"href":58,"rel":380},[50],[382],{"type":24,"value":383},"Manage Access Tokens on docs.github.com",{"type":14,"tag":366,"props":385,"children":386},{},[387],{"type":14,"tag":46,"props":388,"children":391},{"href":389,"rel":390},"https://nuxt.com/docs/getting-started/installation#new-project",[50],[392],{"type":24,"value":393},"New Project on nuxt.com",{"type":14,"tag":15,"props":395,"children":397},{"title":396},"گزینه ۲: نصب و اجرا از منبع",[398,409],{"type":14,"tag":20,"props":399,"children":400},{},[401,403,408],{"type":24,"value":402},"This is the quickest way to start a project with Tairo when you want to use the source code directly.\nIt's also the way to go if you want to ",{"type":14,"tag":27,"props":404,"children":405},{},[406],{"type":24,"value":407},"run the demo app",{"type":24,"value":64},{"type":14,"tag":66,"props":410,"children":412},{"className":411},[69],[413,443,499,560,617],{"type":14,"tag":72,"props":414,"children":415},{":vertical":74,"vertical":8},[416,428,435],{"type":14,"tag":77,"props":417,"children":418},{},[419],{"type":14,"tag":81,"props":420,"children":423},{"className":421,"code":422,"filename":86,"language":87,"meta":8},[84],"├── .app/ # This is the entry point of your app (main app layer)\n├── .demo/ # This is the entry point of the demo (demo app layer)\n├── .vscode/ # Predefined vscode settings\n├── layers/ # Each layer is a package with its own dependencies\n│   ├── documentation/\n│   ├── landing/\n│   ├── tairo/\n│   ├── tairo-layout-collapse/\n│   ├── tairo-layout-sidebar/\n│   └── tairo-layout-topnav/\n├── patches/ # Contains patches for dependencies (pnpm patches)\n├── # Predefined dotfiles\n├── .editorconfig\n├── .eslintignore\n├── .eslintrc.cjs\n├── .gitignore\n├── .npmrc\n├── .nuxtrc\n├── # Monorepo configuration files\n├── package.json\n├── pnpm-lock.yaml\n├── pnpm-workspace.yaml\n└── tsconfig.json\n",[424],{"type":14,"tag":90,"props":425,"children":426},{"__ignoreMap":8},[427],{"type":24,"value":422},{"type":14,"tag":95,"props":429,"children":430},{"v-slot:title":8},[431],{"type":14,"tag":99,"props":432,"children":434},{":level":101,"label":433,"prefix":103},"Download the source code",[],{"type":14,"tag":95,"props":436,"children":437},{"v-slot:description":8},[438],{"type":14,"tag":20,"props":439,"children":440},{},[441],{"type":24,"value":442},"Either from themeforest.net, cssninja.io or clone the repository from Github. The project structure should look like this:",{"type":14,"tag":72,"props":444,"children":445},{":vertical":74,"vertical":8},[446,461,468],{"type":14,"tag":77,"props":447,"children":448},{},[449],{"type":14,"tag":81,"props":450,"children":456},{"className":451,"code":453,"filename":454,"language":455,"meta":8},[452],"language-json","{\n  // \"extends\": \"./.demo/.nuxt/tsconfig.json\"\n  \"extends\": \"./.app/.nuxt/tsconfig.json\"\n}\n","tsconfig.json","json",[457],{"type":14,"tag":90,"props":458,"children":459},{"__ignoreMap":8},[460],{"type":24,"value":453},{"type":14,"tag":95,"props":462,"children":463},{"v-slot:title":8},[464],{"type":14,"tag":99,"props":465,"children":467},{":level":101,"label":466,"prefix":103},"Update the tsconfig",[],{"type":14,"tag":95,"props":469,"children":470},{"v-slot:description":8},[471],{"type":14,"tag":20,"props":472,"children":473},{},[474,476,481,483,489,491,497],{"type":24,"value":475},"By default, the ",{"type":14,"tag":90,"props":477,"children":479},{"className":478},[],[480],{"type":24,"value":454},{"type":24,"value":482}," file is set to extend the ",{"type":14,"tag":90,"props":484,"children":486},{"className":485},[],[487],{"type":24,"value":488},".demo",{"type":24,"value":490}," folder. Update it to extend the ",{"type":14,"tag":90,"props":492,"children":494},{"className":493},[],[495],{"type":24,"value":496},".app",{"type":24,"value":498}," folder. If you are starting from the demo, you can keep it as is.",{"type":14,"tag":72,"props":500,"children":501},{":vertical":74,"vertical":8},[502,514,530,537],{"type":14,"tag":77,"props":503,"children":504},{},[505],{"type":14,"tag":81,"props":506,"children":509},{"className":507,"code":508,"filename":86,"language":87,"meta":8},[84],"pnpm install\n",[510],{"type":14,"tag":90,"props":511,"children":512},{"__ignoreMap":8},[513],{"type":24,"value":508},{"type":14,"tag":35,"props":515,"children":517},{"color":37,"icon":38,"className":516},[241],[518],{"type":14,"tag":20,"props":519,"children":520},{},[521,523,529],{"type":24,"value":522},"Read more about ",{"type":14,"tag":46,"props":524,"children":526},{"href":525},"/documentation/guides/pnpm-workspace",[527],{"type":24,"value":528},"pnpm and workspace",{"type":24,"value":64},{"type":14,"tag":95,"props":531,"children":532},{"v-slot:title":8},[533],{"type":14,"tag":99,"props":534,"children":536},{":level":101,"label":535,"prefix":103},"Install dependencies with pnpm",[],{"type":14,"tag":95,"props":538,"children":539},{"v-slot:description":8},[540],{"type":14,"tag":20,"props":541,"children":542},{},[543,545,550,552,558],{"type":24,"value":544},"When using Tairo from source, ",{"type":14,"tag":27,"props":546,"children":547},{},[548],{"type":24,"value":549},"pnpm is required",{"type":24,"value":551}," in order to work. This is because we rely on the ",{"type":14,"tag":90,"props":553,"children":555},{"className":554},[],[556],{"type":24,"value":557},"pnpm-workspace.yaml",{"type":24,"value":559}," to manage the dependencies between layers.",{"type":14,"tag":72,"props":561,"children":562},{":vertical":74,"vertical":8},[563,575,595,601],{"type":14,"tag":77,"props":564,"children":565},{},[566],{"type":14,"tag":81,"props":567,"children":570},{"className":568,"code":569,"filename":86,"language":87,"meta":8},[84],"pnpm --filter=app dev\n",[571],{"type":14,"tag":90,"props":572,"children":573},{"__ignoreMap":8},[574],{"type":24,"value":569},{"type":14,"tag":35,"props":576,"children":578},{"color":37,"icon":38,"className":577},[241],[579],{"type":14,"tag":20,"props":580,"children":581},{},[582,583,588,589,594],{"type":24,"value":247},{"type":14,"tag":90,"props":584,"children":586},{"className":585},[],[587],{"type":24,"value":253},{"type":24,"value":255},{"type":14,"tag":90,"props":590,"children":592},{"className":591},[],[593],{"type":24,"value":261},{"type":24,"value":263},{"type":14,"tag":95,"props":596,"children":597},{"v-slot:title":8},[598],{"type":14,"tag":99,"props":599,"children":600},{":level":101,"label":269,"prefix":103},[],{"type":14,"tag":95,"props":602,"children":603},{"v-slot:description":8},[604],{"type":14,"tag":20,"props":605,"children":606},{},[607,609,615],{"type":24,"value":608},"Start nuxt from the ",{"type":14,"tag":90,"props":610,"children":612},{"className":611},[],[613],{"type":24,"value":614},"\u003Capp>/",{"type":24,"value":616}," folder and open the frontend in your browser.",{"type":14,"tag":72,"props":618,"children":619},{":vertical":74,"vertical":8},[620,626],{"type":14,"tag":95,"props":621,"children":622},{"v-slot:title":8},[623],{"type":14,"tag":99,"props":624,"children":625},{":level":101,"label":287,"prefix":103},[],{"type":14,"tag":95,"props":627,"children":628},{"v-slot:description":8},[629],{"type":14,"tag":20,"props":630,"children":631},{},[632,633,637,638,641,644,645,650,652,657],{"type":24,"value":296},{"type":14,"tag":46,"props":634,"children":635},{"href":299},[636],{"type":24,"value":302},{"type":24,"value":304},{"type":14,"tag":306,"props":639,"children":640},{},[],{"type":14,"tag":306,"props":642,"children":643},{},[],{"type":24,"value":313},{"type":14,"tag":90,"props":646,"children":648},{"className":647},[],[649],{"type":24,"value":319},{"type":24,"value":651}," in paths refers to the ",{"type":14,"tag":90,"props":653,"children":655},{"className":654},[],[656],{"type":24,"value":614},{"type":24,"value":658}," folder.",{"type":14,"tag":15,"props":660,"children":662},{"title":661},"Demo app overview",[663,668,675,680,692,727,732,752,764],{"type":14,"tag":20,"props":664,"children":665},{},[666],{"type":24,"value":667},"The demo app is a separate app layer. It's a good starting point to see how Tairo is used to build a dashboard application.",{"type":14,"tag":669,"props":670,"children":674},"doc-heading",{"className":671,"label":673},[672],"mb-4","Demo project structure",[],{"type":14,"tag":20,"props":676,"children":677},{},[678],{"type":24,"value":679},"The Tairo demo is split into different nuxt layers. This allow to separate the marketing part from the documentation part, and to enable or disable features easily.",{"type":14,"tag":77,"props":681,"children":682},{},[683],{"type":14,"tag":81,"props":684,"children":687},{"className":685,"code":686,"filename":86,"language":87,"meta":8},[84],"├── .demo/ # This is the entry point of the demo (demo app layer)\n├── layers/\n│   ├── documentation/ # Contains nuxt/content related features\n│   └── landing/ # Contains marketing related features\n",[688],{"type":14,"tag":90,"props":689,"children":690},{"__ignoreMap":8},[691],{"type":24,"value":686},{"type":14,"tag":20,"props":693,"children":694},{},[695,697,700,702,708,710,716,718,725],{"type":24,"value":696},"By default, documentation layer is disabled.",{"type":14,"tag":306,"props":698,"children":699},{},[],{"type":24,"value":701},"\nYou can set the ",{"type":14,"tag":90,"props":703,"children":705},{"className":704},[],[706],{"type":24,"value":707},"ENABLE_DOCUMENTATION=true",{"type":24,"value":709}," environment variable in the ",{"type":14,"tag":90,"props":711,"children":713},{"className":712},[],[714],{"type":24,"value":715},".demo/.env",{"type":24,"value":717}," file to enable it before starting the demo server. This will  generate the components documentation from the source code (via ",{"type":14,"tag":46,"props":719,"children":722},{"href":720,"rel":721},"https://github.com/nuxtlabs/nuxt-component-meta",[50],[723],{"type":24,"value":724},"nuxt-component-meta",{"type":24,"value":726},"). Note that this feature is heavy, requires more memory and can slow down the development server.",{"type":14,"tag":669,"props":728,"children":731},{"className":729,"label":730},[672],"Start the demo development server",[],{"type":14,"tag":20,"props":733,"children":734},{},[735,737,743,745,750],{"type":24,"value":736},"To start the project from the ",{"type":14,"tag":90,"props":738,"children":740},{"className":739},[],[741],{"type":24,"value":742},".demo/",{"type":24,"value":744}," instead of the ",{"type":14,"tag":90,"props":746,"children":748},{"className":747},[],[749],{"type":24,"value":614},{"type":24,"value":751}," folder, run this command:",{"type":14,"tag":77,"props":753,"children":754},{},[755],{"type":14,"tag":81,"props":756,"children":759},{"className":757,"code":758,"filename":86,"language":87,"meta":8},[84],"pnpm --filter=demo dev\n",[760],{"type":14,"tag":90,"props":761,"children":762},{"__ignoreMap":8},[763],{"type":24,"value":758},{"type":14,"tag":35,"props":765,"children":767},{"color":37,"icon":766},"lucide:info",[768],{"type":14,"tag":20,"props":769,"children":770},{},[771,773,778,780,785],{"type":24,"value":772},"Don't forget to update the ",{"type":14,"tag":90,"props":774,"children":776},{"className":775},[],[777],{"type":24,"value":454},{"type":24,"value":779}," to extend the ",{"type":14,"tag":90,"props":781,"children":783},{"className":782},[],[784],{"type":24,"value":488},{"type":24,"value":658},{"type":14,"tag":787,"props":788,"children":790},"doc-nav",{"next":299,"prev":789},"/documentation/setup/nuxt-layers-and-tairo",[],{"title":8,"searchDepth":792,"depth":792,"links":793},2,[],"markdown","content:documentation:10.setup:3.installation.md","content","documentation/10.setup/3.installation.md","md",[800,806,813],{"_path":801,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":802,"description":8,"toc":803,"_type":794,"_id":804,"_source":796,"_file":805,"_extension":798},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":807,"_dir":6,"_draft":7,"_partial":803,"_locale":8,"title":808,"_id":809,"_type":810,"_source":796,"_file":811,"_extension":812},"/documentation/setup/_dir","Setup","content:documentation:10.setup:_dir.yml","yaml","documentation/10.setup/_dir.yml","yml",{"_path":814,"_dir":815,"_draft":7,"_partial":7,"_locale":8,"title":816,"description":8,"_type":794,"_id":817,"_source":796,"_file":818,"_extension":798},"/documentation/setup","documentation","Prerequisites","content:documentation:10.setup:1.index.md","documentation/10.setup/1.index.md",[820,822],{"_path":789,"title":821},"Nuxt, Layers, and Tairo",{"_path":299,"title":823},"Add a layout",1779173509059]