[{"data":1,"prerenderedAt":300},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":275,"doc-page-nav":295},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":270,"_id":271,"_source":272,"_file":273,"_extension":274},"/documentation/setup/first-page","setup",false,"","Your first page",{"type":11,"children":12,"toc":267},"root",[13,261],{"type":14,"tag":15,"props":16,"children":18},"element","doc-component-demo",{"title":17},"Let's write your first page",[19,26,57,69,86,91,106,112,141,184,229,233,238],{"type":14,"tag":20,"props":21,"children":22},"p",{},[23],{"type":24,"value":25},"text","Now that you have your project set up, it's time to create your first page.",{"type":14,"tag":20,"props":27,"children":28},{},[29,31,38,40,44,46,55],{"type":24,"value":30},"The pages in a Nuxt application are located in the ",{"type":14,"tag":32,"props":33,"children":35},"code",{"className":34},[],[36],{"type":24,"value":37},"\u003Capp>/pages/",{"type":24,"value":39}," directory. Each file in this directory corresponds to a route in your application, you can create nested directories to create nested routes.",{"type":14,"tag":41,"props":42,"children":43},"br",{},[],{"type":24,"value":45},"\nFiles can also be named with square brackets to create dynamic routes, everything is well detailed in the ",{"type":14,"tag":47,"props":48,"children":52},"a",{"href":49,"rel":50},"https://nuxt.com/docs/getting-started/routing",[51],"nofollow",[53],{"type":24,"value":54},"Routing documentation on nuxt.com",{"type":24,"value":56},".",{"type":14,"tag":20,"props":58,"children":59},{},[60,62,67],{"type":24,"value":61},"This is a basic example of directory structure for your ",{"type":14,"tag":32,"props":63,"children":65},{"className":64},[],[66],{"type":24,"value":37},{"type":24,"value":68}," directory:",{"type":14,"tag":70,"props":71,"children":72},"code-group",{},[73],{"type":14,"tag":74,"props":75,"children":81},"pre",{"className":76,"code":78,"filename":79,"language":80,"meta":8},[77],"language-bash","├── \u003Capp>/\n│   ├── pages/\n│   │   ├── app/\n│   │   │   ├── posts/\n│   │   │   │   ├── [id]/ # contains dynamic parameter\n│   │   │   │   │   ├── edit.vue # /app/posts/1/edit\n│   │   │   │   │   └── index.vue # /app/posts/1\n│   │   │   │   ├── create.vue # /app/posts/create\n│   │   │   │   └── index.vue # /app/posts\n│   │   │   └── index.vue # /app\n│   │   ├── app.vue # custom layout wrapper for the app/ directory\n│   │   ├── login.vue # /login \n│   │   └── index.vue # /\n","Terminal","bash",[82],{"type":14,"tag":32,"props":83,"children":84},{"__ignoreMap":8},[85],{"type":24,"value":78},{"type":14,"tag":87,"props":88,"children":90},"doc-heading",{"label":89},"Basic page structure",[],{"type":14,"tag":70,"props":92,"children":93},{},[94],{"type":14,"tag":74,"props":95,"children":101},{"className":96,"code":98,"filename":99,"language":100,"meta":8},[97],"language-vue","\u003Cscript setup lang=\"ts\">\n// meta information can be added to the head\nuseHead({\n  title: 'My first page',\n  meta: [\n    { name: 'description', content: 'My amazing dashboard.' }\n  ],\n})\n\n// here you can define your page logic\nconst message = ref('Hello Tairo')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CBaseInput v-model=\"message\" />\n  \u003C/div>\n\u003C/template>\n","\u003Capp>/pages/index.vue","vue",[102],{"type":14,"tag":32,"props":103,"children":104},{"__ignoreMap":8},[105],{"type":24,"value":98},{"type":14,"tag":87,"props":107,"children":111},{"label":108,"className":109},"Discover components",[110],"mb-4",[],{"type":14,"tag":113,"props":114,"children":119},"doc-message",{"className":115,"color":117,"icon":118},[116],"my-4","muted-contrast","ph:info",[120],{"type":14,"tag":20,"props":121,"children":122},{},[123,125,131,133,139],{"type":24,"value":124},"Use the quick search to find the component you need, try it now with ",{"type":14,"tag":32,"props":126,"children":128},{"className":127},[],[129],{"type":24,"value":130},"ctrl+k",{"type":24,"value":132}," (or ",{"type":14,"tag":32,"props":134,"children":136},{"className":135},[],[137],{"type":24,"value":138},"⌘+k",{"type":24,"value":140}," on mac).",{"type":14,"tag":20,"props":142,"children":143},{},[144,146,152,154,160,162,168,169,175,177,183],{"type":24,"value":145},"Take a look at the ",{"type":14,"tag":32,"props":147,"children":149},{"className":148},[],[150],{"type":24,"value":151},".demo/pages/",{"type":24,"value":153}," folder to see how to assemble your page. You will see that most pages are built with reusable components,\nsome are prefixed by ",{"type":14,"tag":32,"props":155,"children":157},{"className":156},[],[158],{"type":24,"value":159},"Base",{"type":24,"value":161},", ",{"type":14,"tag":32,"props":163,"children":165},{"className":164},[],[166],{"type":24,"value":167},"Tairo",{"type":24,"value":161},{"type":14,"tag":32,"props":170,"children":172},{"className":171},[],[173],{"type":24,"value":174},"Demo",{"type":24,"value":176}," and a few with ",{"type":14,"tag":32,"props":178,"children":180},{"className":179},[],[181],{"type":24,"value":182},"Addon",{"type":24,"value":56},{"type":14,"tag":185,"props":186,"children":187},"ul",{},[188,199,209,219],{"type":14,"tag":189,"props":190,"children":191},"li",{},[192,197],{"type":14,"tag":32,"props":193,"children":195},{"className":194},[],[196],{"type":24,"value":159},{"type":24,"value":198}," prefix is used for Shuriken UI components, sometimes known as atoms, like buttons, inputs, etc... Ready to use base components.",{"type":14,"tag":189,"props":200,"children":201},{},[202,207],{"type":14,"tag":32,"props":203,"children":205},{"className":204},[],[206],{"type":24,"value":167},{"type":24,"value":208}," prefix is used for components that are specific to the project layouts, or reusable components that have no dependencies. Ready to use component Tairo components or components that are specific to a layout (like the sidebar, collapse, etc...).",{"type":14,"tag":189,"props":210,"children":211},{},[212,217],{"type":14,"tag":32,"props":213,"children":215},{"className":214},[],[216],{"type":24,"value":182},{"type":24,"value":218}," prefix is for components that have external dependencies, like the markdown editor, charts, etc... Components that have external dependencies, you may need to install additional packages and copy them in your project.",{"type":14,"tag":189,"props":220,"children":221},{},[222,227],{"type":14,"tag":32,"props":223,"children":225},{"className":224},[],[226],{"type":24,"value":174},{"type":24,"value":228}," prefix is used for components that are specific to the demo, like the quick search, widgets, etc... Examples components that are specific to the demo. You can use them as inspiration for your own components.",{"type":14,"tag":230,"props":231,"children":232},"hr",{},[],{"type":14,"tag":20,"props":234,"children":235},{},[236],{"type":24,"value":237},"Useful resources:",{"type":14,"tag":185,"props":239,"children":240},{},[241,251],{"type":14,"tag":189,"props":242,"children":243},{},[244],{"type":14,"tag":47,"props":245,"children":248},{"href":246,"rel":247},"https://nuxt.com/docs/guide/directory-structure/pages",[51],[249],{"type":24,"value":250},"Learn about pages directory on nuxt.com",{"type":14,"tag":189,"props":252,"children":253},{},[254],{"type":14,"tag":47,"props":255,"children":258},{"href":256,"rel":257},"https://vuejs.org/guide/essentials/template-syntax.html",[51],[259],{"type":24,"value":260},"Learn template syntax on vuejs.org",{"type":14,"tag":262,"props":263,"children":266},"doc-nav",{"next":264,"prev":265},"/documentation/setup/first-api-route","/documentation/setup/add-a-layout",[],{"title":8,"searchDepth":268,"depth":268,"links":269},2,[],"markdown","content:documentation:10.setup:5.first-page.md","content","documentation/10.setup/5.first-page.md","md",[276,282,289],{"_path":277,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":278,"description":8,"toc":279,"_type":270,"_id":280,"_source":272,"_file":281,"_extension":274},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":283,"_dir":6,"_draft":7,"_partial":279,"_locale":8,"title":284,"_id":285,"_type":286,"_source":272,"_file":287,"_extension":288},"/documentation/setup/_dir","Setup","content:documentation:10.setup:_dir.yml","yaml","documentation/10.setup/_dir.yml","yml",{"_path":290,"_dir":291,"_draft":7,"_partial":7,"_locale":8,"title":292,"description":8,"_type":270,"_id":293,"_source":272,"_file":294,"_extension":274},"/documentation/setup","documentation","Prerequisites","content:documentation:10.setup:1.index.md","documentation/10.setup/1.index.md",[296,298],{"_path":265,"title":297},"Add a layout",{"_path":264,"title":299},"Your first API route",1779173531196]