\n \u003CNuxtLoadingIndicator color=\"var(--color-primary-500)\" />\n\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/BaseProvider>\n\u003C/template> Useful resources: How Views works on nuxt.comapp.vue on nuxt.com",{"id":223,"title":224,"titles":225,"content":226,"level":16},"/documentation/setup/main-files#create-the-errorvue","Create the error.vue",[211],"This file is used in case of an error in your application, like a 404 error. This prevents the user from seeing the default Nuxt error page. Tairo provides a TairoError component that you can use to display a custom error page. \u003Cscript setup lang=\"ts\">\nimport type { NuxtError } from '#app'\n\nconst props = defineProps\u003C{\n error: NuxtError\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CTairoError :error=\"props.error\" />\n \u003C/div>\n\u003C/template> Useful resources: Error Page on nuxt.comerror.vue on nuxt.com html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":228,"title":229,"titles":230,"content":231,"level":10},"/documentation/setup/add-a-layout","Build your layout",[],"Layouts define the navigation and structure of your application.",{"id":233,"title":229,"titles":234,"content":231,"level":10},"/documentation/setup/add-a-layout#build-your-layout",[],{"id":236,"title":103,"titles":237,"content":238,"level":16},"/documentation/setup/add-a-layout#overview",[229],"A layout is a wrapper component that surrounds your page content. It can be used to define a common structure for your pages. To create a layout, you need to create a new file in the \u003Capp>/app/layouts/ directory. The name of the file should be the name of the layout, with special case for the default layout that should be named default.vue. Tairo provide a set of components that can be used to create your own layout that fits your project requirements.",{"id":240,"title":241,"titles":242,"content":243,"level":45},"/documentation/setup/add-a-layout#choose-a-layout-to-start-with","Choose a layout to start with",[229,103],"TairoSidenavTairoSidebarTairoCollapseTairoTopnav",{"id":245,"title":246,"titles":247,"content":248,"level":16},"/documentation/setup/add-a-layout#sidenav-layout-example","Sidenav layout example",[229],"Let's create a new layout using the TairoSidenav* components. This allow you to create a sidebar navigation experience by combining the all the components together. You will be able to add your own logic to the layout, depending on what you need (ex: show items for only logged users, translate items, etc...). \u003Ctemplate>\n \u003CTairSidenavLayout>\n \u003C!-- Navigation -->\n \u003CTairoSidenavSidebar>\n \u003CTairoSidenavSidebarHeader>\n \u003CNuxtLink to=\"/\">\n My App\n \u003C/NuxtLink>\n \u003C/TairoSidenavSidebarHeader>\n\n \u003CTairoSidenavSidebarLinks class=\"p-4\">\n \u003CTairoSidenavSidebarLink\n to=\"/\"\n label=\"Home\"\n icon=\"solar:bolt-linear\"\n />\n \u003C/TairoSidenavSidebarLinks>\n \u003C/TairoSidenavSidebar>\n\n \u003C!-- Page wrapper -->\n \u003CTairSidenavLayoutContent>\n \u003Cslot />\n \u003C/TairSidenavLayoutContent>\n \u003C/TairSidenavLayout>\n\u003C/template> Useful resources: Learn about layouts directory on nuxt.com html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}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);}",{"id":250,"title":251,"titles":252,"content":9,"level":10},"/documentation/setup/first-page","Your first page",[],{"id":254,"title":251,"titles":255,"content":9,"level":10},"/documentation/setup/first-page#your-first-page",[],{"id":257,"title":103,"titles":258,"content":259,"level":16},"/documentation/setup/first-page#overview",[251],"The pages in a Nuxt application are located in the \u003Capp>/app/pages/ directory. Each file in this directory corresponds to a route in your application, you can create nested directories to create nested routes. Files can also be named with square brackets to create dynamic routes, everything is well detailed in the routing documentation on nuxt.com. This is a basic example of directory structure for your \u003Capp>/app/pages/ directory: pages/\n├── app/\n│ ├── posts/\n│ │ ├── [id]/ # contains dynamic parameter named \"id\"\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 # /",{"id":261,"title":262,"titles":263,"content":264,"level":16},"/documentation/setup/first-page#lets-write-your-first-page","Let's write your first page",[251],"Now that you have your project set up, it's time to create your first page. We can define custom meta information for the page using the useHead function, and define the page logic using the \u003Cscript setup> tag. \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> Useful resources: Learn about pages directory on nuxt.com html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":266,"title":267,"titles":268,"content":9,"level":10},"/documentation/setup/first-api-route","Your first API route",[],{"id":270,"title":267,"titles":271,"content":9,"level":10},"/documentation/setup/first-api-route#your-first-api-route",[],{"id":273,"title":103,"titles":274,"content":275,"level":16},"/documentation/setup/first-api-route#overview",[267],"Nuxt has built-in support to create server endpoints. You can use it to fetch your data from your database, request other API, return static content, think like express.js with super powers, thanks to Nitro and H3 ecosystem. This is a basic example of directory structure for your \u003Capp>/server/ directory: server/\n├── api/\n│ └── hello.ts # /api/hello\n├── routes/\n│ └── sitemap.xml.ts # /sitemap.xml\n├── plugins/ # nitro plugins\n├── tasks/ # nitro tasks\n├── middleware/ # nitro middlewares\n├── utils/ # server only utils\n└── tsconfig.json # server only tsconfig",{"id":277,"title":278,"titles":279,"content":280,"level":16},"/documentation/setup/first-api-route#hello-world-route","Hello world route",[267],"We will create a /api/hello route that will return a greeting message. export default defineEventHandler((event) => {\n // extract the \"from\" query parameter\n const from = getQuery(event)?.from || 'tairo'\n\n return `Hello ${from}!`\n}) You can test your API route by visiting http://localhost:3000/api/hello?from=world in your browser, or by using curl in your terminal: curl -i http://localhost:3000/api/hello?from=world\n\n# HTTP/1.1 200 OK\n# content-type: text/html\n# date: Wed, 12 Mar 2025 16:31:06 GMT\n# connection: close\n# content-length: 12\n#\n# Hello world! Useful resources: Learn about server directory on nuxt.comLearn server routing on nitro.buildLearn server utils on nitro.build",{"id":282,"title":283,"titles":284,"content":285,"level":16},"/documentation/setup/first-api-route#connect-your-data","Connect your data",[267],"Now that you have a page and an API route, you can connect them together. We will request the hello API route from the page created in the previous section and display the result. \u003Cscript setup lang=\"ts\">\n// definePageMeta ...\n\n// create a reactive input value\nconst input = ref('')\n\n// create a computed object that will be updated\n// every time the input value changes\nconst query = computed(() => ({ from: input.value }))\n\n// call our API route, it will be re-fetched\n// every time the query object changes\n// note that data type is detected automatically!\nconst { data } = useFetch('/api/hello', {\n query,\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-lg\">\n \u003CBaseCard class=\"p-6\">\n \u003C!-- reactive input -->\n \u003CBaseField label=\"Your name\">\n \u003CBaseInput v-model=\"input\" />\n \u003C/BaseField>\n\n \u003C!-- display the result -->\n \u003CBaseParagraph class=\"mt-4 line-clamp-1 max-w-sm\">\n {{ data }}\n \u003C/BaseParagraph>\n \u003C/BaseCard>\n \u003C/div>\n\u003C/template> You may also want to take a look at how we do form validation and explore form pages from the demo to learn more about how to build forms with Tairo. Useful resources: Read data fetching guide on nuxt.com html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"id":287,"title":288,"titles":289,"content":9,"level":10},"/documentation/setup/configuration","Configuration",[],{"id":291,"title":292,"titles":293,"content":9,"level":10},"/documentation/setup/configuration#nuxt-configuration","Nuxt configuration",[],{"id":295,"title":296,"titles":297,"content":298,"level":16},"/documentation/setup/configuration#nuxtconfigjs","nuxt.config.js",[292],"A Nuxt application is configured through the nuxt.config.ts file. In this file, we can setup core features of nuxt, enable modules, configure them, extend from other layers, and more. This is an overview of the nuxt configuration file. It's used to change the way nuxt works (disable server-side rendering, change the build directory, etc, apply cache rules to specific routes, ...) export default defineNuxtConfig({\n extends: [\n // register layers\n ],\n modules: [\n // register modules\n ],\n\n // rest of your nuxt config ...\n})",{"id":300,"title":301,"titles":302,"content":303,"level":16},"/documentation/setup/configuration#runtime-config","Runtime config",[292],"Everything defined in the \u003Capp>/nuxt.config.ts file is not exposed in either the client or the server. To expose a variable to the client, you need to use the runtimeConfig property. This property is used to expose variables to the client, and to the server. 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}) The runtime config can then be accessed in the server using the useRuntimeConfig nuxt composable: export default defineEventHandler((event) => {\n const config = useRuntimeConfig()\n // config.secretKey\n // config.public.mapboxToken\n}) And in the client using same composable, note that you only have access to the public variables: \u003Cscript setup lang=\"ts\">\nconst config = useRuntimeConfig()\n// config.public.mapboxToken\n\u003C/script>",{"id":305,"title":306,"titles":307,"content":308,"level":16},"/documentation/setup/configuration#environment-variables","Environment variables",[292],"When using the runtimeConfig property, you can use environment variables to define their value. This is useful when you want to use different values for different environments. Like seen in the previous example, you can define the NUXT_SECRET_KEY and NUXT_PUBLIC_MAPBOX_TOKEN value using an environment variable. During development, or at build time, you can use .env files to define environment variables. These files are located at the root of your project and are named .env and .env.local. Note that when running the production build, no .env file is used. Useful resources: Read configuration guide on nuxt.comConfiguration reference on nuxt.com html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"id":310,"title":311,"titles":312,"content":9,"level":10},"/documentation/layouts/collapse","Collapse",[],{"id":314,"title":315,"titles":316,"content":317,"level":10},"/documentation/layouts/collapse#collapse-layout","Collapse layout",[],"Preview",{"id":319,"title":103,"titles":320,"content":321,"level":16},"/documentation/layouts/collapse#overview",[315],"The collapse layout is a sidebar layout that can be collapsed or expanded. It is useful for applications that need to display a lot of information in a small space.",{"id":323,"title":108,"titles":324,"content":9,"level":45},"/documentation/layouts/collapse#features",[315,103],{"id":326,"title":327,"titles":328,"content":329,"level":16},"/documentation/layouts/collapse#anatomy","Anatomy",[315],"\u003Ctemplate>\n \u003CTairoCollapseLayout>\n \u003CTairoCollapseSidebar>\n \u003CTairoCollapseSidebarHeader />\n \u003CTairoCollapseSidebarClose />\n \u003CTairoCollapseSidebarLinks>\n \u003CTairoCollapseSidebarLink />\n\n \u003CTairoCollapseCollapsible>\n \u003Ctemplate #trigger>\n \u003CTairoCollapseCollapsibleTrigger />\n \u003C/template>\n\n \u003CTairoCollapseCollapsibleLink />\n \u003C/TairoCollapseCollapsible>\n \u003C/TairoCollapseSidebarLinks>\n \u003C/TairoCollapseSidebar>\n\n \u003CTairoCollapseContent>\n \u003Cslot />\n \u003C/TairoCollapseContent>\n \u003C/TairoCollapseLayout>\n\u003C/template> @theme {\n --tairo-collapse-width-open: 17rem;\n --tairo-collapse-width-collapsed: 5rem;\n}",{"id":331,"title":332,"titles":333,"content":9,"level":16},"/documentation/layouts/collapse#components","Components",[315],{"id":335,"title":336,"titles":337,"content":9,"level":45},"/documentation/layouts/collapse#tairocollapselayout","TairoCollapseLayout",[315,332],{"id":339,"title":340,"titles":341,"content":9,"level":45},"/documentation/layouts/collapse#tairocollapsesidebar","TairoCollapseSidebar",[315,332],{"id":343,"title":344,"titles":345,"content":9,"level":45},"/documentation/layouts/collapse#tairocollapsesidebarheader","TairoCollapseSidebarHeader",[315,332],{"id":347,"title":348,"titles":349,"content":9,"level":45},"/documentation/layouts/collapse#tairocollapsesidebarclose","TairoCollapseSidebarClose",[315,332],{"id":351,"title":352,"titles":353,"content":9,"level":45},"/documentation/layouts/collapse#tairocollapsesidebarlinks","TairoCollapseSidebarLinks",[315,332],{"id":355,"title":356,"titles":357,"content":9,"level":45},"/documentation/layouts/collapse#tairocollapsesidebarlink","TairoCollapseSidebarLink",[315,332],{"id":359,"title":360,"titles":361,"content":9,"level":45},"/documentation/layouts/collapse#tairocollapsecollapsible","TairoCollapseCollapsible",[315,332],{"id":363,"title":364,"titles":365,"content":9,"level":45},"/documentation/layouts/collapse#tairocollapsecollapsibletrigger","TairoCollapseCollapsibleTrigger",[315,332],{"id":367,"title":368,"titles":369,"content":9,"level":45},"/documentation/layouts/collapse#tairocollapsecollapsiblelink","TairoCollapseCollapsibleLink",[315,332],{"id":371,"title":372,"titles":373,"content":374,"level":45},"/documentation/layouts/collapse#tairocollapsecontent","TairoCollapseContent",[315,332],"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"id":376,"title":377,"titles":378,"content":9,"level":10},"/documentation/layouts/sidebar","Sidebar",[],{"id":380,"title":381,"titles":382,"content":317,"level":10},"/documentation/layouts/sidebar#sidebar-layout","Sidebar layout",[],{"id":384,"title":103,"titles":385,"content":386,"level":16},"/documentation/layouts/sidebar#overview",[381],"The sidebar layout is a double sided navigation layout. It has a sidebar with a list of items that can either be links or buttons, and customizable subsidebars that can be toggled based on the active item.",{"id":388,"title":108,"titles":389,"content":9,"level":45},"/documentation/layouts/sidebar#features",[381,103],{"id":391,"title":327,"titles":392,"content":393,"level":16},"/documentation/layouts/sidebar#anatomy",[381],"\u003Ctemplate>\n \u003CTairoSidebarLayout>\n \u003CTairoSidebarNav>\n \u003CTairoSidebar>\n \u003CTairoSidebarLinks>\n \u003CTairoSidebarTrigger />\n \u003C/TairoSidebarLinks>\n \u003C/TairoSidebar>\n\n \u003CTairoSidebarSubsidebar>\n \u003CTairoSidebarSubsidebarHeader />\n\n \u003CTairoSidebarSubsidebarContent>\n \u003CTairoSidebarSubsidebarLink />\n \u003CTairoSidebarSubsidebarCollapsible>\n \u003Ctemplate #trigger>\n \u003CTairoSidebarSubsidebarCollapsibleTrigger />\n \u003C/template>\n\n \u003CTairoSidebarSubsidebarCollapsibleLink />\n \u003C/TairoSidebarSubsidebarCollapsible>\n \u003C/TairoSidebarSubsidebarContent>\n \u003C/TairoSidebarSubsidebar>\n \u003C/TairoSidebarNav>\n\n \u003CTairoSidebarContent>\n \u003Cslot />\n \u003C/TairoSidebarContent>\n \u003C/TairoSidebarLayout>\n\u003C/template> @theme {\n --tairo-sidebar-icon-width: 3.5rem;\n --tairo-sidebar-subsidebar-width: 15rem;\n}",{"id":395,"title":332,"titles":396,"content":9,"level":16},"/documentation/layouts/sidebar#components",[381],{"id":398,"title":399,"titles":400,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebar","TairoSidebar",[381,332],{"id":402,"title":403,"titles":404,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarbackdrop","TairoSidebarBackdrop",[381,332],{"id":406,"title":407,"titles":408,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarlayout","TairoSidebarLayout",[381,332],{"id":410,"title":411,"titles":412,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarcontent","TairoSidebarContent",[381,332],{"id":414,"title":415,"titles":416,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarnav","TairoSidebarNav",[381,332],{"id":418,"title":419,"titles":420,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarlinks","TairoSidebarLinks",[381,332],{"id":422,"title":423,"titles":424,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarlink","TairoSidebarLink",[381,332],{"id":426,"title":427,"titles":428,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebartrigger","TairoSidebarTrigger",[381,332],{"id":430,"title":431,"titles":432,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarsubsidebar","TairoSidebarSubsidebar",[381,332],{"id":434,"title":435,"titles":436,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarsubsidebarheader","TairoSidebarSubsidebarHeader",[381,332],{"id":438,"title":439,"titles":440,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarsubsidebarlink","TairoSidebarSubsidebarLink",[381,332],{"id":442,"title":443,"titles":444,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarsubsidebarcollapsible","TairoSidebarSubsidebarCollapsible",[381,332],{"id":446,"title":447,"titles":448,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarsubsidebarcollapsiblelink","TairoSidebarSubsidebarCollapsibleLink",[381,332],{"id":450,"title":451,"titles":452,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarsubsidebarcollapsibletrigger","TairoSidebarSubsidebarCollapsibleTrigger",[381,332],{"id":454,"title":455,"titles":456,"content":9,"level":45},"/documentation/layouts/sidebar#tairosidebarsubsidebarcontent","TairoSidebarSubsidebarContent",[381,332],{"id":458,"title":435,"titles":459,"content":374,"level":45},"/documentation/layouts/sidebar#tairosidebarsubsidebarheader-1",[381,332],{"id":461,"title":462,"titles":463,"content":9,"level":10},"/documentation/layouts/sidenav","Sidenav",[],{"id":465,"title":466,"titles":467,"content":317,"level":10},"/documentation/layouts/sidenav#sidenav-layout","Sidenav layout",[],{"id":469,"title":103,"titles":470,"content":471,"level":16},"/documentation/layouts/sidenav#overview",[466],"The sidenav layout is a single sided navigation layout. It has a sidebar with a list of items that can either be links or buttons, that can be arranged in a collapsible manner.",{"id":473,"title":108,"titles":474,"content":9,"level":45},"/documentation/layouts/sidenav#features",[466,103],{"id":476,"title":327,"titles":477,"content":478,"level":16},"/documentation/layouts/sidenav#anatomy",[466],"\u003Ctemplate>\n \u003CTairoSidenavLayout>\n \u003CTairoSidenavSidebar>\n \u003CTairoSidenavSidebarHeader />\n \u003CTairoSidenavSidebarDivider />\n \u003CTairoSidenavSidebarLinks>\n \u003CTairoSidenavSidebarLink />\n \u003C/TairoSidenavSidebarLinks>\n \u003C/TairoSidenavSidebar>\n\n \u003CTairoSidenavContent>\n \u003Cslot />\n \u003C/TairoSidenavContent>\n \u003C/TairoSidenavLayout>\n\u003C/template> @theme {\n --tairo-sidenav-sidebar-width: 16.25rem;\n}",{"id":480,"title":332,"titles":481,"content":9,"level":16},"/documentation/layouts/sidenav#components",[466],{"id":483,"title":484,"titles":485,"content":9,"level":45},"/documentation/layouts/sidenav#tairosidenavlayout","TairoSidenavLayout",[466,332],{"id":487,"title":488,"titles":489,"content":9,"level":45},"/documentation/layouts/sidenav#tairosidenavcollapsible","TairoSidenavCollapsible",[466,332],{"id":491,"title":492,"titles":493,"content":9,"level":45},"/documentation/layouts/sidenav#tairosidenavcollapsiblelink","TairoSidenavCollapsibleLink",[466,332],{"id":495,"title":496,"titles":497,"content":9,"level":45},"/documentation/layouts/sidenav#tairosidenavcollapsibletrigger","TairoSidenavCollapsibleTrigger",[466,332],{"id":499,"title":500,"titles":501,"content":9,"level":45},"/documentation/layouts/sidenav#tairosidenavsidebar","TairoSidenavSidebar",[466,332],{"id":503,"title":504,"titles":505,"content":9,"level":45},"/documentation/layouts/sidenav#tairosidenavsidebarheader","TairoSidenavSidebarHeader",[466,332],{"id":507,"title":508,"titles":509,"content":9,"level":45},"/documentation/layouts/sidenav#tairosidenavsidebardivider","TairoSidenavSidebarDivider",[466,332],{"id":511,"title":512,"titles":513,"content":9,"level":45},"/documentation/layouts/sidenav#tairosidenavsidebarlinks","TairoSidenavSidebarLinks",[466,332],{"id":515,"title":516,"titles":517,"content":9,"level":45},"/documentation/layouts/sidenav#tairosidenavsidebarlink","TairoSidenavSidebarLink",[466,332],{"id":519,"title":520,"titles":521,"content":522,"level":45},"/documentation/layouts/sidenav#tairosidenavcontent","TairoSidenavContent",[466,332],"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"id":524,"title":525,"titles":526,"content":9,"level":10},"/documentation/layouts/topnav","Topnav",[],{"id":528,"title":529,"titles":530,"content":531,"level":10},"/documentation/layouts/topnav#topnav-layout","Topnav layout",[],"Preview Preview (slim)",{"id":533,"title":103,"titles":534,"content":535,"level":16},"/documentation/layouts/topnav#overview",[529],"The topnav layout provides a top navigation bar with a header and content area. It is useful for applications that need to display full width content. You can either use button style navigation links wuth dropdowns or a simple list of tabbed links.",{"id":537,"title":108,"titles":538,"content":9,"level":45},"/documentation/layouts/topnav#features",[529,103],{"id":540,"title":327,"titles":541,"content":542,"level":16},"/documentation/layouts/topnav#anatomy",[529],"\u003Ctemplate>\n \u003CTairoTopnavLayout>\n \u003CTairoTopnavNavbar>\n \u003CTairoTopnavHeader>\n \u003CTairoTopnavContent />\n \u003C/TairoTopnavHeader>\n \u003C/TairoTopnavNavbar>\n\n \u003CTairoTopnavContent>\n \u003Cslot />\n \u003C/TairoTopnavContent>\n \u003C/TairoTopnavLayout>\n\u003C/template> @theme {\n --tairo-topnav-content-width: 100%;\n}",{"id":544,"title":332,"titles":545,"content":9,"level":16},"/documentation/layouts/topnav#components",[529],{"id":547,"title":548,"titles":549,"content":9,"level":45},"/documentation/layouts/topnav#tairotopnavlayout","TairoTopnavLayout",[529,332],{"id":551,"title":552,"titles":553,"content":9,"level":45},"/documentation/layouts/topnav#tairotopnavnavbar","TairoTopnavNavbar",[529,332],{"id":555,"title":556,"titles":557,"content":9,"level":45},"/documentation/layouts/topnav#tairotopnavheader","TairoTopnavHeader",[529,332],{"id":559,"title":560,"titles":561,"content":522,"level":45},"/documentation/layouts/topnav#tairotopnavcontent","TairoTopnavContent",[529,332],{"id":563,"title":9,"titles":564,"content":565,"level":10},"/documentation/guides",[],"Redirecting to panels...",{"id":567,"title":568,"titles":569,"content":570,"level":10},"/documentation/guides/panels","Panels",[],"Tairo panels allow to display additional data and details in animated left or right drawers.",{"id":572,"title":573,"titles":574,"content":570,"level":10},"/documentation/guides/panels#tairo-panels","Tairo Panels",[],{"id":576,"title":577,"titles":578,"content":9,"level":16},"/documentation/guides/panels#usage","Usage",[573],{"id":580,"title":581,"titles":582,"content":583,"level":45},"/documentation/guides/panels#create-a-panel-component","Create a panel component",[573,577],"To create a panel component, you only need to register close event. You can also define props to pass data to the panel or add custom data to close event to get back when opening the panel. \u003Cscript setup lang=\"ts\">\ninterface Project {\n name: string\n}\n\n// Props are optional, you will be able to pass them when opening the panel\nconst props = withDefaults(\n defineProps\u003C{\n color?: 'default' | 'primary' | 'secondary'\n projects?: Project[]\n }>(),\n {\n color: 'default',\n projects: () => [],\n },\n)\n\n// Define close event, you will be able to get back the selected data from the panel\nconst emits = defineEmits\u003C{\n close: [selected?: Project]\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBaseButton\n @click=\"() => emits('close', {\n selected: props.projects[0],\n })\"\n >\n Select project\n \u003C/BaseButton>\n \u003CBaseButton @click=\"() => emits('close')\">\n Cancel\n \u003C/BaseButton>\n \u003C/div>\n\u003C/template>",{"id":585,"title":586,"titles":587,"content":588,"level":45},"/documentation/guides/panels#open-a-panel","Open a panel",[573,577],"Once you have created your panel component, you can open it using the open function from the usePanels composable. \u003Cscript setup lang=\"ts\">\nimport { PanelComponent } from '#components'\n\nconst { open, close } = usePanels()\n\nfunction onSomeEvent() {\n // open a panel and wait for close event\n const [selected] = await open(\n // component to open\n PanelComponent,\n // panel component props\n {\n color: 'secondary',\n projects: [\n { name: 'Project 1' },\n { name: 'Project 2' },\n { name: 'Project 3' },\n { name: 'Project 4' },\n ],\n },\n // panel options\n {\n position: 'left',\n size: 'md',\n overlay: true,\n }\n )\n\n console.log(selected)\n}\n\u003C/script>",{"id":590,"title":591,"titles":592,"content":9,"level":16},"/documentation/guides/panels#example","Example",[573],{"id":594,"title":595,"titles":596,"content":597,"level":45},"/documentation/guides/panels#language-panel","Language panel",[573,591],"\u003Cscript setup lang=\"ts\">\nimport { DemoPanelLanguage } from '#components'\n\nconst { open } = usePanels()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBaseButton @click=\"open(DemoPanelLanguage)\">\n Open Panel\n \u003C/BaseButton>\n \u003C/div>\n\u003C/template>",{"id":599,"title":600,"titles":601,"content":602,"level":45},"/documentation/guides/panels#activity-panel","Activity panel",[573,591],"\u003Cscript setup lang=\"ts\">\nimport { DemoPanelActivity } from '#components'\n\nconst { open } = usePanels()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBaseButton @click=\"open(DemoPanelActivity, {}, { position: 'left', size: 'sm' })\">\n Open Panel\n \u003C/BaseButton>\n \u003C/div>\n\u003C/template>",{"id":604,"title":605,"titles":606,"content":607,"level":45},"/documentation/guides/panels#search-panel","Search panel",[573,591],"\u003Cscript setup lang=\"ts\">\nimport { DemoPanelSearch } from '#components'\n\nconst { open } = usePanels()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBaseButton @click=\"() => open(DemoPanelSearch)\">\n Open Panel\n \u003C/BaseButton>\n \u003C/div>\n\u003C/template>",{"id":609,"title":610,"titles":611,"content":612,"level":45},"/documentation/guides/panels#task-panel","Task panel",[573,591],"\u003Cscript setup lang=\"ts\">\nimport { DemoPanelTask } from '#components'\n\nconst { open } = usePanels()\n\nconst task = {\n id: 0,\n name: 'Create a new figma design for the new homepage elements',\n description:\n 'We should have a collection of the most basic UI elements like buttons, badges and form elements. Then we should use these to create reusable section blocks that we can also use in other pages of the project.',\n completion: 100,\n status: 5,\n created: '2 days ago',\n assignee: {\n id: 27,\n src: '/img/avatars/24.svg',\n badge: '/img/stacks/illustrator.svg',\n role: 'UI/UX Designer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.',\n tooltip: 'Carmen E.',\n text: 'CE',\n },\n files: [\n {\n id: 0,\n name: 'company-ux-guide.pdf',\n icon: '/img/icons/files/pdf.svg',\n size: '4.7MB',\n version: '1.5.2',\n uploaded: '2 weeks ago',\n author: {\n name: 'Hermann M.',\n picture: '/img/avatars/16.svg',\n },\n },\n {\n id: 1,\n name: 'project_sketches.ai',\n icon: '/img/icons/files/ai.svg',\n size: '8.9MB',\n version: '1.1.3',\n uploaded: 'a week ago',\n author: {\n name: 'Clarissa M.',\n picture: '/img/avatars/5.svg',\n },\n },\n ],\n checklist: [\n {\n text: 'Create a set of button elements',\n done: true,\n },\n {\n text: 'Create a set of badge elements',\n done: true,\n },\n {\n text: 'Create a set of input elements',\n done: true,\n },\n {\n text: 'Create a set of checkbox elements',\n done: true,\n },\n {\n text: 'Create a set of card elements',\n done: true,\n },\n ],\n comments: [\n {\n text: 'I think buttons corners should be a little more rounded.',\n author: {\n name: 'Marjory L.',\n picture: '/img/avatars/12.svg',\n posted: '2 days ago',\n },\n },\n {\n text: 'Are you planning to add this as a global setting in the configuration file?',\n author: {\n name: 'Kendra W.',\n picture: '/img/avatars/10.svg',\n posted: '2 days ago',\n },\n },\n {\n text: 'Not sure about it yet. Still need to check this out with the engineering team',\n author: {\n name: 'Marjory L.',\n picture: '/img/avatars/12.svg',\n posted: '2 days ago',\n },\n },\n ],\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBaseButton @click=\"open(DemoPanelTask, { task })\">\n Open Panel\n \u003C/BaseButton>\n \u003C/div>\n\u003C/template> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":614,"title":615,"titles":616,"content":617,"level":10},"/documentation/guides/form-validation","Form validation",[],"Form validation is a way to check if the data entered by the user is valid. Tairo provides a simple way to validate forms using the `veevalidate` and `zod` libraries.",{"id":619,"title":615,"titles":620,"content":621,"level":16},"/documentation/guides/form-validation#form-validation",[615],"Form validation is a way to check if the data entered by the user is valid. Tairo provides a simple way to validate forms using the vee-validate and zod libraries. Vee-validate provides vue components and composable to control fields and form whereas zod is a library to define schemas. In the example below, we show how both work with Tairo with a simple user profile form. \u003Cscript setup lang=\"ts\">\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Field, useForm } from 'vee-validate'\nimport { z } from 'zod'\n\n// This is the object that will contain the validation messages\nconst VALIDATION_TEXT = {\n FIRSTNAME_REQUIRED: 'First name can\\'t be empty',\n LASTNAME_REQUIRED: 'Last name can\\'t be empty',\n EMAIL_REQUIRED: 'Enter a valid email address',\n MESSAGE_REQUIRED: 'Message can\\'t be empty',\n}\n\n// This is the Zod schema for the form input\n// It's used to define the shape that the form data will have\nconst zodSchema = z.object({\n firstName: z.string().min(1, VALIDATION_TEXT.FIRSTNAME_REQUIRED),\n lastName: z.string().min(1, VALIDATION_TEXT.LASTNAME_REQUIRED),\n email: z.string().email(VALIDATION_TEXT.EMAIL_REQUIRED),\n message: z.string().min(1, VALIDATION_TEXT.MESSAGE_REQUIRED),\n})\n\n// Zod has a great infer method that will\n// infer the shape of the schema into a TypeScript type\ntype FormInput = z.infer\u003Ctypeof zodSchema>\n\nconst validationSchema = toTypedSchema(zodSchema)\nconst initialValues = {\n firstName: '',\n lastName: '',\n email: '',\n message: '',\n} satisfies FormInput\n\nconst {\n handleSubmit,\n isSubmitting,\n setFieldError,\n meta,\n values,\n resetForm,\n} = useForm({\n validationSchema,\n initialValues,\n})\n\nconst success = ref(false)\n\n// Ask the user for confirmation before leaving the page if the form has unsaved changes\nonBeforeRouteLeave(() => {\n if (meta.value.dirty) {\n // eslint-disable-next-line no-alert\n return confirm('You have unsaved changes. Are you sure you want to leave?')\n }\n})\n\nconst toaster = useNuiToasts()\n\n// This is where you would send the form data to the server\nconst onSubmit = handleSubmit(\n async (_values) => {\n success.value = false\n\n // here you have access to the validated form values\n // console.log('message-send-success', _values)\n\n try {\n // fake delay, this will make isSubmitting value to be true\n await new Promise((resolve, reject) => {\n if (values.firstName === 'Hanzo') {\n // simulate a backend error\n setTimeout(() => reject(new Error('Fake backend validation error')), 2000)\n }\n setTimeout(resolve, 4000)\n })\n\n toaster.add({\n title: 'Message has been sent!',\n icon: 'ph:check',\n progress: true,\n })\n }\n catch (error: any) {\n // this will set the error on the form\n if (error.message === 'Fake backend validation error') {\n setFieldError('firstName', 'This name is not allowed')\n\n document.documentElement.scrollTo({\n top: 0,\n behavior: 'smooth',\n })\n\n toaster.add({\n title: 'Please review the errors in the form',\n icon: 'lucide:alert-triangle',\n })\n }\n return\n }\n\n resetForm()\n\n document.documentElement.scrollTo({\n top: 0,\n behavior: 'smooth',\n })\n\n success.value = true\n setTimeout(() => {\n success.value = false\n }, 3000)\n },\n (_error) => {\n // this callback is optional and called only if the form has errors\n success.value = false\n\n // here you have access to the error\n // console.log('message-send-error', _error)\n\n // you can use it to scroll to the first error\n document.documentElement.scrollTo({\n top: 0,\n behavior: 'smooth',\n })\n },\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-full\">\n \u003CBaseCard class=\"p-6\">\n \u003Cform\n action=\"\"\n method=\"POST\"\n novalidate\n @submit.prevent=\"onSubmit\"\n >\n \u003Cdiv class=\"grid grid-cols-12 gap-4\">\n \u003CField v-slot=\"{ field, errorMessage, handleChange, handleBlur }\" name=\"firstName\">\n \u003CBaseField\n v-slot=\"{ inputAttrs, inputRef }\"\n label=\"First Name\"\n :state=\"errorMessage ? 'error' : isSubmitting ? 'loading' : 'idle'\"\n :error=\"errorMessage\"\n :disabled=\"isSubmitting\"\n class=\"col-span-12 sm:col-span-6\"\n required\n >\n \u003CBaseInput\n :ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n placeholder=\"ex: John\"\n :model-value=\"field.value\"\n :error=\"errorMessage\"\n :disabled=\"isSubmitting\"\n type=\"text\"\n @update:model-value=\"handleChange\"\n @blur=\"handleBlur\"\n />\n \u003C/BaseField>\n \u003C/Field>\n\n \u003CField v-slot=\"{ field, errorMessage, handleChange, handleBlur }\" name=\"lastName\">\n \u003CBaseField\n v-slot=\"{ inputAttrs, inputRef }\"\n label=\"Last Name\"\n :state=\"errorMessage ? 'error' : isSubmitting ? 'loading' : 'idle'\"\n :error=\"errorMessage\"\n :disabled=\"isSubmitting\"\n class=\"col-span-12 sm:col-span-6\"\n required\n >\n \u003CBaseInput\n :ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n placeholder=\"ex: Doe\"\n :model-value=\"field.value\"\n :error=\"errorMessage\"\n :disabled=\"isSubmitting\"\n type=\"text\"\n @update:model-value=\"handleChange\"\n @blur=\"handleBlur\"\n />\n \u003C/BaseField>\n \u003C/Field>\n\n \u003CField v-slot=\"{ field, errorMessage, handleChange, handleBlur }\" name=\"email\">\n \u003CBaseField\n v-slot=\"{ inputAttrs, inputRef }\"\n label=\"Email Address\"\n :state=\"errorMessage ? 'error' : isSubmitting ? 'loading' : 'idle'\"\n :error=\"errorMessage\"\n :disabled=\"isSubmitting\"\n class=\"col-span-12\"\n required\n >\n \u003CBaseInput\n :ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n type=\"email\"\n placeholder=\"ex: johndoe@gmail.com\"\n :model-value=\"field.value\"\n :error=\"errorMessage\"\n :disabled=\"isSubmitting\"\n @update:model-value=\"handleChange\"\n @blur=\"handleBlur\"\n />\n \u003C/BaseField>\n \u003C/Field>\n\n \u003CField v-slot=\"{ field, errorMessage, handleChange, handleBlur }\" name=\"message\">\n \u003CBaseField\n v-slot=\"{ inputAttrs, inputRef }\"\n label=\"Message\"\n :state=\"errorMessage ? 'error' : isSubmitting ? 'loading' : 'idle'\"\n :error=\"errorMessage\"\n :disabled=\"isSubmitting\"\n class=\"col-span-12\"\n required\n >\n \u003CBaseTextarea\n :ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n placeholder=\"write your message...\"\n :model-value=\"field.value\"\n :error=\"errorMessage\"\n :disabled=\"isSubmitting\"\n @update:model-value=\"handleChange\"\n @blur=\"handleBlur\"\n />\n \u003C/BaseField>\n \u003C/Field>\n\n \u003Cdiv class=\"col-span-12\">\n \u003CBaseButton\n type=\"submit\"\n class=\"w-full\"\n color=\"primary\"\n :disabled=\"isSubmitting\"\n :loading=\"isSubmitting\"\n >\n Send Message\n \u003C/BaseButton>\n \u003C/div>\n \u003C/div>\n \u003C/form>\n \u003C/BaseCard>\n \u003C/div>\n\u003C/template> Note that you can totally remove those dependencies, Tairo and Shuriken UI components won't be affected. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"id":623,"title":624,"titles":625,"content":626,"level":10},"/documentation/guides/mutli-step-forms","Multi step forms",[],"Utils to create stepper forms in multiple pages",{"id":628,"title":629,"titles":630,"content":631,"level":16},"/documentation/guides/mutli-step-forms#create-pages-for-the-form","Create pages for the form",[624],"Tairo provide helpers to build multiple page forms. This can be useful when you have a form that is too long to be displayed in a single page. This feature relies on nested routes and the provide/inject mechanism from vue to share data between the pages. ├── .app/\n│ ├── pages/\n│ │ ├── my-form/\n│ │ │ ├── index.vue # First step\n│ │ │ ├── my-step-2.vue # Second step\n│ │ │ ├── my-step-3.vue # Thrid step\n│ │ │ └── review.vue # Final step\n│ │ └── my-form.vue # Parent page The parent page my-form.vue will contain the form definition and be responsible for the form state.\nIt also should contains a \u003CNuxtPage /> component to render the current step and use provideMultiStepForm. The my-form/ folder contains the different steps of the form, index.vue being the first step. Each step can then use useMultiStepForm to access the form state and methods. Useful resources: Nested Routes on nuxt.comNested Routes on router.vuejs.orgProvide/Inject documentation on vuejs.org",{"id":633,"title":634,"titles":635,"content":636,"level":16},"/documentation/guides/mutli-step-forms#define-steps-metadata-and-initial-state","Define steps metadata and initial state",[624],"First we need to define types for the form data and the steps metadata, this is optional but can be useful to have better type checking. // types for the form data\nexport interface MyFormData {\n // step 1\n email: string\n password: string\n passwordCheck: string\n // step 2\n firstName: string\n lastName: string\n // step 3\n role: string | null\n}\n// types for steps metadata\nexport interface MyFormStepMeta {\n name: string\n description: string\n} Then we can provide our form initial state, our submit method handler and steps definitions using the provideMultiStepForm function in our parent page. Steps items requires a to property that should be the path to the step page.\nThe a meta property is optional but can be useful to render the steps in the UI.\nAnother optional property is validate that can be used to validate the form data before moving to the next step, we will see how to use it later. \u003Cscript setup lang=\"ts\">\nimport type { MyFormData, MyFormStepMeta } from '~/types/my-form'\n\nconst initialState = ref\u003CMyFormData>({\n // step 1\n email: '',\n password: '',\n passwordCheck: '',\n // step 2\n firstName: '',\n lastName: '',\n // step 3\n role: null,\n})\n\nconst {\n reset,\n handleSubmit,\n} = provideMultiStepForm\u003CMyFormData, MyFormStepMeta>({\n initialState,\n\n async onSubmit(values) {\n console.log('Form submitted', values)\n },\n\n steps: [\n {\n to: '/my-form',\n meta: {\n name: 'Step 1',\n description: 'Login details'\n },\n },\n {\n to: '/my-form/my-step-2',\n meta: {\n name: 'Step 2',\n description: 'Account info'\n },\n },\n {\n to: '/my-form/my-step-3',\n meta: {\n name: 'Step 3',\n description: 'Account role'\n },\n },\n {\n to: '/my-form/review',\n meta: {\n name: 'Step 4',\n description: 'Review account creation'\n },\n },\n ],\n})\n\n// you can fetch data here and provide it to the form,\n// as mutating the initialState won't trigger form state update,\n// unless you call reset()\nconst { data } = useFetch\u003CMyFormData>('/api/my-form-data')\nwatch(data, (value) => {\n if (value) {\n initialState.value = value\n reset()\n }\n}, { immediate: true })\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cmain>\n \u003CMyFormHeader />\n\n \u003Cform @submit.prevent=\"handleSubmit\">\n \u003Cdiv class=\"mb-8\">\n \u003CNuxtPage />\n \u003C/div>\n\n \u003CMyFormActions />\n \u003C/form>\n \u003C/main>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nimport type { MyFormData, MyFormStepMeta } from '~/types/my-form'\n\nconst {\n steps,\n progress,\n currentStep,\n} = useMultiStepForm\u003CMyFormData, MyFormStepMeta>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseHeading class=\"mb-4 flex items-center gap-1\">\n \u003Cspan>My form:\u003C/span>\n\n \u003CBaseDropdown\n variant=\"text\"\n :label=\"currentStep.meta.name\"\n >\n \u003CBaseDropdownItem\n v-for=\"step in steps\"\n :key=\"step.id\"\n :to=\"step.id \u003C currentStep.id ? step.to : undefined\"\n :disabled=\"step.id > currentStep.id\"\n >\n {{ step.meta.name }}\n\n \u003Ctemplate #text>\n {{ step.meta.description }}\n \u003C/template>\n \u003Ctemplate #end>\n \u003CIcon\n v-if=\"step.id \u003C currentStep.id\"\n name=\"lucide:check-circle\"\n class=\"text-success-500 size-4\"\n />\n \u003C/template>\n \u003C/BaseDropdownItem>\n \u003C/BaseDropdown>\n\n \u003CBaseProgressCircle :model-value=\"progress\" :size=\"20\" />\n \u003C/BaseHeading>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nimport type { MyFormData, MyFormStepMeta } from '~/types/my-form'\n\nconst {\n loading,\n complete,\n isLastStep,\n getPrevStep,\n} = useMultiStepForm\u003CMyFormData, MyFormStepMeta>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBaseButton\n :to=\"getPrevStep()?.to\"\n :disabled=\"!getPrevStep()?.to\"\n >\n Previous\n \u003C/BaseButton>\n\n \u003CBaseButton\n type=\"submit\"\n variant=\"primary\"\n :loading=\"loading\"\n :disabled=\"loading || complete\"\n >\n {{ isLastStep ? 'Submit' : 'Continue' }}\n \u003C/BaseButton>\n \u003C/div>\n\u003C/template>",{"id":638,"title":639,"titles":640,"content":641,"level":16},"/documentation/guides/mutli-step-forms#create-steps-pages","Create steps pages",[624],"Once we have our parent page setup, we can create the steps pages under the my-form/ directory. We will be able to access form context with useMultiStepForm composable.\nIf you omit to call provideMultiStepForm in the parent page, you will get an error when trying to use useMultiStepForm. Check the form context reference below to see all the available methods and properties returned by useMultiStepForm and provideMultiStepForm. And there are pages examples to use with our form: \u003Cscript setup lang=\"ts\">\nimport type { MyFormData, MyFormStepMeta } from '~/types/my-form'\n\nconst { data } = useMultiStepForm\u003CMyFormData, MyFormStepMeta>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-sm space-y-2\">\n \u003CBaseInput\n v-model=\"data.email\"\n icon=\"lucide:mail\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"you@acme.com\"\n />\n \u003CLazyAddonInputPassword\n v-model=\"data.password\"\n icon=\"lucide:lock\"\n label=\"Password\"\n />\n \u003CBaseInput\n v-model=\"data.passwordCheck\"\n icon=\"lucide:lock\"\n label=\"Password verification\"\n type=\"password\"\n />\n \u003C/div>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nconst { data } = useMultiStepForm()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-sm space-y-2\">\n \u003CBaseInput\n v-model=\"data.firstName\"\n label=\"First name\"\n icon=\"lucide:user\"\n placeholder=\"John\"\n />\n \u003CBaseInput\n v-model=\"data.lastName\"\n label=\"Last name\"\n icon=\"lucide:user\"\n placeholder=\"Doe\"\n />\n \u003C/div>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nconst { data } = useMultiStepForm()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-sm space-y-2\">\n \u003CBaseHeading size=\"md\" weight=\"medium\">\n Select a role\n \u003C/BaseHeading>\n \u003Cdiv class=\"flex flex-col space-y-2\">\n \u003CBaseRadio\n v-model=\"data.role\"\n value=\"user\"\n label=\"User\"\n />\n \u003CBaseRadio\n v-model=\"data.role\"\n value=\"moderator\"\n label=\"Moderator\"\n />\n \u003CBaseRadio\n v-model=\"data.role\"\n value=\"admin\"\n label=\"Admin\"\n />\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nconst { data } = useMultiStepForm()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-sm space-y-2\">\n \u003CBaseCard class=\"p-4\">\n \u003Cpre>{{ data }}\u003C/pre>\n \u003C/BaseCard>\n \u003C/div>\n\u003C/template>",{"id":643,"title":644,"titles":645,"content":646,"level":16},"/documentation/guides/mutli-step-forms#errors-and-validation","Errors and validation",[624],"By default, no validation is performed when moving to the next step. You can add a validate function to the step definition to perform validation before moving to the next step. The validate function get the current form context as argument, in which you can use the setFieldError method to set an error message for a specific field. If you set an error message for a field and don't return anything within validate function, the form won't move to the next step. \u003Cscript setup lang=\"ts\">\nprovideMultiStepForm({\n // global error handler,\n // this will be called when an error is thrown\n // in a validate function or in the onSubmit function\n async onError(_error, _context) {\n //\n },\n\n // ...\n\n steps: [\n {\n // ...\n\n async validate({ data, setFieldError, resetFieldError }) {\n // reset current step errors\n resetFieldError(['email', 'password', 'passwordCheck'])\n\n // you can use a validation library like zod or yup\n if (!data.value.email) {\n setFieldError('email', 'Email is required')\n }\n else if (!/^[^\\s@]+@[^\\s@][^\\s.@]*\\.[^\\s@]+$/.test(data.value.email)) {\n setFieldError('email', 'Invalid email')\n }\n else {\n // example of async validation\n const available = await checkEmailAvailability(data.value.email)\n if (!available) {\n setFieldError('email', 'Email already used')\n }\n }\n\n if (!data.value.password) {\n setFieldError('password', 'Password is required')\n }\n else if (data.value.password.length \u003C 6) {\n setFieldError('password', 'Password must be at least 6 characters')\n }\n else if (data.value.password !== data.value.passwordCheck) {\n setFieldError('passwordCheck', 'Passwords do not match')\n }\n\n // return nothing to let form move only if no errors\n },\n },\n ],\n})\n\u003C/script> The setFieldError(key, message) method populate the errors.fields[key] object in the form context, which can be used to display errors in the UI. In addition, we need to ensure on page load that previous steps are valid, as the user can navigate directly to a step page. We can do this by calling the checkPreviousSteps method in the onBeforeMount hook inside our steps pages. We can update our form pages to display errors on the fields and check previous steps (only relevant parts are shown): \u003Cscript setup lang=\"ts\">\nconst { errors, checkPreviousSteps } = useMultiStepForm()\n\nonBeforeMount(checkPreviousSteps)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-sm space-y-2\">\n \u003CBaseInput\n :error=\"errors.fields.email\"\n />\n \u003CLazyAddonInputPassword\n :error=\"errors.fields.password\"\n />\n \u003CBaseInput\n :error=\"errors.fields.passwordCheck\"\n />\n \u003C/div>\n\u003C/template>",{"id":648,"title":649,"titles":650,"content":651,"level":16},"/documentation/guides/mutli-step-forms#form-context-reference","Form context reference",[624],"export interface MultiStepFormContext\u003C\n DATA extends Record\u003Cstring, any> = Record\u003Cstring, any>,\n META extends Record\u003Cstring, any> = Record\u003Cstring, any>,\n> {\n steps: ComputedRef\u003CWithId\u003CStepForm\u003CDATA, META>>[]>\n totalSteps: ComputedRef\u003Cnumber>\n currentStepId: ComputedRef\u003Cnumber>\n currentStep: ComputedRef\u003CWithId\u003CStepForm\u003CDATA, META>>>\n progress: ComputedRef\u003Cnumber>\n isLastStep: ComputedRef\u003Cboolean>\n data: Ref\u003CUnwrapRef\u003CDATA>>\n errors: Readonly\u003CRef\u003C{\n message: string\n fields: Record\u003Cstring, string | undefined>\n }>>\n loading: Readonly\u003CRef\u003Cboolean>>\n complete: Readonly\u003CRef\u003Cboolean>>\n\n getStep: (id?: number) => WithId\u003CStepForm\u003CDATA, META>> | undefined\n getNextStep: (id?: number) => WithId\u003CStepForm\u003CDATA, META>> | null\n getPrevStep: (id?: number) => WithId\u003CStepForm\u003CDATA, META>> | null\n goToStep: (step?: WithId\u003CStepForm\u003CDATA, META>>) => Promise\u003Cvoid>\n reset: (initialState?: MaybeRefOrGetter\u003CDATA>) => void\n setErrorMessage: (message?: string) => void\n setFieldError: (field: string, message?: string) => void\n resetFieldError: (field?: string | string[]) => void\n\n validateStep: (step?: WithId\u003CStepForm\u003CDATA, META>>) => Promise\u003Cboolean>\n handleSubmit: () => Promise\u003Cvoid>\n checkPreviousSteps: () => Promise\u003Cvoid>\n} html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}",{"id":653,"title":654,"titles":655,"content":656,"level":10},"/documentation/guides/pnpm-workspace","Pnpm workspace",[],"Pnpm workspace is a powerful tool for managing multiple packages in a single repository. It can help you keep your dependencies in sync and reduce the time and disk space required for package installation.",{"id":658,"title":659,"titles":660,"content":661,"level":10},"/documentation/guides/pnpm-workspace#introduction","Introduction",[],"Pnpm workspace is a powerful tool for managing multiple packages in a single repository. It can help you keep your dependencies in sync and reduce the time and disk space required for package installation. If you're working on a project that uses pnpm workspace, you can take advantage of this feature to manage your packages more efficiently. Another feature of pnpm workspace is hoisting, which allows you to install dependencies at the root level instead of in each workspace. This can further reduce the disk space and installation time required for your packages. Overall, pnpm workspace can be a powerful tool for managing multiple packages in a single repository. It can help you keep your dependencies in sync and reduce the time and disk space required for package installation. If you're new to pnpm workspace, it's worth taking the time to learn how to use it effectively. Useful resources: Read more about workspace on pnpm.io",{"id":663,"title":664,"titles":665,"content":666,"level":16},"/documentation/guides/pnpm-workspace#workspace-structure","Workspace structure",[659],"Pnpm use a pnpm-workspace.yaml file to define the workspace structure. This file is located at the root of the project and contains a list of workspace directories. packages:\n - .app\n - .demo\n - layers/* All folders listed in this file that contains a package.json file will be considered in the workspace. You can use wildcards to automatically include all folders that match a pattern, like with the layers/* entry above. As an example, you could create a new folder for your backend and add it to the workspace: packages:\n - .app\n - .backend # replace unused .demo with .backend\n - layers/* Then create a package.json file in the .backend folder: {\n \"name\": \"my-backend\",\n \"private\": true,\n \"version\": \"1.0.0\"\n}",{"id":668,"title":669,"titles":670,"content":671,"level":16},"/documentation/guides/pnpm-workspace#install-dependencies-in-the-right-place","Install dependencies in the right place",[659],"By default, if you don't specify a package filter, pnpm will install dependencies in the root package.json file. This is not what we want when using pnpm workspace. Instead we want to install it in the package that contains our layer. For example, if we want to install a dependency in the .app layer, we should use the following command: pnpm --filter=app install --dev my-dependency This will find packages in the workspace that has the name app in their package.json and install the dependency in it (here it matches \u003Capp>/package.json name). We could use my-backend from the previous example instead of app to install the dependency in the .backend package. Another option is to run pnpm install in the layer directory. This will install dependencies in the layer directory instead of the root directory. cd .app\npnpm install --dev my-dependency",{"id":673,"title":674,"titles":675,"content":676,"level":16},"/documentation/guides/pnpm-workspace#upgrading-dependencies-in-a-workspace","Upgrading dependencies in a workspace",[659],"If you want to update a dependency in a workspace, you should use the update command with the --recursive flag in order to update the dependency in all layers. pnpm update --recursive --latest --interactive Select dependencies you want to update and press enter. Once the update is done, you need to remove all node_modules folder using pnpm clean:all, delete the pnpm-lock.yaml file and run pnpm install again. Note that it may be possible that we have patched some dependencies, updating them may or may not include our fixes. If you encounter any issue, please report it on our Support Portal. Alternatively, you can also use find unix command to find all node_modules directory in the workspace and delete them: find . -maxdepth 4 -name node_modules -type d -prune -exec rm -rf {} \\; Useful resources: Read update guide on pnpm.io html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"id":678,"title":679,"titles":680,"content":9,"level":10},"/documentation/guides/deployment","Deployment",[],{"id":682,"title":659,"titles":683,"content":684,"level":16},"/documentation/guides/deployment#introduction",[679],"Before you can deploy your application, you need to know how to build it. This guide will show you how to build your application. Nuxt have two different ways to build your application, for static hosting or server-rendered application. Each one has its own advantages and disadvantages, so it's important to know which one is best for your use case. Useful resources: Read more deployment on nuxt.com",{"id":686,"title":687,"titles":688,"content":9,"level":16},"/documentation/guides/deployment#static-hosting","Static Hosting",[679],{"id":690,"title":691,"titles":692,"content":693,"level":45},"/documentation/guides/deployment#advantages","Advantages",[679,687],"Faster load times: Static sites are prebuilt and served as-is, which means they can be delivered to the user more quickly than server-rendered sites.Lower hosting costs: Static sites can be hosted on services like GitHub Pages or Netlify for free or at a low cost, whereas server-rendered sites require more powerful hosting solutions.",{"id":695,"title":696,"titles":697,"content":698,"level":45},"/documentation/guides/deployment#disadvantages","Disadvantages",[679,687],"Limited interactivity: Static sites can't provide the same level of interactivity as server-rendered sites because they don't have a server-side component.Harder to update: Static sites require a rebuild and redeploy every time you make a change, which can be time-consuming and error-prone.Limited functionality: Static sites can't perform complex server-side operations like processing payments or sending emails without the use of third-party services.Limited dynamic content: Static sites can't easily display dynamic content like user-specific data or real-time updates without the use of client-side JavaScript.",{"id":700,"title":701,"titles":702,"content":703,"level":45},"/documentation/guides/deployment#generate-a-static-site","Generate a static site",[679,687],"Use the pnpm generate command to generate a static site from your application. This command will create a \u003Capp>/.output/public directory that contains all of the files needed to serve your application statically. You can also directly use Nuxt CLI using npx, which is installed with Node.js. npx nuxt generate .app Don't forget to add the .app after the command to specify the layer you want to build. Before deploying, you can ensure that the generated files are correct by using the pnpm serve command to serve them locally. npx serve .app/.output/public",{"id":705,"title":706,"titles":707,"content":9,"level":16},"/documentation/guides/deployment#server-rendered-applications","Server-Rendered Applications",[679],{"id":709,"title":691,"titles":710,"content":711,"level":45},"/documentation/guides/deployment#advantages-1",[679,706],"More interactivity: Server-rendered sites can provide a higher level of interactivity because they have a server-side component that can handle user input and perform complex operations.Easier to update: Server-rendered sites can be updated more easily because changes can be made on the server and don't require a rebuild and redeploy.More functionality: Server-rendered sites can perform complex server-side operations like processing payments or sending emails without the use of third-party services.More dynamic content: Server-rendered sites can easily display dynamic content like user-specific data or real-time updates.",{"id":713,"title":696,"titles":714,"content":715,"level":45},"/documentation/guides/deployment#disadvantages-1",[679,706],"Slower load times: Server-rendered sites require more processing on the server before they can be delivered to the user, which can result in slower load times.Higher hosting costs: Server-rendered sites require more powerful hosting solutions, which can be more expensive than static hosting.",{"id":717,"title":718,"titles":719,"content":720,"level":45},"/documentation/guides/deployment#build-production-application","Build production application",[679,706],"Use the pnpm build command to generate a static site from your application. This command will create a \u003Capp>/.output directory that contains all of the files needed to serve your application with a server. Nuxt build is performed through Nitro which can output your application for different platforms. By default, it will output a Node.js application, but it comes with many presets like for Bun, Deno, Vercel, Cloudflare, etc. You can also directly use Nuxt CLI using npx, which is installed with Node.js. NITRO_PRESET=node-cluster npx nuxt build .app Don't forget to add the .app after the command to specify the layer you want to build. Before deploying, you can ensure that the application runs correctly by using: node .app/.output/server/index.mjs",{"id":722,"title":723,"titles":724,"content":725,"level":45},"/documentation/guides/deployment#docker-example","Docker example",[679,706],"You can also use Docker to build and run your application. This is useful if you want to deploy your application on containers like Kubernetes or Docker Swarm. First, create a Dockerfile in your project root directory: # Build stage\nFROM bitnami/node:20 AS build\nWORKDIR /app\n\n# Install pnpm with corepack\nRUN corepack enable && corepack prepare pnpm@latest --activate\n\n# Prepare pnpm dependencies using lockfile, patches and docker cache\nCOPY pnpm-lock.yaml .\nCOPY patches/ patches/\nRUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store pnpm fetch\n\n# Install and build the app\nCOPY . .\nRUN pnpm install\nRUN pnpm build\n\n# Production stage\nFROM bitnami/node:20 AS prod\nWORKDIR /app\n\n# Create a non-root user\nRUN groupadd -g 10001 nuxt && \\\n useradd -u 10001 -g nuxt nuxt \\\n && chown -R nuxt:nuxt /app\n\n# Switch to the non-root user\nUSER nuxt:nuxt\n\n# Set the environment to production\nENV NODE_ENV=production\n\n# Copy the built app from the build stage\nCOPY --chown=nuxt:nuxt --from=build /app/.app/.output .output\n\n# Expose the port\nEXPOSE 3000\n\n# Start the app\nCMD [\"node\", \".output/server/index.mjs\"] This Dockerfile uses a multi-stage build to separate the build and production stages. The build stage installs pnpm and builds the application, while the production stage copies the built application from the build stage and runs it, using a non-root user for security reasons. This allow to keep only the built application in the production image. Then, build and run the Docker image: docker build --tag my-frontend-app:1.0.0 . Once the image is built, you can run it using: docker run --rm --publish 3000:3000 my-frontend-app:1.0.0 Useful resources: View Presets on nitro.unjs.ioRead about multi-stage build on docker.com 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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":727,"title":174,"titles":728,"content":9,"level":10},"/documentation/guides/troubleshooting",[],{"id":730,"title":731,"titles":732,"content":733,"level":16},"/documentation/guides/troubleshooting#understanding-the-project-stack","Understanding the project stack",[174],"Nuxt is a framework that combines a set of tools and libraries to create applications. It's important to know what tools are used in order to understand how to solve potential issues. It uses Vite as a development tool, and Rollup to build the production version of your app. We highly encourage you to both read their troubleshooting guides, as they might be able to help you to solve your issue. Vite's troubleshooting guide: contains common issues with the development server (ex: requests stalled, hot reloading, etc.)Rollup's troubleshooting guide: contains common issues with the production build (ex: memory issues, tree-shaking, etc.) Useful resources: Read troubleshooting guide on vite.devRead troubleshooting guide on rollupjs.org",{"id":735,"title":736,"titles":737,"content":738,"level":16},"/documentation/guides/troubleshooting#enable-cli-debug","Enable CLI debug",[174],"If you encounter issues that you can't solve, you can start the project in debug mode. This will enable the verbose mode of Nuxt, which will output more information in the console. # Enable Nuxt debug mode\nDEBUG=1 pnpm dev # or pnpm build Vite also has a debug mode, which can be enabled by setting the DEBUG environment variable to vite:*. # Enable Nuxt & Vite debug mode\nDEBUG=vite:* pnpm dev # or pnpm build You can send those logs to us on our support portal if you need help!",{"id":740,"title":741,"titles":742,"content":743,"level":16},"/documentation/guides/troubleshooting#increase-the-memory-limit","Increase the memory limit",[174],"When the documentation layer is enabled, or when building the full demo, you may need to increase the memory limit of Node.js. This is because the documentation layer uses nuxt-component-meta to generate the components documentation. When building the demo, Rollup will also use a lot of memory to bundle the project. # Increase the memory limit to 8GB\nNODE_OPTIONS=--max-old-space-size=8192 pnpm demo:build",{"id":745,"title":746,"titles":747,"content":748,"level":16},"/documentation/guides/troubleshooting#use-step-by-step-debugger","Use step-by-step debugger",[174],"You can use the VS Code debugger to debug your application. This is useful when you want to inspect the state of your application at a specific time. Tairo has a pre-configured launch configuration for VS Code. You can use it by clicking on the \"Run and Debug\" button in the sidebar, and then selecting \"fullstack: nuxt\" in the dropdown. Then you can define breakpoints in your code, and start the debugger. The debugger will stop at the breakpoints you defined, and you will be able to inspect the state of your application. In addition to the breakpoints, you can also use the debugger keyword in your code to stop the execution of your application. This is useful when you want to inspect the state of your application at a specific time. Useful resources: Read Debugging Guide on nuxt.comRead Reactivity Debugging on vuejs.org",{"id":750,"title":751,"titles":752,"content":753,"level":16},"/documentation/guides/troubleshooting#use-nuxt-devtools","Use Nuxt devtools",[174],"You can install the Nuxt devtools which provide a set of tools to inspect your application. This is useful when you want to inspect the state of your application at a specific time, inspect components, pages, etc. First you need to install the @nuxt/devtools package in your project: pnpm --filter=app install --dev @nuxt/devtools Then simply enable the devtools in your \u003Capp>/nuxt.config.ts file: export default defineNuxtConfig({\n devtools: { enabled: true },\n}) Useful resources: Read Debugging Guide on nuxt.comRead Reactivity Debugging on vuejs.org html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":755,"title":756,"titles":757,"content":758,"level":10},"/documentation/guides/migration","Migration from v1",[],"TL;DR",{"id":760,"title":756,"titles":761,"content":762,"level":10},"/documentation/guides/migration#migration-from-v1",[],"TL;DR Tairo is now one layer which includes all layouts.app.config.ts configuration is no longer supported, instead you have to create your own layout, based on new tairo components.Panels has been reworked and no longer relies on app.config.ts composable.Tailwind 4 is used which includes major changes about the way to customize the design of your application.Moved from Headless UI to Reka UI as barebone components library.Base components require a migration, see Shuriken UI v4 Migration Guide for more information.",{"id":764,"title":765,"titles":766,"content":9,"level":16},"/documentation/guides/migration#tairo-is-now-one-layer","Tairo is now one layer",[756],{"id":768,"title":769,"titles":770,"content":771,"level":45},"/documentation/guides/migration#new-layout-system","New layout system",[756,765],"In Tairo V1, we had 4 layers: tairo (core components)tairo-sidebar (layout sidebar)tairo-collapse (layout collapse)tairo-topnav (layout topnav) Each nuxt layout layers was registering a layout in nuxt and relying on app.config.ts to configure it. In Tairo V2, we have only one layer tairo which does not register any layout in nuxt, and does not rely on app.config.ts to configure it. Instead, we have new components to create your own layouts, allowing you to define your own logic (like RBAC, translations, async data, etc). All layouts are using CSS variables to customize them, so you will be able to customize them as you want without needing to override any components! You can take a look for each new structure here: (new layout!) We've provided you default implementations examples in the .demo/app/layouts directory. But possibilities are endless, you will be able to create the layout that best fits your project requirements. Here is a quick example of how to create a new layout: \u003Ctemplate>\n \u003CTairoCollapseLayout>\n \u003CTairoCollapseSidebar>\n \u003CTairoCollapseSidebarHeader>My App\u003C/TairoCollapseSidebarHeader>\n \u003CTairoCollapseSidebarLinks class=\"px-4 space-y-1 grow\">\n \u003CTairoCollapseSidebarLink\n to=\"/\"\n label=\"Home\"\n icon=\"solar:home-smile-angle-outline\"\n />\n \u003C/TairoCollapseSidebarLinks>\n \u003C/TairoCollapseSidebar>\n\n \u003CTairoCollapseContent>\n \u003Cslot />\n \u003C/TairoCollapseContent>\n \u003C/TairoCollapseLayout>\n\u003C/template>",{"id":773,"title":774,"titles":775,"content":776,"level":45},"/documentation/guides/migration#panels-rework","Panels rework",[756,765],"In previous version, panels were using app.config.ts to configure them. Now, they are using a new composable usePanels to create and show panels. Before: \u003Cscript setup lang=\"ts\">\nconst { open } = usePanels()\n\nfunction onSomeEvent() {\n // open a panel by name, which is registered in app.config.ts\n open('panel-name', {\n // ... panels props\n })\n}\n\u003C/script>\nexport default defineAppConfig({\n tairo: {\n panels: [\n {\n // Unique name of the panel, used to open it\n name: 'panel-name',\n component: {\n // The component name of the panel and default props\n name: 'PanelComponent',\n props: {\n color: 'primary',\n }\n },\n // The position of the panel\n position: 'left',\n // Whether to show an overlay when the panel is open\n overlay: false,\n },\n ],\n },\n})\n\u003Cscript setup lang=\"ts\">\n// You can add props to the component\nconst props = withDefaults(\n defineProps\u003C{\n color?: 'default' | 'primary' | 'secondary'\n projects?: any[]\n }>(),\n {\n color: 'default',\n projects: () => [],\n },\n)\n\n// Eiter define events\nconst emits = defineEmits\u003C{\n save: [info: any]\n}>()\n\n// And use panels utils\nconst { close } = usePanels()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseButtonGroup>\n \u003CBaseButton @click=\"() => emits('save', { selected: props.projects[0] })\">\n Save\n \u003C/BaseButton>\n \u003CBaseButton @click=\"() => close()\">\n Cancel\n \u003C/BaseButton>\n \u003C/BaseButtonGroup>\n\u003C/template> After: \u003Cscript setup lang=\"ts\">\nimport { MyPanelComponent } from '#components'\n\nconst { open } = usePanels()\n\nasync function onSomeEvent() {\n // open a panel using a component\n const emitted = await open(MyPanelComponent, {\n // ... typed panels props\n })\n\n // emitted contains the properties\n // passed to the `close` event from the panel component\n console.log('panel closed', emitted)\n}\n\u003C/script>",{"id":778,"title":779,"titles":780,"content":781,"level":16},"/documentation/guides/migration#shuriken-ui-v4","Shuriken UI v4",[756],"Shuriken UI v4, which contains all Base* components, is a major update that is based on Tailwind 4 and Reka UI We decided to move from Headless UI to Reka UI as barebone components library. This allows us to remove dependencies like @vueform/slider, @vueform/multiselect, @cssninja/nuxt-toaster and v-tooltip as we are now using Shuriken UI components. Inputs components now render only one element rather than multiple element (for the input, label, icon, etc). In order to achieve same result, a new component BaseField was created. We recommend you to read the Shuriken UI v4 Migration Guide to understand the changes as it contains major breaking changes that you will need to handle.",{"id":783,"title":784,"titles":785,"content":786,"level":16},"/documentation/guides/migration#tailwind-4","Tailwind 4",[756],"In Previous version, we were using Tailwind 3 and we were using withShurikenUI to extend the tailwind config. With Tailwind 4, we are using CSS variables to customize the design (like colors, fonts, etc) of your application, and we are not using withShurikenUI anymore. We recommends you to read Tailwind Changes from v3 guide to understand the changes as it contains some small breaking changes that are good to know. Before: import { withShurikenUI } from '@shuriken-ui/tailwind'\nimport colors from 'tailwindcss/colors'\n\nexport default withShurikenUI({\n content: [],\n theme: {\n extend: {\n // change the primary color\n primary: colors.violet,\n }\n }\n}) After: @import 'tailwindcss';\n@import '@shuriken-ui/nuxt';\n@import '#layers/@cssninja/tairo/theme.css';\n\n@theme {\n --color-primary-50: var(--color-sky-50);\n --color-primary-100: var(--color-sky-100);\n --color-primary-200: var(--color-sky-200);\n --color-primary-300: var(--color-sky-300);\n --color-primary-400: var(--color-sky-400);\n --color-primary-500: var(--color-sky-500);\n --color-primary-600: var(--color-sky-600);\n --color-primary-700: var(--color-sky-700);\n --color-primary-800: var(--color-sky-800);\n --color-primary-900: var(--color-sky-900);\n --color-primary-950: var(--color-sky-950);\n} Useful resources: Tailwind 4 Upgrade GuideShuriken UI v4 Migration GuideReka UI Introduction html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":788,"title":789,"titles":790,"content":9,"level":10},"/documentation/reference","All components",[],{"id":792,"title":793,"titles":794,"content":9,"level":10},"/documentation/reference#reference","Reference",[],{"id":796,"title":797,"titles":798,"content":9,"level":10},"/documentation/reference/modules","Tairo Modules",[],{"id":800,"title":801,"titles":802,"content":9,"level":10},"/documentation/reference/modules#modules","Modules",[],{"id":804,"title":797,"titles":805,"content":806,"level":16},"/documentation/reference/modules#tairo-modules",[801],"This is a list of modules that are preinstalled with Tairo layer. ModuleDescription@shuriken-ui/nuxtBase UI componentsnuxt-icon100,000+ ready to use icons from Iconify.@nuxtjs/color-modeDark and Light mode for Nuxt with auto detection",{"id":808,"title":809,"titles":810,"content":811,"level":16},"/documentation/reference/modules#additional-modules-in-tairo-demo","Additional modules in Tairo demo",[801],"These modules are not preinstalled with Tairo layer, but they are used in Tairo demo. ModuleDescriptionreka-uiAuto import Reka UI components@vueuse/nuxtVue composition API utilities@nuxt/imagePlug-and-play image optimization for Nuxt apps.@nuxt/fontsPlug-and-play fonts optimization for Nuxt apps.@nuxt/eslintCollection of ESLint-related packages for Nuxt@nuxt/contentAllows developers to write their content in Markdown@nuxtjs/i18nI18n (Internationalization) module for Nuxt",{"id":813,"title":814,"titles":815,"content":816,"level":16},"/documentation/reference/modules#other-recommended-modules","Other Recommended Modules",[801],"These modules are not preinstalled with Tairo layer nor used in Tairo demo, but they are recommended by Tairo team. ModuleDescriptionnuxt-auth-utilsAdd Authentication to Nuxt applications with secured & sealed cookies sessions.@nuxt/scriptsNuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX@pinia/nuxtThe intuitive store for Vue and Nuxt@pinia/colada-nuxtMakes handling async state management in pinia a breeze",{"id":818,"title":819,"titles":820,"content":9,"level":10},"/documentation/reference/composables","Tairo Composables",[],{"id":822,"title":823,"titles":824,"content":825,"level":10},"/documentation/reference/composables#composables","Composables",[],"ModuleDescriptionuseMultiStepFormA composable to create forms over multiple pagesusePanelsEasily create and show panels with a lot of featuresuseTailwindBreakpointsGet different breakpoints from the current screen sizeuseIsMacLikeCheck if the current platform is a Mac or iOS deviceuseMetaKeyGet the meta key for the current platform (⌘ on Mac, ctrl on Windows)useLayoutCollapseContextGet the collapse layout contextuseLayoutSidebarContextGet the sidebar layout contextuseLayoutSidenavContextGet the sidenav layout contextuseLayoutTopnavContextGet the topnav layout context",{"id":827,"title":828,"titles":829,"content":830,"level":10},"/documentation/reference/tairo/check-animated","Check animated",[],"Tairo animated check icon can be used to show a checkmark animation when a user accomplishes an action.",{"id":832,"title":828,"titles":833,"content":834,"level":10},"/documentation/reference/tairo/check-animated#check-animated",[],"TairoCheckAnimated is a simple animated icon that can be used to show a checkmark animation when a user accomplishes an action. It can be used in a button or in a form to show that the action was successful.",{"id":836,"title":591,"titles":837,"content":838,"level":16},"/documentation/reference/tairo/check-animated#example",[828],"\u003Cscript setup lang=\"ts\">\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex items-end gap-3\">\n \u003CTairoCheckAnimated color=\"success\" size=\"xs\" />\n\n \u003CTairoCheckAnimated color=\"success\" size=\"sm\" />\n\n \u003CTairoCheckAnimated color=\"success\" size=\"md\" />\n\n \u003CTairoCheckAnimated color=\"success\" size=\"lg\" />\n \u003C/div>\n\u003C/template>",{"id":840,"title":332,"titles":841,"content":9,"level":16},"/documentation/reference/tairo/check-animated#components",[828],{"id":843,"title":844,"titles":845,"content":846,"level":45},"/documentation/reference/tairo/check-animated#tairocheckanimated","TairoCheckAnimated",[828,332],"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}",{"id":848,"title":849,"titles":850,"content":851,"level":10},"/documentation/reference/tairo/checkbox-animated","Checkbox animated",[],"Enhanced checkbox component with smooth circular animation and multiple color variants",{"id":853,"title":854,"titles":855,"content":856,"level":10},"/documentation/reference/tairo/checkbox-animated#checkbox-animated","Checkbox Animated",[],"TairoCheckboxAnimated is an enhanced checkbox component featuring a smooth circular animation with checkmark and customizable color variants for different states.",{"id":858,"title":591,"titles":859,"content":860,"level":16},"/documentation/reference/tairo/checkbox-animated#example",[854],"\u003Cscript setup lang=\"ts\">\nconst checked = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Clabel class=\"flex items-center gap-3\">\n \u003CTairoCheckboxAnimated\n v-model=\"checked\"\n variant=\"success\"\n />\n \u003CBaseText\n class=\"text-muted-500 dark:text\"\n size=\"sm\"\n >\n Lowercase\n \u003C/BaseText>\n \u003C/label>\n\u003C/template>",{"id":862,"title":332,"titles":863,"content":9,"level":16},"/documentation/reference/tairo/checkbox-animated#components",[854],{"id":865,"title":866,"titles":867,"content":868,"level":16},"/documentation/reference/tairo/checkbox-animated#tairocheckboxanimated","TairoCheckboxAnimated",[854],"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"id":870,"title":871,"titles":872,"content":873,"level":10},"/documentation/reference/tairo/checkbox-card-icon","Checkbox card icon",[],"Enhanced checkbox component with icon support and card-based styling for visual selection",{"id":875,"title":876,"titles":877,"content":878,"level":10},"/documentation/reference/tairo/checkbox-card-icon#checkbox-card-icon","Checkbox Card Icon",[],"TairoCheckboxCardIcon is an enhanced checkbox component that combines icon support with card-based styling for visual selection states.",{"id":880,"title":591,"titles":881,"content":882,"level":16},"/documentation/reference/tairo/checkbox-card-icon#example",[876],"\u003Cscript setup lang=\"ts\">\nconst selectedEventFeatures = ref(['drive'])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseCheckboxGroup v-model=\"selectedEventFeatures\" as=\"div\" class=\"flex gap-3\">\n \u003CBaseTooltip disable-closing-trigger content=\"Record\">\n \u003CTairoCheckboxCardIcon value=\"record\" icon=\"solar:playback-speed-linear\" />\n \u003C/BaseTooltip>\n \u003CBaseTooltip disable-closing-trigger content=\"Document included\">\n \u003CTairoCheckboxCardIcon value=\"drive\" icon=\"solar:document-text-linear\" />\n \u003C/BaseTooltip>\n \u003CBaseTooltip disable-closing-trigger content=\"External Users\">\n \u003CTairoCheckboxCardIcon value=\"external\" icon=\"solar:folder-security-linear\" />\n \u003C/BaseTooltip>\n \u003CBaseTooltip disable-closing-trigger content=\"Comment allowed\">\n \u003CTairoCheckboxCardIcon value=\"conversation\" icon=\"solar:chat-round-line-linear\" />\n \u003C/BaseTooltip>\n \u003C/BaseCheckboxGroup>\n\u003C/template>",{"id":884,"title":332,"titles":885,"content":9,"level":16},"/documentation/reference/tairo/checkbox-card-icon#components",[876],{"id":887,"title":888,"titles":889,"content":868,"level":45},"/documentation/reference/tairo/checkbox-card-icon#tairocheckboxcardicon","TairoCheckboxCardIcon",[876,332],{"id":891,"title":892,"titles":893,"content":894,"level":10},"/documentation/reference/tairo/content-wrapper","Content wrapper",[],"Tairo content wrapper wraps the page content. It provides slots and allows you to control the horizontal flow of the page.",{"id":896,"title":892,"titles":897,"content":898,"level":10},"/documentation/reference/tairo/content-wrapper#content-wrapper",[],"The content wrapper wraps the page content. It provides slots and allows you to control the horizontal flow of the page.",{"id":900,"title":591,"titles":901,"content":9,"level":16},"/documentation/reference/tairo/content-wrapper#example",[892],{"id":903,"title":904,"titles":905,"content":9,"level":45},"/documentation/reference/tairo/content-wrapper#default-wrapper","Default wrapper",[892,591],{"id":907,"title":908,"titles":909,"content":910,"level":45},"/documentation/reference/tairo/content-wrapper#tabbed-wrapper","Tabbed wrapper",[892,591],"The tabbed wrapper wraps the page content. It provides slots and allows you to nest a second view inside your page.",{"id":912,"title":332,"titles":913,"content":9,"level":16},"/documentation/reference/tairo/content-wrapper#components",[892],{"id":915,"title":916,"titles":917,"content":9,"level":45},"/documentation/reference/tairo/content-wrapper#tairocontentwrapper","TairoContentWrapper",[892,332],{"id":919,"title":920,"titles":921,"content":9,"level":45},"/documentation/reference/tairo/content-wrapper#tairocontentwrappertabbed","TairoContentWrapperTabbed",[892,332],{"id":923,"title":924,"titles":925,"content":926,"level":10},"/documentation/reference/tairo/flex-table","Flex table",[],"Flex tables are an alternative way to display tabular data. They behave responsively on smaller screens.",{"id":928,"title":929,"titles":930,"content":926,"level":10},"/documentation/reference/tairo/flex-table#flex-table","Flex Table",[],{"id":932,"title":933,"titles":934,"content":9,"level":16},"/documentation/reference/tairo/flex-table#rounded-examples","Rounded examples",[929],{"id":936,"title":937,"titles":938,"content":939,"level":45},"/documentation/reference/tairo/flex-table#roundednone","Rounded:none",[929,933],"Flex tables can have different radius factors. Use the rounded prop to change the radius of the table. This example uses the none radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoFlexTable>\n \u003Ctemplate #header>\n \u003CTairoFlexTableHeading type=\"shrink\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"none\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"grow\">\n Member\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Expertise\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Rate\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Status\n \u003C/TairoFlexTableHeading>\n \u003C/template>\n\n \u003CTairoFlexTableRow\n v-for=\"member in team\"\n :key=\"member.id\"\n rounded=\"none\"\n >\n \u003CTairoFlexTableCell type=\"shrink\" data-content=\"Selection\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`checkbox-${member.id}`\"\n rounded=\"none\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"grow\" data-content=\"Member\">\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003CBaseAvatar :src=\"member.src\" size=\"xs\" />\n\n \u003Cdiv class=\"leading-none\">\n \u003Ch4 class=\"font-sans text-sm font-medium leading-tight\">\n {{ member.name }}\n \u003C/h4>\n\n \u003Cp class=\"text-muted-600 dark:text-muted-400 font-sans text-xs font-normal\">\n {{ member.role }}\n \u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell\n type=\"stable\"\n data-content=\"Expertise\"\n light\n >\n {{ member.expertise }}\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"stable\" data-content=\"Rate\">\n \u003Cspan class=\"font-medium\">${{ member.rate }}/hour\u003C/span>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"stable\" data-content=\"Status\">\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoFlexTableCell>\n \u003C/TairoFlexTableRow>\n \u003C/TairoFlexTable>\n\u003C/template>",{"id":941,"title":942,"titles":943,"content":944,"level":45},"/documentation/reference/tairo/flex-table#roundedsm","Rounded:sm",[929,933],"Flex tables can have different radius factors. Use the rounded prop to change the radius of the table. This example uses the sm radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoFlexTable>\n \u003Ctemplate #header>\n \u003CTairoFlexTableHeading type=\"shrink\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"sm\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"grow\">\n Member\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Expertise\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Rate\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Status\n \u003C/TairoFlexTableHeading>\n \u003C/template>\n\n \u003CTairoFlexTableRow\n v-for=\"member in team\"\n :key=\"member.id\"\n rounded=\"sm\"\n >\n \u003CTairoFlexTableCell type=\"shrink\" data-content=\"Selection\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`checkbox-${member.id}`\"\n rounded=\"sm\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"grow\" data-content=\"Member\">\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003CBaseAvatar :src=\"member.src\" size=\"xs\" />\n\n \u003Cdiv class=\"leading-none\">\n \u003Ch4 class=\"font-sans text-sm font-medium leading-tight\">\n {{ member.name }}\n \u003C/h4>\n\n \u003Cp class=\"text-muted-600 dark:text-muted-400 font-sans text-xs font-normal\">\n {{ member.role }}\n \u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell\n type=\"stable\"\n data-content=\"Expertise\"\n light\n >\n {{ member.expertise }}\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"stable\" data-content=\"Rate\">\n \u003Cspan class=\"font-medium\">${{ member.rate }}/hour\u003C/span>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"stable\" data-content=\"Status\">\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoFlexTableCell>\n \u003C/TairoFlexTableRow>\n \u003C/TairoFlexTable>\n\u003C/template>",{"id":946,"title":947,"titles":948,"content":949,"level":45},"/documentation/reference/tairo/flex-table#roundedmd","Rounded:md",[929,933],"Flex tables can have different radius factors. Use the rounded prop to change the radius of the table. This example uses the md radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoFlexTable>\n \u003Ctemplate #header>\n \u003CTairoFlexTableHeading type=\"shrink\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"md\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"grow\">\n Member\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Expertise\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Rate\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Status\n \u003C/TairoFlexTableHeading>\n \u003C/template>\n\n \u003CTairoFlexTableRow\n v-for=\"member in team\"\n :key=\"member.id\"\n rounded=\"md\"\n >\n \u003CTairoFlexTableCell type=\"shrink\" data-content=\"Selection\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`checkbox-${member.id}`\"\n rounded=\"md\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"grow\" data-content=\"Member\">\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003CBaseAvatar :src=\"member.src\" size=\"xs\" />\n\n \u003Cdiv class=\"leading-none\">\n \u003Ch4 class=\"font-sans text-sm font-medium leading-tight\">\n {{ member.name }}\n \u003C/h4>\n\n \u003Cp class=\"text-muted-600 dark:text-muted-400 font-sans text-xs font-normal\">\n {{ member.role }}\n \u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell\n type=\"stable\"\n data-content=\"Expertise\"\n light\n >\n {{ member.expertise }}\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"stable\" data-content=\"Rate\">\n \u003Cspan class=\"font-medium\">${{ member.rate }}/hour\u003C/span>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"stable\" data-content=\"Status\">\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoFlexTableCell>\n \u003C/TairoFlexTableRow>\n \u003C/TairoFlexTable>\n\u003C/template>",{"id":951,"title":952,"titles":953,"content":954,"level":45},"/documentation/reference/tairo/flex-table#roundedlg","Rounded:lg",[929,933],"Flex tables can have different radius factors. Use the rounded prop to change the radius of the table. This example uses the lg radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoFlexTable>\n \u003Ctemplate #header>\n \u003CTairoFlexTableHeading type=\"shrink\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"lg\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"grow\">\n Member\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Expertise\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Rate\n \u003C/TairoFlexTableHeading>\n\n \u003CTairoFlexTableHeading type=\"stable\">\n Status\n \u003C/TairoFlexTableHeading>\n \u003C/template>\n\n \u003CTairoFlexTableRow\n v-for=\"member in team\"\n :key=\"member.id\"\n rounded=\"lg\"\n >\n \u003CTairoFlexTableCell type=\"shrink\" data-content=\"Selection\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`checkbox-${member.id}`\"\n rounded=\"lg\"\n class=\"text-primary-500\"\n />\n \u003C/div>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"grow\" data-content=\"Member\">\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003CBaseAvatar :src=\"member.src\" size=\"xs\" />\n\n \u003Cdiv class=\"leading-none\">\n \u003Ch4 class=\"font-sans text-sm font-medium leading-tight\">\n {{ member.name }}\n \u003C/h4>\n\n \u003Cp class=\"text-muted-600 dark:text-muted-400 font-sans text-xs font-normal\">\n {{ member.role }}\n \u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell\n type=\"stable\"\n data-content=\"Expertise\"\n light\n >\n {{ member.expertise }}\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"stable\" data-content=\"Rate\">\n \u003Cspan class=\"font-medium\">${{ member.rate }}/hour\u003C/span>\n \u003C/TairoFlexTableCell>\n\n \u003CTairoFlexTableCell type=\"stable\" data-content=\"Status\">\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoFlexTableCell>\n \u003C/TairoFlexTableRow>\n \u003C/TairoFlexTable>\n\u003C/template>",{"id":956,"title":332,"titles":957,"content":9,"level":16},"/documentation/reference/tairo/flex-table#components",[929],{"id":959,"title":960,"titles":961,"content":9,"level":45},"/documentation/reference/tairo/flex-table#tairoflextable","TairoFlexTable",[929,332],{"id":963,"title":964,"titles":965,"content":9,"level":45},"/documentation/reference/tairo/flex-table#tairoflextableheading","TairoFlexTableHeading",[929,332],{"id":967,"title":968,"titles":969,"content":9,"level":45},"/documentation/reference/tairo/flex-table#tairoflextablerow","TairoFlexTableRow",[929,332],{"id":971,"title":972,"titles":973,"content":868,"level":45},"/documentation/reference/tairo/flex-table#tairoflextablecell","TairoFlexTableCell",[929,332],{"id":975,"title":976,"titles":977,"content":978,"level":10},"/documentation/reference/tairo/form-group","Form group",[],"Tairo form groups are used to hold some form elements together. They are used to show a label and a description for a group of form elements.",{"id":980,"title":981,"titles":982,"content":983,"level":10},"/documentation/reference/tairo/form-group#form-group","Form Group",[],"Use the form group component to hold some form elements together. It is used to show a label and a description for a group of form elements. The form group component is root is an HTML \u003Cfieldset /> element.",{"id":985,"title":591,"titles":986,"content":987,"level":16},"/documentation/reference/tairo/form-group#example",[981],"\u003Cscript setup lang=\"ts\">\nconst firstName = ref('')\nconst lastName = ref('')\nconst email = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-md\">\n \u003Cform\n action=\"\"\n method=\"POST\"\n @submit.prevent\n >\n \u003CTairoFormGroup label=\"Who are you?\" sublabel=\"Let us know your name\">\n \u003Cdiv class=\"grid grid-cols-12 gap-3\">\n \u003Cdiv class=\"col-span-12 sm:col-span-6\">\n \u003CBaseInput\n v-model=\"firstName\"\n label=\"First Name\"\n placeholder=\"Ex: Emily\"\n />\n \u003C/div>\n\n \u003Cdiv class=\"col-span-12 sm:col-span-6\">\n \u003CBaseInput\n v-model=\"lastName\"\n label=\"Last Name\"\n placeholder=\"Ex: Walters\"\n />\n \u003C/div>\n\n \u003Cdiv class=\"col-span-12\">\n \u003CBaseInput\n v-model=\"email\"\n label=\"Email Address\"\n placeholder=\"Ex: emilywalters@gmail.com\"\n />\n \u003C/div>\n \u003C/div>\n \u003C/TairoFormGroup>\n \u003C/form>\n \u003C/div>\n\u003C/template>",{"id":989,"title":332,"titles":990,"content":9,"level":16},"/documentation/reference/tairo/form-group#components",[981],{"id":992,"title":993,"titles":994,"content":868,"level":45},"/documentation/reference/tairo/form-group#tairoformgroup","TairoFormGroup",[981,332],{"id":996,"title":997,"titles":998,"content":999,"level":10},"/documentation/reference/tairo/form-save","Form save",[],"Tairo form save is a customizable set of fixed buttons that are used to save or cancel a form.",{"id":1001,"title":997,"titles":1002,"content":1003,"level":10},"/documentation/reference/tairo/form-save#form-save",[],"Display floating submit and reset button when users scroll. Wrap this component in a \u003Cform> element or use the #default slot to insert your own component",{"id":1005,"title":591,"titles":1006,"content":1007,"level":16},"/documentation/reference/tairo/form-save#example",[997],"\u003Cscript setup lang=\"ts\">\nconst firstName = ref('')\nconst lastName = ref('')\nconst email = ref('')\nconst country = ref\u003Cstring>()\nconst address = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-md\">\n \u003Cform\n action=\"\"\n method=\"POST\"\n class=\"space-y-10\"\n @submit.prevent\n >\n \u003CTairoFormGroup label=\"Who are you?\" sublabel=\"Let us know your name\">\n \u003Cdiv class=\"grid grid-cols-12 gap-3\">\n \u003Cdiv class=\"col-span-12 sm:col-span-6\">\n \u003CBaseInput\n v-model=\"firstName\"\n label=\"First Name\"\n placeholder=\"Ex: Emily\"\n />\n \u003C/div>\n\n \u003Cdiv class=\"col-span-12 sm:col-span-6\">\n \u003CBaseInput\n v-model=\"lastName\"\n label=\"Last Name\"\n placeholder=\"Ex: Walters\"\n />\n \u003C/div>\n\n \u003Cdiv class=\"col-span-12\">\n \u003CBaseInput\n v-model=\"email\"\n label=\"Email Address\"\n placeholder=\"Ex: emilywalters@gmail.com\"\n />\n \u003C/div>\n \u003C/div>\n \u003C/TairoFormGroup>\n\n \u003CTairoFormGroup label=\"Where do you live?\" sublabel=\"Let us know your location\">\n \u003Cdiv class=\"grid grid-cols-12 gap-3\">\n \u003Cdiv class=\"col-span-12 sm:col-span-6\">\n \u003CBaseSelect v-model=\"country\" label=\"Country\">\n \u003CBaseSelectItem value=\"italy\">\n United States\n \u003C/BaseSelectItem>\n\n \u003CBaseSelectItem value=\"italy\">\n Italy\n \u003C/BaseSelectItem>\n\n \u003CBaseSelectItem value=\"france\">\n France\n \u003C/BaseSelectItem>\n\n \u003CBaseSelectItem value=\"spain\">\n Spain\n \u003C/BaseSelectItem>\n\n \u003CBaseSelectItem value=\"germany\">\n Germany\n \u003C/BaseSelectItem>\n\n \u003CBaseSelectItem value=\"portugal\">\n China\n \u003C/BaseSelectItem>\n \u003C/BaseSelect>\n \u003C/div>\n\n \u003Cdiv class=\"col-span-12 sm:col-span-6\">\n \u003CBaseInput\n v-model=\"lastName\"\n label=\"City\"\n placeholder=\"Ex: Milano\"\n />\n \u003C/div>\n\n \u003Cdiv class=\"col-span-12\">\n \u003CBaseInput\n v-model=\"address\"\n label=\"Address\"\n placeholder=\"Ex: 23, Plaza de la República, 28001\"\n />\n \u003C/div>\n \u003C/div>\n \u003C/TairoFormGroup>\n\n \u003CTairoFormSave />\n \u003C/form>\n \u003C/div>\n\u003C/template>",{"id":1009,"title":332,"titles":1010,"content":9,"level":16},"/documentation/reference/tairo/form-save#components",[997],{"id":1012,"title":1013,"titles":1014,"content":868,"level":45},"/documentation/reference/tairo/form-save#tairoformsave","TairoFormSave",[997,332],{"id":1016,"title":1017,"titles":1018,"content":1019,"level":10},"/documentation/reference/tairo/input","Input",[],"Enhanced input component with icon support, improved styling, and seamless integration with form validation",{"id":1021,"title":1017,"titles":1022,"content":1023,"level":10},"/documentation/reference/tairo/input#input",[],"TairoInput is an enhanced version of the Shuriken UI input component that provides built-in icon support.",{"id":1025,"title":591,"titles":1026,"content":1027,"level":16},"/documentation/reference/tairo/input#example",[1017],"\u003Cscript setup lang=\"ts\">\nconst value = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseField label=\"Username\">\n \u003CTairoInput v-model=\"value\" icon=\"solar:user-linear\" />\n \u003C/BaseField>\n\u003C/template>",{"id":1029,"title":332,"titles":1030,"content":9,"level":16},"/documentation/reference/tairo/input#components",[1017],{"id":1032,"title":1033,"titles":1034,"content":868,"level":45},"/documentation/reference/tairo/input#tairoinput","TairoInput",[1017,332],{"id":1036,"title":1037,"titles":1038,"content":1039,"level":10},"/documentation/reference/tairo/menu","Menu",[],"Mega menu component",{"id":1041,"title":1042,"titles":1043,"content":1044,"level":10},"/documentation/reference/tairo/menu#navigation-menu","Navigation Menu",[],"The TairoMenu component is a versatile navigation menu that provides a range of features and styling options. It's built on top of Reka UI's NavigationMenu component and extends its functionality with additional components and styling.",{"id":1046,"title":591,"titles":1047,"content":1048,"level":16},"/documentation/reference/tairo/menu#example",[1042],"\u003Ctemplate>\n \u003CTairoMenu>\n \u003CTairoMenuList class=\"flex-col lg:flex-row\">\n \u003CTairoMenuItem>\n \u003CTairoMenuLink as-child>\n \u003CNuxtLink to=\"/demos\" active-class=\"text-primary-500\">\n Prebuilt pages\n \u003C/NuxtLink>\n \u003C/TairoMenuLink>\n \u003C/TairoMenuItem>\n\n \u003CTairoMenuItem>\n \u003CTairoMenuLink as-child>\n \u003CNuxtLink to=\"/documentation\" active-class=\"text-primary-500\">\n Documentation\n \u003C/NuxtLink>\n \u003C/TairoMenuLink>\n \u003C/TairoMenuItem>\n\n \u003CTairoMenuItem>\n \u003CTairoMenuTrigger>\n \u003Cspan>Featured\u003C/span>\n \u003CIcon\n name=\"lucide:chevron-down\"\n class=\"transition-transform duration-200 ease-in group-data-[state=open]:-rotate-180\"\n />\n \u003C/TairoMenuTrigger>\n \u003CTairoMenuContent>\n \u003CTairoMenuListItems\n class=\"m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px]\"\n >\n \u003Cli class=\"row-span-3 grid\">\n \u003Cdiv\n class=\"grid sm:grid-cols-5 gap-4\"\n >\n \u003Cdiv class=\"hidden sm:block sm:col-span-2\">\n \u003Cdiv class=\"flex flex-col justify-end h-full w-full bg-primary-950 rounded-xl p-4\">\n \u003Cdiv>\n \u003CTairoLogo class=\"size-10 text-white mb-3\" />\n \u003CBaseHeading class=\"text-white mb-2\">\n Amazing UI\n \u003C/BaseHeading>\n \u003CBaseParagraph size=\"xs\" class=\"max-w-[260px] text-white\">\n Build high-quality, accessible design systems and web apps.\n \u003C/BaseParagraph>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"sm:col-span-3 flex flex-col justify-between\">\n \u003CTairoMenuLink as-child>\n \u003CNuxtLink to=\"/layouts\">\n \u003CBaseHeading size=\"sm\" weight=\"medium\" class=\"text-muted-900 dark:text-white in-[.router-link-exact-active]:text-primary-500\">\n Design System\n \u003C/BaseHeading>\n \u003CBaseParagraph size=\"sm\" class=\"max-w-[260px] text-muted-600 dark:text-muted-400\">\n Create your design system with a set of consistent design patterns.\n \u003C/BaseParagraph>\n \u003C/NuxtLink>\n \u003C/TairoMenuLink>\n \u003CTairoMenuLink>\n \u003CNuxtLink to=\"/layouts/projects\">\n \u003CBaseHeading size=\"sm\" weight=\"medium\" class=\"text-muted-900 dark:text-white in-[.router-link-exact-active]:text-primary-500\">\n Amazing UI\n \u003C/BaseHeading>\n \u003CBaseParagraph size=\"sm\" class=\"max-w-[260px] text-muted-600 dark:text-muted-400\">\n Build high-quality, accessible design systems and web apps.\n \u003C/BaseParagraph>\n \u003C/NuxtLink>\n \u003C/TairoMenuLink>\n \u003CTairoMenuLink as-child>\n \u003CNuxtLink to=\"#\">\n \u003CBaseHeading size=\"sm\" weight=\"medium\" class=\"text-muted-900 dark:text-white in-[.router-link-exact-active]:text-primary-500\">\n Amazing UI\n \u003C/BaseHeading>\n \u003CBaseParagraph size=\"sm\" class=\"max-w-[260px] text-muted-600 dark:text-muted-400\">\n Build high-quality, accessible design systems and web apps.\n \u003C/BaseParagraph>\n \u003C/NuxtLink>\n \u003C/TairoMenuLink>\n \u003C/div>\n \u003C/div>\n \u003C/li>\n \u003C/TairoMenuListItems>\n \u003C/TairoMenuContent>\n \u003C/TairoMenuItem>\n \u003C/TairoMenuList>\n\n \u003Cdiv\n class=\"absolute top-full start-0 flex w-full mt-[10px] z-50\"\n >\n \u003CTairoMenuViewport />\n \u003C/div>\n \u003C/TairoMenu>\n\u003C/template>",{"id":1050,"title":332,"titles":1051,"content":9,"level":16},"/documentation/reference/tairo/menu#components",[1042],{"id":1053,"title":1054,"titles":1055,"content":9,"level":45},"/documentation/reference/tairo/menu#tairomenu","TairoMenu",[1042,332],{"id":1057,"title":1058,"titles":1059,"content":9,"level":45},"/documentation/reference/tairo/menu#tairomenucontent","TairoMenuContent",[1042,332],{"id":1061,"title":1062,"titles":1063,"content":9,"level":45},"/documentation/reference/tairo/menu#tairomenuindicator","TairoMenuIndicator",[1042,332],{"id":1065,"title":1066,"titles":1067,"content":9,"level":45},"/documentation/reference/tairo/menu#tairomenuitem","TairoMenuItem",[1042,332],{"id":1069,"title":1070,"titles":1071,"content":9,"level":45},"/documentation/reference/tairo/menu#tairomenulink","TairoMenuLink",[1042,332],{"id":1073,"title":1074,"titles":1075,"content":9,"level":45},"/documentation/reference/tairo/menu#tairomenulinktab","TairoMenuLinkTab",[1042,332],{"id":1077,"title":1078,"titles":1079,"content":9,"level":45},"/documentation/reference/tairo/menu#tairomenulist","TairoMenuList",[1042,332],{"id":1081,"title":1082,"titles":1083,"content":9,"level":45},"/documentation/reference/tairo/menu#tairomenulistitems","TairoMenuListItems",[1042,332],{"id":1085,"title":1086,"titles":1087,"content":9,"level":45},"/documentation/reference/tairo/menu#tairomenutrigger","TairoMenuTrigger",[1042,332],{"id":1089,"title":1090,"titles":1091,"content":846,"level":45},"/documentation/reference/tairo/menu#tairomenuviewport","TairoMenuViewport",[1042,332],{"id":1093,"title":1094,"titles":1095,"content":1096,"level":10},"/documentation/reference/tairo/mobile-drawer","Mobile drawer",[],"Mobile navigation drawer component",{"id":1098,"title":1099,"titles":1100,"content":1101,"level":10},"/documentation/reference/tairo/mobile-drawer#mobile-drawer","Mobile Drawer",[],"The TairoMobileDrawer component is a drawer component that is designed to be used on mobile devices.",{"id":1103,"title":591,"titles":1104,"content":1105,"level":16},"/documentation/reference/tairo/mobile-drawer#example",[1099],"\u003Cscript setup lang=\"ts\">\nconst isOpen = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBaseButton @click=\"isOpen = true\">\n Open\n \u003C/BaseButton>\n \u003CTairoMobileDrawer v-model=\"isOpen\">\n \u003Cdiv class=\"space-y-3 min-h-[40dvh]\">\n \u003Cul class=\"font-sans text-lg space-y-2\">\n \u003Cli>\n \u003CNuxtLink\n to=\"/\"\n class=\"text-muted-600 dark:text-muted-400 underline-offset-8\"\n exact-active-class=\"underline font-medium text-muted-900! dark:text-white!\"\n >\n Home\n \u003C/NuxtLink>\n \u003C/li>\n \u003Cli>\n \u003CNuxtLink\n to=\"/documentation\"\n class=\"text-muted-600 dark:text-muted-400 underline-offset-8\"\n exact-active-class=\"underline font-medium text-muted-900! dark:text-white!\"\n >\n Documentation\n \u003C/NuxtLink>\n \u003C/li>\n \u003C/ul>\n \u003C/div>\n \u003C/TairoMobileDrawer>\n \u003C/div>\n\u003C/template>",{"id":1107,"title":332,"titles":1108,"content":9,"level":16},"/documentation/reference/tairo/mobile-drawer#components",[1099],{"id":1110,"title":1111,"titles":1112,"content":868,"level":45},"/documentation/reference/tairo/mobile-drawer#tairomobiledrawer","TairoMobileDrawer",[1099,332],{"id":1114,"title":1115,"titles":1116,"content":1117,"level":10},"/documentation/reference/tairo/radio-card","Radio Card",[],"A customizable radio input component with rich styling options, built on top of Reka UI's RadioGroupItem",{"id":1119,"title":1115,"titles":1120,"content":1121,"level":10},"/documentation/reference/tairo/radio-card#radio-card",[],"The TairoRadioCard component is a versatile radio input that combines the functionality of a radio button with the visual appeal of a card. It's built on top of Reka UI's RadioGroupItem and provides additional styling options through Shuriken UI's design system.",{"id":1123,"title":591,"titles":1124,"content":1125,"level":16},"/documentation/reference/tairo/radio-card#example",[1115],"\u003Cscript setup lang=\"ts\">\nconst value = ref('team_member_1')\n\u003C/script>\n\n\u003Ctemplate>\n \u003CBaseField label=\"Company type\">\n \u003CBaseRadioGroup\n v-model=\"value\"\n class=\"grid gap-4 lg:grid-cols-3\"\n >\n \u003CTairoRadioCard\n value=\"team_member_1\"\n icon=\"solar:home-2-linear\"\n label=\"Solo\"\n subtitle=\"Small company\"\n variant=\"muted\"\n />\n \u003CTairoRadioCard\n value=\"team_member_2\"\n icon=\"solar:shop-linear\"\n label=\"LLC\"\n subtitle=\"Medium company\"\n variant=\"muted\"\n />\n \u003CTairoRadioCard\n value=\"team_member_3\"\n icon=\"solar:buildings-linear\"\n label=\"Corp\"\n subtitle=\"Bigger company\"\n variant=\"muted\"\n />\n \u003C/BaseRadioGroup>\n \u003C/BaseField>\n\u003C/template>",{"id":1127,"title":332,"titles":1128,"content":9,"level":16},"/documentation/reference/tairo/radio-card#components",[1115],{"id":1130,"title":1131,"titles":1132,"content":868,"level":45},"/documentation/reference/tairo/radio-card#tairoradiocard","TairoRadioCard",[1115,332],{"id":1134,"title":1135,"titles":1136,"content":1137,"level":10},"/documentation/reference/tairo/select","Select",[],"Enhanced select components with icon support, media preview, and improved styling for better user experience",{"id":1139,"title":1135,"titles":1140,"content":1141,"level":10},"/documentation/reference/tairo/select#select",[],"TairoSelect and TairoSelectItem are enhanced versions of Shuriken UI's select components, offering additional features and improved styling.",{"id":1143,"title":591,"titles":1144,"content":1145,"level":16},"/documentation/reference/tairo/select#example",[1135],"\u003Cscript setup lang=\"ts\">\nconst banks = [\n {\n id: 1,\n name: 'X Bank',\n text: 'checking **** **** 0499',\n icon: 'solar:banknote-2-linear',\n },\n {\n id: 2,\n name: 'Bankaria',\n text: 'checking **** **** 1548',\n icon: 'solar:cash-out-linear',\n },\n {\n id: 3,\n name: 'Bankus',\n text: 'checking **** **** 8448',\n icon: 'solar:course-up-outline',\n },\n]\n\nconst value = ref('Surgery')\nconst bank = ref(banks[0])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"grid gap-4 grid-cols-1 sm:grid-cols-2\">\n \u003CBaseField label=\"Select a speciality\">\n \u003CTairoSelect\n v-model=\"value\"\n icon=\"solar:dropper-3-linear\"\n >\n \u003CBaseSelectItem value=\"Surgery\">\n Surgery\n \u003C/BaseSelectItem>\n \u003CBaseSelectItem value=\"Cardiology\">\n Cardiology\n \u003C/BaseSelectItem>\n \u003CBaseSelectItem value=\"Pediatry\">\n Pediatry\n \u003C/BaseSelectItem>\n \u003CBaseSelectItem value=\"Dermatology\">\n Dermatology\n \u003C/BaseSelectItem>\n \u003CBaseSelectItem value=\"Traumatology\">\n Traumatology\n \u003C/BaseSelectItem>\n \u003C/TairoSelect>\n \u003C/BaseField>\n\n \u003CBaseField label=\"Select an account\">\n \u003CTairoSelect\n v-model=\"bank\"\n :icon=\"bank?.icon || 'solar:dropper-3-linear'\"\n >\n \u003CTairoSelectItem\n v-for=\"item in banks\"\n :key=\"item.id\"\n :value=\"item\"\n :icon=\"item.icon\"\n :name=\"item.name\"\n :text=\"item.text\"\n />\n \u003C/TairoSelect>\n \u003C/BaseField>\n \u003C/div>\n\u003C/template>",{"id":1147,"title":332,"titles":1148,"content":9,"level":16},"/documentation/reference/tairo/select#components",[1135],{"id":1150,"title":1151,"titles":1152,"content":9,"level":45},"/documentation/reference/tairo/select#tairoselect","TairoSelect",[1135,332],{"id":1154,"title":1155,"titles":1156,"content":868,"level":45},"/documentation/reference/tairo/select#tairoselectitem","TairoSelectItem",[1135,332],{"id":1158,"title":1159,"titles":1160,"content":1161,"level":10},"/documentation/reference/tairo/table","Table",[],"Tairo tables are a quick shortcut to render lists and collections using the native HTML5 table element.",{"id":1163,"title":1159,"titles":1164,"content":1165,"level":10},"/documentation/reference/tairo/table#table",[],"Tables are a quick way to display lists and collections using the native HTML5 table element.",{"id":1167,"title":933,"titles":1168,"content":9,"level":16},"/documentation/reference/tairo/table#rounded-examples",[1159],{"id":1170,"title":937,"titles":1171,"content":1172,"level":45},"/documentation/reference/tairo/table#roundednone",[1159,933],"Tables can have different radius factors. Use the rounded prop to change the table's radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoTable rounded=\"none\">\n \u003Ctemplate #header>\n \u003CTairoTableHeading uppercase class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"none\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Collaborator\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Expertise\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Rate\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Status\n \u003C/TairoTableHeading>\n \u003C/template>\n\n \u003CTairoTableRow v-for=\"member in team\" :key=\"member.id\">\n \u003CTairoTableCell class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`table-1-${member.id}`\"\n rounded=\"none\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n {{ member.name }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell light>\n {{ member.expertise }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>${{ member.rate }}/hour\u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoTableCell>\n \u003C/TairoTableRow>\n \u003C/TairoTable>\n\u003C/template>",{"id":1174,"title":942,"titles":1175,"content":1176,"level":45},"/documentation/reference/tairo/table#roundedsm",[1159,933],"Tables can have different radius factors. Use the rounded prop to change the table's radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoTable rounded=\"sm\">\n \u003Ctemplate #header>\n \u003CTairoTableHeading uppercase class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"sm\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Collaborator\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Expertise\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Rate\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Status\n \u003C/TairoTableHeading>\n \u003C/template>\n\n \u003CTairoTableRow v-for=\"member in team\" :key=\"member.id\">\n \u003CTairoTableCell class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`table-2-${member.id}`\"\n rounded=\"sm\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n {{ member.name }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell light>\n {{ member.expertise }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>${{ member.rate }}/hour\u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoTableCell>\n \u003C/TairoTableRow>\n \u003C/TairoTable>\n\u003C/template>",{"id":1178,"title":947,"titles":1179,"content":1180,"level":45},"/documentation/reference/tairo/table#roundedmd",[1159,933],"Tables can have different radius factors. Use the rounded prop to change the table's radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoTable rounded=\"md\">\n \u003Ctemplate #header>\n \u003CTairoTableHeading uppercase class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"md\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Collaborator\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Expertise\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Rate\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Status\n \u003C/TairoTableHeading>\n \u003C/template>\n\n \u003CTairoTableRow v-for=\"member in team\" :key=\"member.id\">\n \u003CTairoTableCell class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`table-2-${member.id}`\"\n rounded=\"md\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n {{ member.name }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell light>\n {{ member.expertise }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>${{ member.rate }}/hour\u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoTableCell>\n \u003C/TairoTableRow>\n \u003C/TairoTable>\n\u003C/template>",{"id":1182,"title":952,"titles":1183,"content":1184,"level":45},"/documentation/reference/tairo/table#roundedlg",[1159,933],"Tables can have different radius factors. Use the rounded prop to change the table's radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoTable rounded=\"lg\">\n \u003Ctemplate #header>\n \u003CTairoTableHeading uppercase class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"lg\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Collaborator\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Expertise\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Rate\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Status\n \u003C/TairoTableHeading>\n \u003C/template>\n\n \u003CTairoTableRow v-for=\"member in team\" :key=\"member.id\">\n \u003CTairoTableCell class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`table-6-${member.id}`\"\n rounded=\"lg\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n {{ member.name }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell light>\n {{ member.expertise }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>${{ member.rate }}/hour\u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoTableCell>\n \u003C/TairoTableRow>\n \u003C/TairoTable>\n\u003C/template>",{"id":1186,"title":1187,"titles":1188,"content":9,"level":16},"/documentation/reference/tairo/table#media-examples","Media examples",[1159],{"id":1190,"title":1191,"titles":1192,"content":1193,"level":45},"/documentation/reference/tairo/table#medianone","Media:none",[1159,1187],"Tables can have different radius factors. Use the rounded prop to change the table's radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoTable rounded=\"none\">\n \u003Ctemplate #header>\n \u003CTairoTableHeading uppercase class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"none\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Collaborator\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Expertise\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Rate\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Status\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase class=\"p-4\">\n \u003Cspan class=\"sr-only\">View\u003C/span>\n \u003C/TairoTableHeading>\n \u003C/template>\n\n \u003CTairoTableRow v-for=\"member in team\" :key=\"member.id\">\n \u003CTairoTableCell class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`table-3-${member.id}`\"\n rounded=\"none\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003Cdiv class=\"flex gap-2 items-center\">\n \u003CBaseAvatar :src=\"member.src\" size=\"xs\" />\n\n \u003Cdiv class=\"leading-none\">\n \u003Cp class=\"font-sans text-sm font-medium leading-tight\">\n {{ member.name }}\n \u003C/p>\n\n \u003Cp class=\"text-muted-600 dark:text-muted-400 font-sans text-xs font-normal\">\n {{ member.role }}\n \u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell light>\n {{ member.expertise }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>${{ member.rate }}/hour\u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoTableCell>\n \u003C/TairoTableRow>\n \u003C/TairoTable>\n\u003C/template>",{"id":1195,"title":1196,"titles":1197,"content":1198,"level":45},"/documentation/reference/tairo/table#mediasm","Media:sm",[1159,1187],"Tables can have different radius factors. Use the rounded prop to change the table's radius. \u003Cscript setup lang=\"ts\">\nconst selected = ref([])\nconst selectAll = ref(false)\n\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoTable rounded=\"sm\">\n \u003Ctemplate #header>\n \u003CTairoTableHeading uppercase class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n v-model=\"selectAll\"\n rounded=\"sm\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Collaborator\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Expertise\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Rate\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Status\n \u003C/TairoTableHeading>\n \u003C/template>\n\n \u003CTairoTableRow v-for=\"member in team\" :key=\"member.id\">\n \u003CTairoTableCell class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`table-4-${member.id}`\"\n rounded=\"sm\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003Cdiv class=\"flex gap-2 items-center\">\n \u003CBaseAvatar :src=\"member.src\" size=\"xs\" />\n\n \u003Cdiv class=\"leading-none\">\n \u003Cp class=\"font-sans text-sm font-medium leading-tight\">\n {{ member.name }}\n \u003C/p>\n\n \u003Cp class=\"text-muted-600 dark:text-muted-400 font-sans text-xs font-normal\">\n {{ member.role }}\n \u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell light>\n {{ member.expertise }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>${{ member.rate }}/hour\u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoTableCell>\n \u003C/TairoTableRow>\n \u003C/TairoTable>\n\u003C/template>",{"id":1200,"title":1201,"titles":1202,"content":1203,"level":45},"/documentation/reference/tairo/table#mediamd","Media:md",[1159,1187],"Tables can have different radius factors. Use the rounded prop to change the table's radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoTable rounded=\"md\">\n \u003Ctemplate #header>\n \u003CTairoTableHeading uppercase class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"md\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Collaborator\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Expertise\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Rate\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Status\n \u003C/TairoTableHeading>\n \u003C/template>\n\n \u003CTairoTableRow v-for=\"member in team\" :key=\"member.id\">\n \u003CTairoTableCell class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`table-4-${member.id}`\"\n rounded=\"md\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003Cdiv class=\"flex gap-2 items-center\">\n \u003CBaseAvatar :src=\"member.src\" size=\"xs\" />\n\n \u003Cdiv class=\"leading-none\">\n \u003Cp class=\"font-sans text-sm font-medium leading-tight\">\n {{ member.name }}\n \u003C/p>\n\n \u003Cp class=\"text-muted-600 dark:text-muted-400 font-sans text-xs font-normal\">\n {{ member.role }}\n \u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell light>\n {{ member.expertise }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>${{ member.rate }}/hour\u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoTableCell>\n \u003C/TairoTableRow>\n \u003C/TairoTable>\n\u003C/template>",{"id":1205,"title":1206,"titles":1207,"content":1208,"level":45},"/documentation/reference/tairo/table#medialg","Media:lg",[1159,1187],"Tables can have different radius factors. Use the rounded prop to change the table's radius. \u003Cscript setup lang=\"ts\">\nconst team = [\n {\n id: 0,\n src: '/img/avatars/22.svg',\n name: 'Anna Vrinkof',\n role: 'UI/UX designer',\n expertise: 'UX Design',\n rate: 49,\n status: 'Available',\n },\n {\n id: 1,\n src: '/img/avatars/3.svg',\n name: 'John Cambell',\n role: 'Sales manager',\n expertise: 'Management',\n rate: 74,\n status: 'Hired',\n },\n {\n id: 2,\n src: '/img/avatars/9.svg',\n name: 'Beth Delanoe',\n role: 'Product designer',\n expertise: 'Product',\n rate: 43,\n status: 'Available',\n },\n {\n id: 3,\n src: '/img/avatars/14.svg',\n name: 'Andrew Higgs',\n role: 'Project manager',\n expertise: 'Project',\n rate: 69,\n status: 'New',\n },\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTairoTable rounded=\"lg\">\n \u003Ctemplate #header>\n \u003CTairoTableHeading uppercase class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n rounded=\"lg\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Collaborator\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Expertise\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Rate\n \u003C/TairoTableHeading>\n\n \u003CTairoTableHeading uppercase>\n Status\n \u003C/TairoTableHeading>\n \u003C/template>\n\n \u003CTairoTableRow v-for=\"member in team\" :key=\"member.id\">\n \u003CTairoTableCell class=\"p-4\">\n \u003Cdiv class=\"flex items-center\">\n \u003CBaseCheckbox\n :value=\"`table-5-${member.id}`\"\n rounded=\"lg\"\n color=\"primary\"\n />\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003Cdiv class=\"flex gap-2 items-center\">\n \u003CBaseAvatar :src=\"member.src\" size=\"xs\" />\n\n \u003Cdiv class=\"leading-none\">\n \u003Cp class=\"font-sans text-sm font-medium leading-tight\">\n {{ member.name }}\n \u003C/p>\n\n \u003Cp class=\"text-muted-600 dark:text-muted-400 font-sans text-xs font-normal\">\n {{ member.role }}\n \u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell light>\n {{ member.expertise }}\n \u003C/TairoTableCell>\n\n \u003CTairoTableCell>${{ member.rate }}/hour\u003C/TairoTableCell>\n\n \u003CTairoTableCell>\n \u003CBaseTag\n rounded=\"full\"\n class=\"font-medium\"\n >\n {{ member.status }}\n \u003C/BaseTag>\n \u003C/TairoTableCell>\n \u003C/TairoTableRow>\n \u003C/TairoTable>\n\u003C/template>",{"id":1210,"title":332,"titles":1211,"content":9,"level":16},"/documentation/reference/tairo/table#components",[1159],{"id":1213,"title":1214,"titles":1215,"content":9,"level":45},"/documentation/reference/tairo/table#tairotable","TairoTable",[1159,332],{"id":1217,"title":1218,"titles":1219,"content":9,"level":45},"/documentation/reference/tairo/table#tairotableheading","TairoTableHeading",[1159,332],{"id":1221,"title":1222,"titles":1223,"content":9,"level":45},"/documentation/reference/tairo/table#tairotablerow","TairoTableRow",[1159,332],{"id":1225,"title":1226,"titles":1227,"content":868,"level":45},"/documentation/reference/tairo/table#tairotablecell","TairoTableCell",[1159,332],{"id":1229,"title":1230,"titles":1231,"content":1232,"level":10},"/documentation/reference/advanced/apexcharts","Charts with Apexcharts",[],"Tairo ships with the Apexcharts data visualization library customized for Vue and Nuxt. Use the component to render charts and graphs.",{"id":1234,"title":1230,"titles":1235,"content":1236,"level":10},"/documentation/reference/advanced/apexcharts#charts-with-apexcharts",[],"This component uses the vue3-apexcharts library, which is a wrapper for the ApexCharts library. We also provide chart styles for dark mode support. Display charts and graphs with the Apexcharts library.",{"id":1238,"title":591,"titles":1239,"content":1240,"level":16},"/documentation/reference/advanced/apexcharts#example",[1230],"\u003Cscript setup lang=\"ts\">\nconst areaBtcPrice = reactive(useAreaBtcPrice())\n\n// You can create your own composable function to handle the logic of your chart\nfunction useAreaBtcPrice() {\n const series = shallowRef([\n {\n name: 'Expected',\n data: generateDayWiseTimeSeries(0, 18),\n },\n {\n name: 'Real',\n data: generateDayWiseTimeSeries(1, 18),\n },\n ])\n\n function generateDayWiseTimeSeries(s: number, count: number) {\n const values = [\n [0.4, 0.3, 1, 0.9, 2.9, 1.9, 2.5, 0.9, 1.2, 0.7, 1.9, 0.5, 1.3, 0.9, 1.7, 0.2, 0.7, 0.5],\n [0.2, 0.3, 0.8, 0.7, 2.2, 1.6, 2.3, 0.7, 1.1, 0.5, 1.2, 0.5, 1, 0.4, 1.5, 0.2, 0.6, 2],\n ]\n let i = 0\n const series = []\n let x = new Date('11 Nov 2022').getTime()\n while (i \u003C count) {\n series.push([x, values[s]![i]!])\n x += 86400000\n i++\n }\n return series\n }\n\n return defineApexchartsProps({\n type: 'area',\n height: 350,\n series,\n options: {\n chart: {\n foreColor: '#999',\n stacked: true,\n toolbar: {\n show: false,\n },\n zoom: {\n enabled: false,\n },\n dropShadow: {\n enabled: true,\n enabledOnSeries: [0],\n top: -2,\n left: 2,\n blur: 5,\n opacity: 0.06,\n },\n },\n colors: ['var(--color-chart-base)', 'var(--color-primary-400)'],\n stroke: {\n curve: 'smooth',\n width: 3,\n },\n title: {\n text: '',\n align: 'left',\n },\n dataLabels: {\n enabled: false,\n },\n markers: {\n size: 0,\n strokeColors: '#fff',\n strokeWidth: 3,\n strokeOpacity: 1,\n fillOpacity: 1,\n hover: {\n size: 6,\n },\n },\n xaxis: {\n type: 'datetime',\n axisBorder: {\n show: false,\n },\n axisTicks: {\n show: false,\n },\n },\n yaxis: {\n labels: {\n offsetX: 0,\n offsetY: -5,\n },\n tooltip: {\n enabled: true,\n },\n },\n grid: {\n show: true,\n padding: {\n left: -5,\n right: 5,\n },\n },\n tooltip: {\n x: {\n format: 'dd MMM yyyy',\n },\n y: {\n formatter: value => `${value} %`,\n },\n },\n legend: {\n position: 'top',\n horizontalAlign: 'center',\n },\n fill: {\n type: 'solid',\n opacity: 0.7,\n },\n },\n })\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"w-full\">\n \u003Cdiv class=\"mb-6\">\n \u003CBaseHeading\n as=\"h3\"\n size=\"md\"\n weight=\"semibold\"\n lead=\"tight\"\n class=\"text-muted-800 dark:text-white\"\n >\n \u003Cspan>BTC Price Chart\u003C/span>\n \u003C/BaseHeading>\n \u003C/div>\n\n \u003CLazyAddonApexcharts v-bind=\"areaBtcPrice\" />\n \u003C/div>\n\u003C/template>",{"id":1242,"title":332,"titles":1243,"content":9,"level":16},"/documentation/reference/advanced/apexcharts#components",[1230],{"id":1245,"title":1246,"titles":1247,"content":1248,"level":45},"/documentation/reference/advanced/apexcharts#addonapexcharts","AddonApexcharts",[1230,332],"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"id":1250,"title":1251,"titles":1252,"content":1253,"level":10},"/documentation/reference/advanced/datepicker","Date picker Input",[],"Tairo ships with the v-calendar library to render datepickers and calendars.",{"id":1255,"title":1256,"titles":1257,"content":1258,"level":10},"/documentation/reference/advanced/datepicker#datepicker-input","Datepicker input",[],"This component uses the v-calendar library, which provides a powerful and flexible datepicker and calendar component. Pre styled datepicker component.",{"id":1260,"title":591,"titles":1261,"content":1262,"level":16},"/documentation/reference/advanced/datepicker#example",[1256],"\u003Cscript setup lang=\"ts\">\nconst date = ref(new Date())\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"grid grid-cols-1 sm:grid-cols-2\">\n \u003CLazyAddonDatepicker v-model=\"date\" />\n \u003C/div>\n\u003C/template>",{"id":1264,"title":332,"titles":1265,"content":9,"level":16},"/documentation/reference/advanced/datepicker#components",[1256],{"id":1267,"title":1268,"titles":1269,"content":868,"level":45},"/documentation/reference/advanced/datepicker#addondatepicker","AddonDatepicker",[1256,332],{"id":1271,"title":1272,"titles":1273,"content":1274,"level":10},"/documentation/reference/advanced/input-password","Password Input",[],"Secure password input field with password visibility toggle.",{"id":1276,"title":1272,"titles":1277,"content":1278,"level":10},"/documentation/reference/advanced/input-password#password-input",[],"This component uses the zxcvbn-ts package to detect and validate the password input strength. Ready to use password input component with validation and formatting.",{"id":1280,"title":591,"titles":1281,"content":1282,"level":16},"/documentation/reference/advanced/input-password#example",[1272],"\u003Cscript lang=\"ts\" setup>\nconst password = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-md\">\n \u003CBaseField label=\"Password\">\n \u003CLazyAddonInputPassword v-model=\"password\" />\n \u003C/BaseField>\n \u003C/div>\n\u003C/template>",{"id":1284,"title":1285,"titles":1286,"content":1287,"level":45},"/documentation/reference/advanced/input-password#change-the-locale","Change the locale",[1272,591],"Changing the locale allows to change the language of the password strength feedback and the dictionaries used to validate the password. You can install and load dictionaries from the zxcvbn-ts package or create your own dictionary. \u003Cscript lang=\"ts\" setup>\nconst password = ref('')\n\nconst fr = () => import('@zxcvbn-ts/language-fr')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-md\">\n \u003CBaseField label=\"Mot de passe\">\n \u003CLazyAddonInputPassword\n v-model=\"password\"\n :locale=\"fr\"\n />\n \u003C/BaseField>\n \u003C/div>\n\u003C/template>",{"id":1289,"title":1290,"titles":1291,"content":1292,"level":45},"/documentation/reference/advanced/input-password#validation","Validation",[1272,591],"\u003Cscript lang=\"ts\" setup>\nimport type { AddonInputPassword } from '#components'\nimport type { ZxcvbnResult } from '@zxcvbn-ts/core'\n\nconst password = ref('qwerty')\nconst error = ref('')\n\nconst inputRef = ref\u003CInstanceType\u003Ctypeof AddonInputPassword>>()\n\nfunction onSubmit() {\n const score = inputRef.value?.validation?.score ?? 0\n if (score \u003C 5) {\n // eslint-disable-next-line no-alert\n alert(`Please enter a stronger password, current score: ${score}/5`)\n return\n }\n\n // eslint-disable-next-line no-alert\n alert(`Selected: ${inputRef.value?.validation?.password} with score ${score}`)\n}\n\nfunction onValidate(state: { validation: ZxcvbnResult | null, touched: boolean }) {\n error.value = state.validation?.feedback.warning ?? ''\n if (state.validation && state.validation.score \u003C 5) {\n error.value = 'Please enter a stronger password'\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform\n class=\"max-w-md\"\n autocomplete=\"off\"\n @submit.prevent=\"onSubmit\"\n >\n \u003CBaseField\n v-slot=\"{ inputAttrs }\"\n label=\"Password\"\n :state=\"error ? 'error' : 'idle'\"\n :error=\"error\"\n >\n \u003CLazyAddonInputPassword\n ref=\"inputRef\"\n v-model=\"password\"\n placeholder=\"Type to try validation\"\n v-bind=\"inputAttrs\"\n @validation=\"onValidate\"\n />\n \u003C/BaseField>\n \u003C/form>\n\u003C/template>",{"id":1294,"title":1295,"titles":1296,"content":1297,"level":45},"/documentation/reference/advanced/input-password#disabled-state","Disabled State",[1272,591],"\u003Cscript lang=\"ts\" setup>\nconst password = ref('F4k3P4ssw0rd')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-md\">\n \u003CBaseField label=\"Password\">\n \u003CLazyAddonInputPassword\n v-model=\"password\"\n disabled\n />\n \u003C/BaseField>\n \u003C/div>\n\u003C/template>",{"id":1299,"title":1300,"titles":1301,"content":1302,"level":45},"/documentation/reference/advanced/input-password#reacting-to-other-inputs","Reacting to other inputs",[1272,591],"\u003Cscript lang=\"ts\" setup>\nimport type { AddonInputPassword } from '#components'\n\nconst passwordRef = ref\u003CInstanceType\u003Ctypeof AddonInputPassword>>()\nconst hasError = computed(() => !!passwordRef.value?.validation?.feedback?.warning || !!passwordRef.value?.validation?.feedback?.suggestions?.length)\nconst loading = computed(() => passwordRef.value?.loading)\n\nconst username = ref('superuser')\nconst email = ref('contact@acme.com')\nconst password = ref('contact@acme.com')\nconst useUserInputs = ref(true)\n\nconst userInputs = computed(() => useUserInputs.value ? [username.value, email.value] : [])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"grid grid-cols-2 gap-4 md:max-w-lg\">\n \u003CBaseField label=\"Username\">\n \u003CTairoInput\n v-model=\"username\"\n icon=\"lucide:user\"\n />\n \u003C/BaseField>\n\n \u003CBaseField label=\"Email\">\n \u003CTairoInput\n v-model=\"email\"\n icon=\"lucide:mail\"\n />\n \u003C/BaseField>\n\n \u003CBaseField\n v-slot=\"{ inputAttrs }\"\n label=\"Password\"\n :state=\"loading ? 'loading' : hasError ? 'error' : 'idle'\"\n :error=\"passwordRef?.validation?.feedback?.warning ?? ''\"\n class=\"col-span-2\"\n >\n \u003CLazyAddonInputPassword\n ref=\"passwordRef\"\n v-model=\"password\"\n icon=\"lucide:lock\"\n :user-inputs=\"userInputs\"\n show\n touched\n v-bind=\"inputAttrs\"\n />\n \u003C/BaseField>\n\n \u003Cdiv class=\"mt-2\">\n \u003CBaseSwitchThin\n v-model=\"useUserInputs\"\n label=\"Check other inputs\"\n />\n \u003C/div>\n \u003C/div>\n\u003C/template>",{"id":1304,"title":332,"titles":1305,"content":9,"level":16},"/documentation/reference/advanced/input-password#components",[1272],{"id":1307,"title":1308,"titles":1309,"content":1310,"level":45},"/documentation/reference/advanced/input-password#addoninputpassword","AddonInputPassword",[1272,332],"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":1312,"title":1313,"titles":1314,"content":1315,"level":10},"/documentation/reference/advanced/input-phone","Phone Input",[],"International phone number input field with country code dropdown.",{"id":1317,"title":1313,"titles":1318,"content":1319,"level":10},"/documentation/reference/advanced/input-phone#phone-input",[],"This component uses the libphonenumber-js and the country-codes-list\npackages to detect and validate the phone input value. Ready to use phone input component with country code dropdown, with validation and formatting.",{"id":1321,"title":591,"titles":1322,"content":1323,"level":16},"/documentation/reference/advanced/input-phone#example",[1313],"\u003Cscript lang=\"ts\" setup>\nconst phone = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-md\">\n \u003CBaseField label=\"Phone number\">\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n placeholder=\"Ex: +1 555 555 5555\"\n />\n \u003C/BaseField>\n \u003C/div>\n\u003C/template>",{"id":1325,"title":1326,"titles":1327,"content":1328,"level":45},"/documentation/reference/advanced/input-phone#country-input","Country Input",[1313,591],"The component provides a country dropdown to select the country code, you can use the country prop to set the default country, otherwise it will be detected from the user's input.\nYou can use the v-model:country notation to get the selected/detected country code. \u003Cscript lang=\"ts\" setup>\nconst phone = ref('+1 555 555 5555')\nconst country = ref('US')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-md\">\n \u003CBaseField label=\"Phone number\">\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n v-model:country=\"country\"\n />\n \u003C/BaseField>\n \u003C/div>\n\u003C/template>",{"id":1330,"title":1331,"titles":1332,"content":1333,"level":45},"/documentation/reference/advanced/input-phone#international-and-national-formats","International and National Formats",[1313,591],"By default, the input value will be formatted in the international format, you can change this behavior with the format prop to change it to national. \u003Cscript lang=\"ts\" setup>\nconst phone = ref('+1 555 555 5555')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-md\">\n \u003CBaseField label=\"Phone number\">\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n format=\"national\"\n country=\"US\"\n />\n \u003C/BaseField>\n \u003C/div>\n\u003C/template>",{"id":1335,"title":1290,"titles":1336,"content":1337,"level":45},"/documentation/reference/advanced/input-phone#validation",[1313,591],"The component provides a @validation event to indicate if the input value is valid or not \u003Cscript lang=\"ts\" setup>\nimport type { AddonInputPhone } from '#components'\n\nconst phone = ref('012345')\nconst error = ref('')\n\nconst inputRef = ref\u003CInstanceType\u003Ctypeof AddonInputPhone>>()\n\nfunction onSubmit() {\n if (!inputRef.value?.validation?.valid) {\n error.value = 'Please enter a valid phone number'\n return\n }\n\n // eslint-disable-next-line no-alert\n alert(`Selected: ${inputRef.value?.currentCountry?.label}`)\n}\n\nfunction onValidate(state: { valid: boolean, touched: boolean, error: string }) {\n if (!state.error) {\n error.value = ''\n return\n }\n switch (state.error) {\n case 'INVALID_COUNTRY':\n error.value = 'Please select a country'\n break\n case 'NO_POSSIBLE_COUNTRIES':\n error.value = 'No possible countries for this phone number'\n break\n case 'PHONE_NUMBER_NOT_POSSIBLE':\n error.value = 'This phone number is not valid for the selected country'\n break\n case 'NOT_A_NUMBER':\n case 'TOO_SHORT':\n case 'TOO_LONG':\n default:\n error.value = 'Please enter a valid phone number'\n break\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform class=\"max-w-md\" @submit.prevent=\"onSubmit\">\n \u003CBaseField\n v-slot=\"{ inputAttrs }\"\n label=\"Phone number\"\n :state=\"error ? 'error' : 'idle'\"\n :error=\"error\"\n >\n \u003CLazyAddonInputPhone\n ref=\"inputRef\"\n v-model=\"phone\"\n placeholder=\"Type to try validation\"\n v-bind=\"inputAttrs\"\n @validation=\"onValidate\"\n />\n \u003C/BaseField>\n \u003C/form>\n\u003C/template>",{"id":1339,"title":1295,"titles":1340,"content":1341,"level":45},"/documentation/reference/advanced/input-phone#disabled-state",[1313,591],"\u003Cscript lang=\"ts\" setup>\nconst phone = ref('+1 555 555 5555')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"max-w-md\">\n \u003CBaseField label=\"Phone number\">\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n disabled\n />\n \u003C/BaseField>\n \u003C/div>\n\u003C/template>",{"id":1343,"title":1344,"titles":1345,"content":1346,"level":45},"/documentation/reference/advanced/input-phone#input-size","Input Size",[1313,591],"\u003Cscript lang=\"ts\" setup>\nconst phone = ref('+33612345678')\nconst country = ref('FR')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex flex-wrap gap-4 sm:flex-nowrap\">\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n v-model:country=\"country\"\n size=\"sm\"\n />\n\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n v-model:country=\"country\"\n size=\"md\"\n />\n\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n v-model:country=\"country\"\n size=\"lg\"\n />\n \u003C/div>\n\u003C/template>",{"id":1348,"title":1349,"titles":1350,"content":1351,"level":45},"/documentation/reference/advanced/input-phone#input-shapes","Input Shapes",[1313,591],"\u003Cscript lang=\"ts\" setup>\nconst phone = ref('+33612345678')\nconst country = ref('FR')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"grid gap-4 sm:grid-cols-2\">\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n v-model:country=\"country\"\n rounded=\"none\"\n />\n\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n v-model:country=\"country\"\n rounded=\"sm\"\n />\n\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n v-model:country=\"country\"\n rounded=\"md\"\n />\n\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n v-model:country=\"country\"\n rounded=\"lg\"\n />\n\n \u003CLazyAddonInputPhone\n v-model=\"phone\"\n v-model:country=\"country\"\n rounded=\"full\"\n />\n \u003C/div>\n\u003C/template>",{"id":1353,"title":332,"titles":1354,"content":9,"level":16},"/documentation/reference/advanced/input-phone#components",[1313],{"id":1356,"title":1357,"titles":1358,"content":1310,"level":45},"/documentation/reference/advanced/input-phone#addoninputphone","AddonInputPhone",[1313,332],{"id":1360,"title":1361,"titles":1362,"content":1363,"level":10},"/documentation/reference/advanced/lightweight-charts","Charts with Lightweight Charts",[],"Tairo ships with the Lightweight Charts data visualization library customized for Vue and Nuxt. Use the component to render charts and graphs.",{"id":1365,"title":1361,"titles":1366,"content":1367,"level":10},"/documentation/reference/advanced/lightweight-charts#charts-with-lightweight-charts",[],"This component uses the lightweight-charts library, which is a top performing financial charting library. Display charts and graphs with the Lightweight Charts™ library.",{"id":1369,"title":591,"titles":1370,"content":1371,"level":16},"/documentation/reference/advanced/lightweight-charts#example",[1361],"\u003Cscript setup lang=\"ts\">\n/**\n * Generates sample data for the Lightweight Charts™ example\n * @param {boolean} ohlc Whether generated dat should include open, high, low, and close values\n * @returns {Array} sample data\n */\nfunction generateSampleData(ohlc: boolean) {\n const randomFactor = 25 + Math.random() * 25\n function samplePoint(i: number) {\n return (\n i\n * (0.5\n + Math.sin(i / 10) * 0.2\n + Math.sin(i / 20) * 0.4\n + Math.sin(i / randomFactor) * 0.8\n + Math.sin(i / 500) * 0.5)\n + 200\n )\n }\n\n const res = []\n const date = new Date(Date.UTC(2024, 0, 1, 0, 0, 0, 0))\n const numberOfPoints = ohlc ? 100 : 500\n for (let i = 0; i \u003C numberOfPoints; ++i) {\n const time = date.getTime() / 1000\n const value = samplePoint(i)\n if (ohlc) {\n const randomRanges = [\n -1 * Math.random(),\n Math.random(),\n Math.random(),\n ].map(i => i * 10)\n const sign = Math.sin(Math.random() - 0.5)\n res.push({\n time,\n low: value + randomRanges[0]!,\n high: value + randomRanges[1]!,\n open: value + sign * randomRanges[2]!,\n close: samplePoint(i + 1),\n })\n }\n else {\n res.push({\n time,\n value,\n })\n }\n\n date.setUTCDate(date.getUTCDate() + 1)\n }\n\n return res\n}\n\nconst chartOptions = shallowRef\u003Cany>({})\n\nconst colorMode = useColorMode()\nwatch(() => colorMode.preference, (preference) => {\n if (preference === 'dark') {\n chartOptions.value = {\n layout: {\n fontFamily: `'Inter', sans-serif`,\n background: { color: '#101828' }, // muted-900\n textColor: '#99a1af', // muted-400\n },\n grid: {\n vertLines: { color: '#364153' }, // muted-700\n horzLines: { color: '#364153' }, // muted-700\n },\n crosshair: {\n vertLine: {\n width: 1,\n color: '#8e51ff', // muted-700/50\n labelBackgroundColor: '#8e51ff', // #8e51ff - primary-500\n },\n horzLine: {\n width: 1,\n color: '#8e51ff', // muted-700/50\n labelBackgroundColor: '#8e51ff', // #8e51ff - primary-500\n },\n },\n }\n }\n else {\n chartOptions.value = {\n layout: {\n fontFamily: `'Inter', sans-serif`,\n background: { color: '#FFF' },\n textColor: '#364153', // muted-700\n },\n grid: {\n vertLines: { color: '#cad5e2' }, // muted-300\n horzLines: { color: '#cad5e2' }, // muted-300\n },\n crosshair: {\n vertLine: {\n width: 1,\n color: '#8e51ff', // muted-700/50\n labelBackgroundColor: '#8e51ff', // #8e51ff - primary-500\n },\n horzLine: {\n width: 1,\n color: '#8e51ff', // muted-700/50\n labelBackgroundColor: '#8e51ff', // #8e51ff - primary-500\n },\n },\n }\n }\n}, { immediate: true })\n\nconst data = ref(generateSampleData(false))\nconst seriesOptions = ref\u003Cany>({\n color: '#8e51ff',\n})\nconst chartType = ref\u003C'line' | 'area' | 'bar' | 'candlestick' | 'histogram' | 'baseline'>('line')\nconst lwChart = useTemplateRef('lwChart')\n\nfunction changeData() {\n const candlestickTypeData = ['candlestick', 'bar'].includes(chartType.value)\n const newData = generateSampleData(candlestickTypeData)\n data.value = newData\n if (chartType.value === 'baseline') {\n const average = newData.reduce((s, c) => {\n return s + c.value!\n }, 0) / newData.length\n seriesOptions.value = { baseValue: { type: 'price', price: average } }\n }\n}\n\nfunction changeType() {\n const types = [\n 'line',\n 'area',\n 'baseline',\n 'histogram',\n 'candlestick',\n 'bar',\n ].filter(t => t !== chartType.value)\n const randIndex = Math.round(Math.random() * (types.length - 1))\n chartType.value = types[randIndex] as 'line' | 'area' | 'bar' | 'candlestick' | 'histogram' | 'baseline'\n changeData()\n\n // call a method on the component.\n lwChart.value?.fitContent()\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-[300px] w-full\">\n \u003CAddonLightweightCharts\n ref=\"lwChart\"\n :type=\"chartType\"\n :data=\"data\"\n :autosize=\"true\"\n :chart-options=\"chartOptions\"\n :series-options=\"seriesOptions\"\n />\n \u003C/div>\n \u003Cdiv class=\"flex gap-2 mt-4\">\n \u003CBaseButton @click=\"changeType\">\n Change Chart Type\n \u003C/BaseButton>\n \u003CBaseButton @click=\"changeData\">\n Change Data\n \u003C/BaseButton>\n \u003C/div>\n\u003C/template>",{"id":1373,"title":332,"titles":1374,"content":9,"level":16},"/documentation/reference/advanced/lightweight-charts#components",[1361],{"id":1376,"title":1377,"titles":1378,"content":1379,"level":45},"/documentation/reference/advanced/lightweight-charts#addonlightweightcharts","AddonLightweightCharts",[1361,332],"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"id":1381,"title":1382,"titles":1383,"content":1384,"level":10},"/documentation/reference/advanced/mapbox","Location picker Input",[],"Location picker input component with mapbox.",{"id":1386,"title":1387,"titles":1388,"content":1389,"level":10},"/documentation/reference/advanced/mapbox#location-picker-input","Location picker input",[],"This component uses the mapbox-gl with mapbox-gl-geocoder to render the location picker.\nMake sure to install the dependencies and configure the mapbox access token in your project Mapbox location picker input component.",{"id":1391,"title":591,"titles":1392,"content":1393,"level":16},"/documentation/reference/advanced/mapbox#example",[1387],"\u003Cscript setup lang=\"ts\">\nimport type { AddonMapboxLocationPickerProps, MapInitEvent } from '~/components/AddonMapboxLocationPicker.vue'\n\nconst options: AddonMapboxLocationPickerProps['options'] = {\n center: {\n lat: 40.730610,\n lng: -73.935242,\n },\n zoom: 10,\n}\n\nconst center = ref({\n lat: 40.730610,\n lng: -73.935242,\n})\n\nfunction onMapInit({ geocoder, map, mapboxgl }: MapInitEvent) {\n //\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CLazyAddonMapboxLocationPicker\n v-model=\"center\"\n class=\"col-span-12 aspect-16/9\"\n rounded=\"lg\"\n :options=\"options\"\n :geocoder=\"{\n flyTo: true,\n placeholder: 'Search for a location...',\n }\"\n @init=\"onMapInit\"\n />\n \u003C/div>\n\u003C/template>",{"id":1395,"title":332,"titles":1396,"content":9,"level":16},"/documentation/reference/advanced/mapbox#components",[1387],{"id":1398,"title":1399,"titles":1400,"content":1401,"level":45},"/documentation/reference/advanced/mapbox#addonmapboxlocationpicker","AddonMapboxLocationPicker",[1387,332],"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",[1403,1405,1407,1409,1411,1431,1444,1462],{"title":7,"path":6,"stem":1404},"documentation/01.index",{"title":19,"path":18,"stem":1406},"documentation/02.tairo-essentials",{"title":73,"path":72,"stem":1408},"documentation/03.prerequisites",{"title":95,"path":94,"stem":1410},"documentation/04.demo-installation",{"title":1412,"path":1413,"stem":1414,"children":1415,"page":1430},"Setup","/documentation/setup","documentation/10.setup",[1416,1418,1420,1422,1424,1426,1428],{"title":136,"path":135,"stem":1417},"documentation/10.setup/1.new-project",{"title":190,"path":189,"stem":1419},"documentation/10.setup/2.customization",{"title":211,"path":210,"stem":1421},"documentation/10.setup/4.main-files",{"title":229,"path":228,"stem":1423},"documentation/10.setup/5.add-a-layout",{"title":251,"path":250,"stem":1425},"documentation/10.setup/5.first-page",{"title":267,"path":266,"stem":1427},"documentation/10.setup/6.first-api-route",{"title":288,"path":287,"stem":1429},"documentation/10.setup/8.configuration",false,{"title":1432,"path":1433,"stem":1434,"children":1435,"page":1430},"Layouts","/documentation/layouts","documentation/20.layouts",[1436,1438,1440,1442],{"title":311,"path":310,"stem":1437},"documentation/20.layouts/collapse",{"title":377,"path":376,"stem":1439},"documentation/20.layouts/sidebar",{"title":462,"path":461,"stem":1441},"documentation/20.layouts/sidenav",{"title":525,"path":524,"stem":1443},"documentation/20.layouts/topnav",{"title":1445,"path":563,"stem":1446,"children":1447,"page":1430},"Guides","documentation/50.guides",[1448,1450,1452,1454,1456,1458,1460],{"title":568,"path":567,"stem":1449},"documentation/50.guides/02.panels",{"title":615,"path":614,"stem":1451},"documentation/50.guides/04.form-validation",{"title":624,"path":623,"stem":1453},"documentation/50.guides/04.mutli-step-forms",{"title":654,"path":653,"stem":1455},"documentation/50.guides/06.pnpm-workspace",{"title":679,"path":678,"stem":1457},"documentation/50.guides/07.deployment",{"title":174,"path":727,"stem":1459},"documentation/50.guides/09.troubleshooting",{"title":756,"path":755,"stem":1461},"documentation/50.guides/10.migration",{"title":793,"path":788,"stem":1463,"children":1464},"documentation/60.reference/0.index",[1465,1466,1468,1470,1501],{"title":789,"path":788,"stem":1463},{"title":797,"path":796,"stem":1467},"documentation/60.reference/01.modules",{"title":819,"path":818,"stem":1469},"documentation/60.reference/02.composables",{"title":1471,"path":1472,"stem":1473,"children":1474,"page":1430},"Tairo layer","/documentation/reference/tairo","documentation/60.reference/1.tairo",[1475,1477,1479,1481,1483,1485,1487,1489,1491,1493,1495,1497,1499],{"title":828,"path":827,"stem":1476},"documentation/60.reference/1.tairo/check-animated",{"title":849,"path":848,"stem":1478},"documentation/60.reference/1.tairo/checkbox-animated",{"title":871,"path":870,"stem":1480},"documentation/60.reference/1.tairo/checkbox-card-icon",{"title":892,"path":891,"stem":1482},"documentation/60.reference/1.tairo/content-wrapper",{"title":924,"path":923,"stem":1484},"documentation/60.reference/1.tairo/flex-table",{"title":976,"path":975,"stem":1486},"documentation/60.reference/1.tairo/form-group",{"title":997,"path":996,"stem":1488},"documentation/60.reference/1.tairo/form-save",{"title":1017,"path":1016,"stem":1490},"documentation/60.reference/1.tairo/input",{"title":1037,"path":1036,"stem":1492},"documentation/60.reference/1.tairo/menu",{"title":1094,"path":1093,"stem":1494},"documentation/60.reference/1.tairo/mobile-drawer",{"title":1115,"path":1114,"stem":1496},"documentation/60.reference/1.tairo/radio-card",{"title":1135,"path":1134,"stem":1498},"documentation/60.reference/1.tairo/select",{"title":1159,"path":1158,"stem":1500},"documentation/60.reference/1.tairo/table",{"title":1502,"path":1503,"stem":1504,"children":1505,"page":1430},"Addon","/documentation/reference/advanced","documentation/60.reference/2.advanced",[1506,1509,1512,1515,1518,1521],{"title":1507,"path":1229,"stem":1508},"apexcharts","documentation/60.reference/2.advanced/apexcharts",{"title":1510,"path":1250,"stem":1511},"v-calendar (date picker)","documentation/60.reference/2.advanced/datepicker",{"title":1513,"path":1271,"stem":1514},"zxcvbn (password input)","documentation/60.reference/2.advanced/input-password",{"title":1516,"path":1312,"stem":1517},"libphonenumber (tel input)","documentation/60.reference/2.advanced/input-phone",{"title":1519,"path":1360,"stem":1520},"lightweight-charts","documentation/60.reference/2.advanced/lightweight-charts",{"title":1522,"path":1381,"stem":1523},"mapbox-gl (location picker)","documentation/60.reference/2.advanced/mapbox",{"id":1525,"title":1230,"body":1526,"components":3090,"description":1232,"extension":3091,"icon":3092,"meta":3094,"navigation":3095,"path":1229,"seo":3096,"stem":1508,"toc":1430,"__hash__":3097},"docs/documentation/60.reference/2.advanced/apexcharts.md",{"type":1527,"value":1528,"toc":3084},"minimal",[1529,1533,1556,1559,1563,3071,3074,3078,3081],[1530,1531,1230],"h1",{"id":1532},"charts-with-apexcharts",[1534,1535,1538],"doc-info",{"icon":1536,"title":1537},"solar:shield-warning-bold-duotone","Optional dependency",[1539,1540,1541,1542,1549,1550,1555],"p",{},"This component uses the ",[1543,1544,1548],"a",{"href":1545,"rel":1546},"https://github.com/apexcharts/vue3-apexcharts",[1547],"nofollow","vue3-apexcharts"," library, which is a wrapper for the ",[1543,1551,1554],{"href":1552,"rel":1553},"https://apexcharts.com/",[1547],"ApexCharts"," library. We also provide chart styles for dark mode support.",[1539,1557,1558],{},"Display charts and graphs with the Apexcharts library.",[1560,1561,591],"h2",{"id":1562},"example",[1564,1565,1566,1572],"doc-component-demo",{},[1567,1568,1569],"template",{"v-slot:demo":9},[1570,1571],"examples-apexcharts-base",{},[1567,1573,1574],{"v-slot:source":9},[1575,1576,1577],"code-group",{},[1578,1579,1584],"pre",{"className":1580,"code":1581,"filename":1582,"language":1583,"meta":9,"style":9},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nconst areaBtcPrice = reactive(useAreaBtcPrice())\n\n// You can create your own composable function to handle the logic of your chart\nfunction useAreaBtcPrice() {\n const series = shallowRef([\n {\n name: 'Expected',\n data: generateDayWiseTimeSeries(0, 18),\n },\n {\n name: 'Real',\n data: generateDayWiseTimeSeries(1, 18),\n },\n ])\n\n function generateDayWiseTimeSeries(s: number, count: number) {\n const values = [\n [0.4, 0.3, 1, 0.9, 2.9, 1.9, 2.5, 0.9, 1.2, 0.7, 1.9, 0.5, 1.3, 0.9, 1.7, 0.2, 0.7, 0.5],\n [0.2, 0.3, 0.8, 0.7, 2.2, 1.6, 2.3, 0.7, 1.1, 0.5, 1.2, 0.5, 1, 0.4, 1.5, 0.2, 0.6, 2],\n ]\n let i = 0\n const series = []\n let x = new Date('11 Nov 2022').getTime()\n while (i \u003C count) {\n series.push([x, values[s]![i]!])\n x += 86400000\n i++\n }\n return series\n }\n\n return defineApexchartsProps({\n type: 'area',\n height: 350,\n series,\n options: {\n chart: {\n foreColor: '#999',\n stacked: true,\n toolbar: {\n show: false,\n },\n zoom: {\n enabled: false,\n },\n dropShadow: {\n enabled: true,\n enabledOnSeries: [0],\n top: -2,\n left: 2,\n blur: 5,\n opacity: 0.06,\n },\n },\n colors: ['var(--color-chart-base)', 'var(--color-primary-400)'],\n stroke: {\n curve: 'smooth',\n width: 3,\n },\n title: {\n text: '',\n align: 'left',\n },\n dataLabels: {\n enabled: false,\n },\n markers: {\n size: 0,\n strokeColors: '#fff',\n strokeWidth: 3,\n strokeOpacity: 1,\n fillOpacity: 1,\n hover: {\n size: 6,\n },\n },\n xaxis: {\n type: 'datetime',\n axisBorder: {\n show: false,\n },\n axisTicks: {\n show: false,\n },\n },\n yaxis: {\n labels: {\n offsetX: 0,\n offsetY: -5,\n },\n tooltip: {\n enabled: true,\n },\n },\n grid: {\n show: true,\n padding: {\n left: -5,\n right: 5,\n },\n },\n tooltip: {\n x: {\n format: 'dd MMM yyyy',\n },\n y: {\n formatter: value => `${value} %`,\n },\n },\n legend: {\n position: 'top',\n horizontalAlign: 'center',\n },\n fill: {\n type: 'solid',\n opacity: 0.7,\n },\n },\n })\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"w-full\">\n \u003Cdiv class=\"mb-6\">\n \u003CBaseHeading\n as=\"h3\"\n size=\"md\"\n weight=\"semibold\"\n lead=\"tight\"\n class=\"text-muted-800 dark:text-white\"\n >\n \u003Cspan>BTC Price Chart\u003C/span>\n \u003C/BaseHeading>\n \u003C/div>\n\n \u003CLazyAddonApexcharts v-bind=\"areaBtcPrice\" />\n \u003C/div>\n\u003C/template>\n","#examples/apexcharts/base.vue","vue",[1585,1586,1587,1616,1641,1647,1653,1665,1682,1688,1700,1723,1729,1734,1744,1762,1767,1773,1778,1811,1825,1916,2001,2007,2021,2033,2063,2077,2100,2112,2121,2127,2136,2142,2147,2159,2170,2181,2187,2193,2199,2210,2221,2227,2238,2244,2250,2260,2265,2271,2280,2290,2303,2313,2324,2335,2340,2346,2362,2368,2379,2390,2395,2401,2412,2423,2428,2434,2444,2449,2455,2465,2476,2486,2496,2506,2512,2523,2528,2533,2539,2550,2556,2565,2570,2576,2585,2590,2595,2601,2607,2617,2629,2634,2640,2649,2654,2659,2665,2675,2681,2692,2702,2707,2712,2718,2724,2735,2740,2746,2771,2776,2781,2787,2798,2809,2814,2820,2830,2840,2845,2850,2856,2862,2872,2877,2886,2905,2922,2931,2942,2953,2964,2975,2986,2992,3007,3018,3028,3033,3052,3062],"code",{"__ignoreMap":9},[1588,1589,1591,1595,1599,1603,1606,1609,1613],"span",{"class":1590,"line":10},"line",[1588,1592,1594],{"class":1593},"sVt8B","\u003C",[1588,1596,1598],{"class":1597},"s9eBZ","script",[1588,1600,1602],{"class":1601},"sScJk"," setup",[1588,1604,1605],{"class":1601}," lang",[1588,1607,1608],{"class":1593},"=",[1588,1610,1612],{"class":1611},"sZZnC","\"ts\"",[1588,1614,1615],{"class":1593},">\n",[1588,1617,1618,1622,1626,1629,1632,1635,1638],{"class":1590,"line":16},[1588,1619,1621],{"class":1620},"szBVR","const",[1588,1623,1625],{"class":1624},"sj4cs"," areaBtcPrice",[1588,1627,1628],{"class":1620}," =",[1588,1630,1631],{"class":1601}," reactive",[1588,1633,1634],{"class":1593},"(",[1588,1636,1637],{"class":1601},"useAreaBtcPrice",[1588,1639,1640],{"class":1593},"())\n",[1588,1642,1643],{"class":1590,"line":45},[1588,1644,1646],{"emptyLinePlaceholder":1645},true,"\n",[1588,1648,1649],{"class":1590,"line":177},[1588,1650,1652],{"class":1651},"sJ8bj","// You can create your own composable function to handle the logic of your chart\n",[1588,1654,1656,1659,1662],{"class":1590,"line":1655},5,[1588,1657,1658],{"class":1620},"function",[1588,1660,1661],{"class":1601}," useAreaBtcPrice",[1588,1663,1664],{"class":1593},"() {\n",[1588,1666,1668,1671,1674,1676,1679],{"class":1590,"line":1667},6,[1588,1669,1670],{"class":1620}," const",[1588,1672,1673],{"class":1624}," series",[1588,1675,1628],{"class":1620},[1588,1677,1678],{"class":1601}," shallowRef",[1588,1680,1681],{"class":1593},"([\n",[1588,1683,1685],{"class":1590,"line":1684},7,[1588,1686,1687],{"class":1593}," {\n",[1588,1689,1691,1694,1697],{"class":1590,"line":1690},8,[1588,1692,1693],{"class":1593}," name: ",[1588,1695,1696],{"class":1611},"'Expected'",[1588,1698,1699],{"class":1593},",\n",[1588,1701,1703,1706,1709,1711,1714,1717,1720],{"class":1590,"line":1702},9,[1588,1704,1705],{"class":1593}," data: ",[1588,1707,1708],{"class":1601},"generateDayWiseTimeSeries",[1588,1710,1634],{"class":1593},[1588,1712,1713],{"class":1624},"0",[1588,1715,1716],{"class":1593},", ",[1588,1718,1719],{"class":1624},"18",[1588,1721,1722],{"class":1593},"),\n",[1588,1724,1726],{"class":1590,"line":1725},10,[1588,1727,1728],{"class":1593}," },\n",[1588,1730,1732],{"class":1590,"line":1731},11,[1588,1733,1687],{"class":1593},[1588,1735,1737,1739,1742],{"class":1590,"line":1736},12,[1588,1738,1693],{"class":1593},[1588,1740,1741],{"class":1611},"'Real'",[1588,1743,1699],{"class":1593},[1588,1745,1747,1749,1751,1753,1756,1758,1760],{"class":1590,"line":1746},13,[1588,1748,1705],{"class":1593},[1588,1750,1708],{"class":1601},[1588,1752,1634],{"class":1593},[1588,1754,1755],{"class":1624},"1",[1588,1757,1716],{"class":1593},[1588,1759,1719],{"class":1624},[1588,1761,1722],{"class":1593},[1588,1763,1765],{"class":1590,"line":1764},14,[1588,1766,1728],{"class":1593},[1588,1768,1770],{"class":1590,"line":1769},15,[1588,1771,1772],{"class":1593}," ])\n",[1588,1774,1776],{"class":1590,"line":1775},16,[1588,1777,1646],{"emptyLinePlaceholder":1645},[1588,1779,1781,1784,1787,1789,1793,1796,1799,1801,1804,1806,1808],{"class":1590,"line":1780},17,[1588,1782,1783],{"class":1620}," function",[1588,1785,1786],{"class":1601}," generateDayWiseTimeSeries",[1588,1788,1634],{"class":1593},[1588,1790,1792],{"class":1791},"s4XuR","s",[1588,1794,1795],{"class":1620},":",[1588,1797,1798],{"class":1624}," number",[1588,1800,1716],{"class":1593},[1588,1802,1803],{"class":1791},"count",[1588,1805,1795],{"class":1620},[1588,1807,1798],{"class":1624},[1588,1809,1810],{"class":1593},") {\n",[1588,1812,1814,1817,1820,1822],{"class":1590,"line":1813},18,[1588,1815,1816],{"class":1620}," const",[1588,1818,1819],{"class":1624}," values",[1588,1821,1628],{"class":1620},[1588,1823,1824],{"class":1593}," [\n",[1588,1826,1828,1831,1834,1836,1839,1841,1843,1845,1848,1850,1853,1855,1858,1860,1863,1865,1867,1869,1872,1874,1877,1879,1881,1883,1886,1888,1891,1893,1895,1897,1900,1902,1905,1907,1909,1911,1913],{"class":1590,"line":1827},19,[1588,1829,1830],{"class":1593}," [",[1588,1832,1833],{"class":1624},"0.4",[1588,1835,1716],{"class":1593},[1588,1837,1838],{"class":1624},"0.3",[1588,1840,1716],{"class":1593},[1588,1842,1755],{"class":1624},[1588,1844,1716],{"class":1593},[1588,1846,1847],{"class":1624},"0.9",[1588,1849,1716],{"class":1593},[1588,1851,1852],{"class":1624},"2.9",[1588,1854,1716],{"class":1593},[1588,1856,1857],{"class":1624},"1.9",[1588,1859,1716],{"class":1593},[1588,1861,1862],{"class":1624},"2.5",[1588,1864,1716],{"class":1593},[1588,1866,1847],{"class":1624},[1588,1868,1716],{"class":1593},[1588,1870,1871],{"class":1624},"1.2",[1588,1873,1716],{"class":1593},[1588,1875,1876],{"class":1624},"0.7",[1588,1878,1716],{"class":1593},[1588,1880,1857],{"class":1624},[1588,1882,1716],{"class":1593},[1588,1884,1885],{"class":1624},"0.5",[1588,1887,1716],{"class":1593},[1588,1889,1890],{"class":1624},"1.3",[1588,1892,1716],{"class":1593},[1588,1894,1847],{"class":1624},[1588,1896,1716],{"class":1593},[1588,1898,1899],{"class":1624},"1.7",[1588,1901,1716],{"class":1593},[1588,1903,1904],{"class":1624},"0.2",[1588,1906,1716],{"class":1593},[1588,1908,1876],{"class":1624},[1588,1910,1716],{"class":1593},[1588,1912,1885],{"class":1624},[1588,1914,1915],{"class":1593},"],\n",[1588,1917,1919,1921,1923,1925,1927,1929,1932,1934,1936,1938,1941,1943,1946,1948,1951,1953,1955,1957,1960,1962,1964,1966,1968,1970,1972,1974,1976,1978,1980,1982,1985,1987,1989,1991,1994,1996,1999],{"class":1590,"line":1918},20,[1588,1920,1830],{"class":1593},[1588,1922,1904],{"class":1624},[1588,1924,1716],{"class":1593},[1588,1926,1838],{"class":1624},[1588,1928,1716],{"class":1593},[1588,1930,1931],{"class":1624},"0.8",[1588,1933,1716],{"class":1593},[1588,1935,1876],{"class":1624},[1588,1937,1716],{"class":1593},[1588,1939,1940],{"class":1624},"2.2",[1588,1942,1716],{"class":1593},[1588,1944,1945],{"class":1624},"1.6",[1588,1947,1716],{"class":1593},[1588,1949,1950],{"class":1624},"2.3",[1588,1952,1716],{"class":1593},[1588,1954,1876],{"class":1624},[1588,1956,1716],{"class":1593},[1588,1958,1959],{"class":1624},"1.1",[1588,1961,1716],{"class":1593},[1588,1963,1885],{"class":1624},[1588,1965,1716],{"class":1593},[1588,1967,1871],{"class":1624},[1588,1969,1716],{"class":1593},[1588,1971,1885],{"class":1624},[1588,1973,1716],{"class":1593},[1588,1975,1755],{"class":1624},[1588,1977,1716],{"class":1593},[1588,1979,1833],{"class":1624},[1588,1981,1716],{"class":1593},[1588,1983,1984],{"class":1624},"1.5",[1588,1986,1716],{"class":1593},[1588,1988,1904],{"class":1624},[1588,1990,1716],{"class":1593},[1588,1992,1993],{"class":1624},"0.6",[1588,1995,1716],{"class":1593},[1588,1997,1998],{"class":1624},"2",[1588,2000,1915],{"class":1593},[1588,2002,2004],{"class":1590,"line":2003},21,[1588,2005,2006],{"class":1593}," ]\n",[1588,2008,2010,2013,2016,2018],{"class":1590,"line":2009},22,[1588,2011,2012],{"class":1620}," let",[1588,2014,2015],{"class":1593}," i ",[1588,2017,1608],{"class":1620},[1588,2019,2020],{"class":1624}," 0\n",[1588,2022,2024,2026,2028,2030],{"class":1590,"line":2023},23,[1588,2025,1816],{"class":1620},[1588,2027,1673],{"class":1624},[1588,2029,1628],{"class":1620},[1588,2031,2032],{"class":1593}," []\n",[1588,2034,2036,2038,2041,2043,2046,2049,2051,2054,2057,2060],{"class":1590,"line":2035},24,[1588,2037,2012],{"class":1620},[1588,2039,2040],{"class":1593}," x ",[1588,2042,1608],{"class":1620},[1588,2044,2045],{"class":1620}," new",[1588,2047,2048],{"class":1601}," Date",[1588,2050,1634],{"class":1593},[1588,2052,2053],{"class":1611},"'11 Nov 2022'",[1588,2055,2056],{"class":1593},").",[1588,2058,2059],{"class":1601},"getTime",[1588,2061,2062],{"class":1593},"()\n",[1588,2064,2066,2069,2072,2074],{"class":1590,"line":2065},25,[1588,2067,2068],{"class":1620}," while",[1588,2070,2071],{"class":1593}," (i ",[1588,2073,1594],{"class":1620},[1588,2075,2076],{"class":1593}," count) {\n",[1588,2078,2080,2083,2086,2089,2092,2095,2097],{"class":1590,"line":2079},26,[1588,2081,2082],{"class":1593}," series.",[1588,2084,2085],{"class":1601},"push",[1588,2087,2088],{"class":1593},"([x, values[s]",[1588,2090,2091],{"class":1620},"!",[1588,2093,2094],{"class":1593},"[i]",[1588,2096,2091],{"class":1620},[1588,2098,2099],{"class":1593},"])\n",[1588,2101,2103,2106,2109],{"class":1590,"line":2102},27,[1588,2104,2105],{"class":1593}," x ",[1588,2107,2108],{"class":1620},"+=",[1588,2110,2111],{"class":1624}," 86400000\n",[1588,2113,2115,2118],{"class":1590,"line":2114},28,[1588,2116,2117],{"class":1593}," i",[1588,2119,2120],{"class":1620},"++\n",[1588,2122,2124],{"class":1590,"line":2123},29,[1588,2125,2126],{"class":1593}," }\n",[1588,2128,2130,2133],{"class":1590,"line":2129},30,[1588,2131,2132],{"class":1620}," return",[1588,2134,2135],{"class":1593}," series\n",[1588,2137,2139],{"class":1590,"line":2138},31,[1588,2140,2141],{"class":1593}," }\n",[1588,2143,2145],{"class":1590,"line":2144},32,[1588,2146,1646],{"emptyLinePlaceholder":1645},[1588,2148,2150,2153,2156],{"class":1590,"line":2149},33,[1588,2151,2152],{"class":1620}," return",[1588,2154,2155],{"class":1601}," defineApexchartsProps",[1588,2157,2158],{"class":1593},"({\n",[1588,2160,2162,2165,2168],{"class":1590,"line":2161},34,[1588,2163,2164],{"class":1593}," type: ",[1588,2166,2167],{"class":1611},"'area'",[1588,2169,1699],{"class":1593},[1588,2171,2173,2176,2179],{"class":1590,"line":2172},35,[1588,2174,2175],{"class":1593}," height: ",[1588,2177,2178],{"class":1624},"350",[1588,2180,1699],{"class":1593},[1588,2182,2184],{"class":1590,"line":2183},36,[1588,2185,2186],{"class":1593}," series,\n",[1588,2188,2190],{"class":1590,"line":2189},37,[1588,2191,2192],{"class":1593}," options: {\n",[1588,2194,2196],{"class":1590,"line":2195},38,[1588,2197,2198],{"class":1593}," chart: {\n",[1588,2200,2202,2205,2208],{"class":1590,"line":2201},39,[1588,2203,2204],{"class":1593}," foreColor: ",[1588,2206,2207],{"class":1611},"'#999'",[1588,2209,1699],{"class":1593},[1588,2211,2213,2216,2219],{"class":1590,"line":2212},40,[1588,2214,2215],{"class":1593}," stacked: ",[1588,2217,2218],{"class":1624},"true",[1588,2220,1699],{"class":1593},[1588,2222,2224],{"class":1590,"line":2223},41,[1588,2225,2226],{"class":1593}," toolbar: {\n",[1588,2228,2230,2233,2236],{"class":1590,"line":2229},42,[1588,2231,2232],{"class":1593}," show: ",[1588,2234,2235],{"class":1624},"false",[1588,2237,1699],{"class":1593},[1588,2239,2241],{"class":1590,"line":2240},43,[1588,2242,2243],{"class":1593}," },\n",[1588,2245,2247],{"class":1590,"line":2246},44,[1588,2248,2249],{"class":1593}," zoom: {\n",[1588,2251,2253,2256,2258],{"class":1590,"line":2252},45,[1588,2254,2255],{"class":1593}," enabled: ",[1588,2257,2235],{"class":1624},[1588,2259,1699],{"class":1593},[1588,2261,2263],{"class":1590,"line":2262},46,[1588,2264,2243],{"class":1593},[1588,2266,2268],{"class":1590,"line":2267},47,[1588,2269,2270],{"class":1593}," dropShadow: {\n",[1588,2272,2274,2276,2278],{"class":1590,"line":2273},48,[1588,2275,2255],{"class":1593},[1588,2277,2218],{"class":1624},[1588,2279,1699],{"class":1593},[1588,2281,2283,2286,2288],{"class":1590,"line":2282},49,[1588,2284,2285],{"class":1593}," enabledOnSeries: [",[1588,2287,1713],{"class":1624},[1588,2289,1915],{"class":1593},[1588,2291,2293,2296,2299,2301],{"class":1590,"line":2292},50,[1588,2294,2295],{"class":1593}," top: ",[1588,2297,2298],{"class":1620},"-",[1588,2300,1998],{"class":1624},[1588,2302,1699],{"class":1593},[1588,2304,2306,2309,2311],{"class":1590,"line":2305},51,[1588,2307,2308],{"class":1593}," left: ",[1588,2310,1998],{"class":1624},[1588,2312,1699],{"class":1593},[1588,2314,2316,2319,2322],{"class":1590,"line":2315},52,[1588,2317,2318],{"class":1593}," blur: ",[1588,2320,2321],{"class":1624},"5",[1588,2323,1699],{"class":1593},[1588,2325,2327,2330,2333],{"class":1590,"line":2326},53,[1588,2328,2329],{"class":1593}," opacity: ",[1588,2331,2332],{"class":1624},"0.06",[1588,2334,1699],{"class":1593},[1588,2336,2338],{"class":1590,"line":2337},54,[1588,2339,2243],{"class":1593},[1588,2341,2343],{"class":1590,"line":2342},55,[1588,2344,2345],{"class":1593}," },\n",[1588,2347,2349,2352,2355,2357,2360],{"class":1590,"line":2348},56,[1588,2350,2351],{"class":1593}," colors: [",[1588,2353,2354],{"class":1611},"'var(--color-chart-base)'",[1588,2356,1716],{"class":1593},[1588,2358,2359],{"class":1611},"'var(--color-primary-400)'",[1588,2361,1915],{"class":1593},[1588,2363,2365],{"class":1590,"line":2364},57,[1588,2366,2367],{"class":1593}," stroke: {\n",[1588,2369,2371,2374,2377],{"class":1590,"line":2370},58,[1588,2372,2373],{"class":1593}," curve: ",[1588,2375,2376],{"class":1611},"'smooth'",[1588,2378,1699],{"class":1593},[1588,2380,2382,2385,2388],{"class":1590,"line":2381},59,[1588,2383,2384],{"class":1593}," width: ",[1588,2386,2387],{"class":1624},"3",[1588,2389,1699],{"class":1593},[1588,2391,2393],{"class":1590,"line":2392},60,[1588,2394,2345],{"class":1593},[1588,2396,2398],{"class":1590,"line":2397},61,[1588,2399,2400],{"class":1593}," title: {\n",[1588,2402,2404,2407,2410],{"class":1590,"line":2403},62,[1588,2405,2406],{"class":1593}," text: ",[1588,2408,2409],{"class":1611},"''",[1588,2411,1699],{"class":1593},[1588,2413,2415,2418,2421],{"class":1590,"line":2414},63,[1588,2416,2417],{"class":1593}," align: ",[1588,2419,2420],{"class":1611},"'left'",[1588,2422,1699],{"class":1593},[1588,2424,2426],{"class":1590,"line":2425},64,[1588,2427,2345],{"class":1593},[1588,2429,2431],{"class":1590,"line":2430},65,[1588,2432,2433],{"class":1593}," dataLabels: {\n",[1588,2435,2437,2440,2442],{"class":1590,"line":2436},66,[1588,2438,2439],{"class":1593}," enabled: ",[1588,2441,2235],{"class":1624},[1588,2443,1699],{"class":1593},[1588,2445,2447],{"class":1590,"line":2446},67,[1588,2448,2345],{"class":1593},[1588,2450,2452],{"class":1590,"line":2451},68,[1588,2453,2454],{"class":1593}," markers: {\n",[1588,2456,2458,2461,2463],{"class":1590,"line":2457},69,[1588,2459,2460],{"class":1593}," size: ",[1588,2462,1713],{"class":1624},[1588,2464,1699],{"class":1593},[1588,2466,2468,2471,2474],{"class":1590,"line":2467},70,[1588,2469,2470],{"class":1593}," strokeColors: ",[1588,2472,2473],{"class":1611},"'#fff'",[1588,2475,1699],{"class":1593},[1588,2477,2479,2482,2484],{"class":1590,"line":2478},71,[1588,2480,2481],{"class":1593}," strokeWidth: ",[1588,2483,2387],{"class":1624},[1588,2485,1699],{"class":1593},[1588,2487,2489,2492,2494],{"class":1590,"line":2488},72,[1588,2490,2491],{"class":1593}," strokeOpacity: ",[1588,2493,1755],{"class":1624},[1588,2495,1699],{"class":1593},[1588,2497,2499,2502,2504],{"class":1590,"line":2498},73,[1588,2500,2501],{"class":1593}," fillOpacity: ",[1588,2503,1755],{"class":1624},[1588,2505,1699],{"class":1593},[1588,2507,2509],{"class":1590,"line":2508},74,[1588,2510,2511],{"class":1593}," hover: {\n",[1588,2513,2515,2518,2521],{"class":1590,"line":2514},75,[1588,2516,2517],{"class":1593}," size: ",[1588,2519,2520],{"class":1624},"6",[1588,2522,1699],{"class":1593},[1588,2524,2526],{"class":1590,"line":2525},76,[1588,2527,2243],{"class":1593},[1588,2529,2531],{"class":1590,"line":2530},77,[1588,2532,2345],{"class":1593},[1588,2534,2536],{"class":1590,"line":2535},78,[1588,2537,2538],{"class":1593}," xaxis: {\n",[1588,2540,2542,2545,2548],{"class":1590,"line":2541},79,[1588,2543,2544],{"class":1593}," type: ",[1588,2546,2547],{"class":1611},"'datetime'",[1588,2549,1699],{"class":1593},[1588,2551,2553],{"class":1590,"line":2552},80,[1588,2554,2555],{"class":1593}," axisBorder: {\n",[1588,2557,2559,2561,2563],{"class":1590,"line":2558},81,[1588,2560,2232],{"class":1593},[1588,2562,2235],{"class":1624},[1588,2564,1699],{"class":1593},[1588,2566,2568],{"class":1590,"line":2567},82,[1588,2569,2243],{"class":1593},[1588,2571,2573],{"class":1590,"line":2572},83,[1588,2574,2575],{"class":1593}," axisTicks: {\n",[1588,2577,2579,2581,2583],{"class":1590,"line":2578},84,[1588,2580,2232],{"class":1593},[1588,2582,2235],{"class":1624},[1588,2584,1699],{"class":1593},[1588,2586,2588],{"class":1590,"line":2587},85,[1588,2589,2243],{"class":1593},[1588,2591,2593],{"class":1590,"line":2592},86,[1588,2594,2345],{"class":1593},[1588,2596,2598],{"class":1590,"line":2597},87,[1588,2599,2600],{"class":1593}," yaxis: {\n",[1588,2602,2604],{"class":1590,"line":2603},88,[1588,2605,2606],{"class":1593}," labels: {\n",[1588,2608,2610,2613,2615],{"class":1590,"line":2609},89,[1588,2611,2612],{"class":1593}," offsetX: ",[1588,2614,1713],{"class":1624},[1588,2616,1699],{"class":1593},[1588,2618,2620,2623,2625,2627],{"class":1590,"line":2619},90,[1588,2621,2622],{"class":1593}," offsetY: ",[1588,2624,2298],{"class":1620},[1588,2626,2321],{"class":1624},[1588,2628,1699],{"class":1593},[1588,2630,2632],{"class":1590,"line":2631},91,[1588,2633,2243],{"class":1593},[1588,2635,2637],{"class":1590,"line":2636},92,[1588,2638,2639],{"class":1593}," tooltip: {\n",[1588,2641,2643,2645,2647],{"class":1590,"line":2642},93,[1588,2644,2255],{"class":1593},[1588,2646,2218],{"class":1624},[1588,2648,1699],{"class":1593},[1588,2650,2652],{"class":1590,"line":2651},94,[1588,2653,2243],{"class":1593},[1588,2655,2657],{"class":1590,"line":2656},95,[1588,2658,2345],{"class":1593},[1588,2660,2662],{"class":1590,"line":2661},96,[1588,2663,2664],{"class":1593}," grid: {\n",[1588,2666,2668,2671,2673],{"class":1590,"line":2667},97,[1588,2669,2670],{"class":1593}," show: ",[1588,2672,2218],{"class":1624},[1588,2674,1699],{"class":1593},[1588,2676,2678],{"class":1590,"line":2677},98,[1588,2679,2680],{"class":1593}," padding: {\n",[1588,2682,2684,2686,2688,2690],{"class":1590,"line":2683},99,[1588,2685,2308],{"class":1593},[1588,2687,2298],{"class":1620},[1588,2689,2321],{"class":1624},[1588,2691,1699],{"class":1593},[1588,2693,2695,2698,2700],{"class":1590,"line":2694},100,[1588,2696,2697],{"class":1593}," right: ",[1588,2699,2321],{"class":1624},[1588,2701,1699],{"class":1593},[1588,2703,2705],{"class":1590,"line":2704},101,[1588,2706,2243],{"class":1593},[1588,2708,2710],{"class":1590,"line":2709},102,[1588,2711,2345],{"class":1593},[1588,2713,2715],{"class":1590,"line":2714},103,[1588,2716,2717],{"class":1593}," tooltip: {\n",[1588,2719,2721],{"class":1590,"line":2720},104,[1588,2722,2723],{"class":1593}," x: {\n",[1588,2725,2727,2730,2733],{"class":1590,"line":2726},105,[1588,2728,2729],{"class":1593}," format: ",[1588,2731,2732],{"class":1611},"'dd MMM yyyy'",[1588,2734,1699],{"class":1593},[1588,2736,2738],{"class":1590,"line":2737},106,[1588,2739,2243],{"class":1593},[1588,2741,2743],{"class":1590,"line":2742},107,[1588,2744,2745],{"class":1593}," y: {\n",[1588,2747,2749,2752,2755,2758,2761,2764,2766,2769],{"class":1590,"line":2748},108,[1588,2750,2751],{"class":1601}," formatter",[1588,2753,2754],{"class":1593},": ",[1588,2756,2757],{"class":1791},"value",[1588,2759,2760],{"class":1620}," =>",[1588,2762,2763],{"class":1611}," `${",[1588,2765,2757],{"class":1593},[1588,2767,2768],{"class":1611},"} %`",[1588,2770,1699],{"class":1593},[1588,2772,2774],{"class":1590,"line":2773},109,[1588,2775,2243],{"class":1593},[1588,2777,2779],{"class":1590,"line":2778},110,[1588,2780,2345],{"class":1593},[1588,2782,2784],{"class":1590,"line":2783},111,[1588,2785,2786],{"class":1593}," legend: {\n",[1588,2788,2790,2793,2796],{"class":1590,"line":2789},112,[1588,2791,2792],{"class":1593}," position: ",[1588,2794,2795],{"class":1611},"'top'",[1588,2797,1699],{"class":1593},[1588,2799,2801,2804,2807],{"class":1590,"line":2800},113,[1588,2802,2803],{"class":1593}," horizontalAlign: ",[1588,2805,2806],{"class":1611},"'center'",[1588,2808,1699],{"class":1593},[1588,2810,2812],{"class":1590,"line":2811},114,[1588,2813,2345],{"class":1593},[1588,2815,2817],{"class":1590,"line":2816},115,[1588,2818,2819],{"class":1593}," fill: {\n",[1588,2821,2823,2825,2828],{"class":1590,"line":2822},116,[1588,2824,2544],{"class":1593},[1588,2826,2827],{"class":1611},"'solid'",[1588,2829,1699],{"class":1593},[1588,2831,2833,2836,2838],{"class":1590,"line":2832},117,[1588,2834,2835],{"class":1593}," opacity: ",[1588,2837,1876],{"class":1624},[1588,2839,1699],{"class":1593},[1588,2841,2843],{"class":1590,"line":2842},118,[1588,2844,2345],{"class":1593},[1588,2846,2848],{"class":1590,"line":2847},119,[1588,2849,1728],{"class":1593},[1588,2851,2853],{"class":1590,"line":2852},120,[1588,2854,2855],{"class":1593}," })\n",[1588,2857,2859],{"class":1590,"line":2858},121,[1588,2860,2861],{"class":1593},"}\n",[1588,2863,2865,2868,2870],{"class":1590,"line":2864},122,[1588,2866,2867],{"class":1593},"\u003C/",[1588,2869,1598],{"class":1597},[1588,2871,1615],{"class":1593},[1588,2873,2875],{"class":1590,"line":2874},123,[1588,2876,1646],{"emptyLinePlaceholder":1645},[1588,2878,2880,2882,2884],{"class":1590,"line":2879},124,[1588,2881,1594],{"class":1593},[1588,2883,1567],{"class":1597},[1588,2885,1615],{"class":1593},[1588,2887,2889,2892,2895,2898,2900,2903],{"class":1590,"line":2888},125,[1588,2890,2891],{"class":1593}," \u003C",[1588,2893,2894],{"class":1597},"div",[1588,2896,2897],{"class":1601}," class",[1588,2899,1608],{"class":1593},[1588,2901,2902],{"class":1611},"\"w-full\"",[1588,2904,1615],{"class":1593},[1588,2906,2908,2911,2913,2915,2917,2920],{"class":1590,"line":2907},126,[1588,2909,2910],{"class":1593}," \u003C",[1588,2912,2894],{"class":1597},[1588,2914,2897],{"class":1601},[1588,2916,1608],{"class":1593},[1588,2918,2919],{"class":1611},"\"mb-6\"",[1588,2921,1615],{"class":1593},[1588,2923,2925,2928],{"class":1590,"line":2924},127,[1588,2926,2927],{"class":1593}," \u003C",[1588,2929,2930],{"class":1597},"BaseHeading\n",[1588,2932,2934,2937,2939],{"class":1590,"line":2933},128,[1588,2935,2936],{"class":1601}," as",[1588,2938,1608],{"class":1593},[1588,2940,2941],{"class":1611},"\"h3\"\n",[1588,2943,2945,2948,2950],{"class":1590,"line":2944},129,[1588,2946,2947],{"class":1601}," size",[1588,2949,1608],{"class":1593},[1588,2951,2952],{"class":1611},"\"md\"\n",[1588,2954,2956,2959,2961],{"class":1590,"line":2955},130,[1588,2957,2958],{"class":1601}," weight",[1588,2960,1608],{"class":1593},[1588,2962,2963],{"class":1611},"\"semibold\"\n",[1588,2965,2967,2970,2972],{"class":1590,"line":2966},131,[1588,2968,2969],{"class":1601}," lead",[1588,2971,1608],{"class":1593},[1588,2973,2974],{"class":1611},"\"tight\"\n",[1588,2976,2978,2981,2983],{"class":1590,"line":2977},132,[1588,2979,2980],{"class":1601}," class",[1588,2982,1608],{"class":1593},[1588,2984,2985],{"class":1611},"\"text-muted-800 dark:text-white\"\n",[1588,2987,2989],{"class":1590,"line":2988},133,[1588,2990,2991],{"class":1593}," >\n",[1588,2993,2995,2998,3000,3003,3005],{"class":1590,"line":2994},134,[1588,2996,2997],{"class":1593}," \u003C",[1588,2999,1588],{"class":1597},[1588,3001,3002],{"class":1593},">BTC Price Chart\u003C/",[1588,3004,1588],{"class":1597},[1588,3006,1615],{"class":1593},[1588,3008,3010,3013,3016],{"class":1590,"line":3009},135,[1588,3011,3012],{"class":1593}," \u003C/",[1588,3014,3015],{"class":1597},"BaseHeading",[1588,3017,1615],{"class":1593},[1588,3019,3021,3024,3026],{"class":1590,"line":3020},136,[1588,3022,3023],{"class":1593}," \u003C/",[1588,3025,2894],{"class":1597},[1588,3027,1615],{"class":1593},[1588,3029,3031],{"class":1590,"line":3030},137,[1588,3032,1646],{"emptyLinePlaceholder":1645},[1588,3034,3036,3038,3041,3044,3046,3049],{"class":1590,"line":3035},138,[1588,3037,2910],{"class":1593},[1588,3039,3040],{"class":1597},"LazyAddonApexcharts",[1588,3042,3043],{"class":1601}," v-bind",[1588,3045,1608],{"class":1593},[1588,3047,3048],{"class":1611},"\"areaBtcPrice\"",[1588,3050,3051],{"class":1593}," />\n",[1588,3053,3055,3058,3060],{"class":1590,"line":3054},139,[1588,3056,3057],{"class":1593}," \u003C/",[1588,3059,2894],{"class":1597},[1588,3061,1615],{"class":1593},[1588,3063,3065,3067,3069],{"class":1590,"line":3064},140,[1588,3066,2867],{"class":1593},[1588,3068,1567],{"class":1597},[1588,3070,1615],{"class":1593},[1560,3072,332],{"id":3073},"components",[3075,3076,1246],"h3",{"id":3077},"addonapexcharts",[3079,3080],"doc-component-meta",{"name":1246},[3082,3083,1248],"style",{},{"title":9,"searchDepth":16,"depth":45,"links":3085},[3086,3087],{"id":1562,"depth":16,"text":591},{"id":3073,"depth":16,"text":332,"children":3088},[3089],{"id":3077,"depth":45,"text":1246},[1246],"md",{"src":3093,"srcDark":3093},"/img/illustrations/components/apexcharts-icon.svg",{},{"title":1507},{"title":1230,"description":1232},"hvEsx8K1LJjHwO9Dt8MCXjjGnZtoQ_Fukmm3ZSZFwzg",{"id":1525,"title":1230,"body":3099,"components":4263,"description":1232,"extension":3091,"icon":4264,"meta":4265,"navigation":4266,"path":1229,"seo":4267,"stem":1508,"toc":1430,"__hash__":3097},{"type":1527,"value":3100,"toc":4257},[3101,3103,3113,3115,3117,4249,4251,4253,4255],[1530,3102,1230],{"id":1532},[1534,3104,3105],{"icon":1536,"title":1537},[1539,3106,1541,3107,1549,3110,1555],{},[1543,3108,1548],{"href":1545,"rel":3109},[1547],[1543,3111,1554],{"href":1552,"rel":3112},[1547],[1539,3114,1558],{},[1560,3116,591],{"id":1562},[1564,3118,3119,3123],{},[1567,3120,3121],{"v-slot:demo":9},[1570,3122],{},[1567,3124,3125],{"v-slot:source":9},[1575,3126,3127],{},[1578,3128,3129],{"className":1580,"code":1581,"filename":1582,"language":1583,"meta":9,"style":9},[1585,3130,3131,3147,3163,3167,3171,3179,3191,3195,3203,3219,3223,3227,3235,3251,3255,3259,3263,3287,3297,3373,3449,3453,3463,3473,3495,3505,3521,3529,3535,3539,3545,3549,3553,3561,3569,3577,3581,3585,3589,3597,3605,3609,3617,3621,3625,3633,3637,3641,3649,3657,3667,3675,3683,3691,3695,3699,3711,3715,3723,3731,3735,3739,3747,3755,3759,3763,3771,3775,3779,3787,3795,3803,3811,3819,3823,3831,3835,3839,3843,3851,3855,3863,3867,3871,3879,3883,3887,3891,3895,3903,3913,3917,3921,3929,3933,3937,3941,3949,3953,3963,3971,3975,3979,3983,3987,3995,3999,4003,4021,4025,4029,4033,4041,4049,4053,4057,4065,4073,4077,4081,4085,4089,4097,4101,4109,4123,4137,4143,4151,4159,4167,4175,4183,4187,4199,4207,4215,4219,4233,4241],{"__ignoreMap":9},[1588,3132,3133,3135,3137,3139,3141,3143,3145],{"class":1590,"line":10},[1588,3134,1594],{"class":1593},[1588,3136,1598],{"class":1597},[1588,3138,1602],{"class":1601},[1588,3140,1605],{"class":1601},[1588,3142,1608],{"class":1593},[1588,3144,1612],{"class":1611},[1588,3146,1615],{"class":1593},[1588,3148,3149,3151,3153,3155,3157,3159,3161],{"class":1590,"line":16},[1588,3150,1621],{"class":1620},[1588,3152,1625],{"class":1624},[1588,3154,1628],{"class":1620},[1588,3156,1631],{"class":1601},[1588,3158,1634],{"class":1593},[1588,3160,1637],{"class":1601},[1588,3162,1640],{"class":1593},[1588,3164,3165],{"class":1590,"line":45},[1588,3166,1646],{"emptyLinePlaceholder":1645},[1588,3168,3169],{"class":1590,"line":177},[1588,3170,1652],{"class":1651},[1588,3172,3173,3175,3177],{"class":1590,"line":1655},[1588,3174,1658],{"class":1620},[1588,3176,1661],{"class":1601},[1588,3178,1664],{"class":1593},[1588,3180,3181,3183,3185,3187,3189],{"class":1590,"line":1667},[1588,3182,1670],{"class":1620},[1588,3184,1673],{"class":1624},[1588,3186,1628],{"class":1620},[1588,3188,1678],{"class":1601},[1588,3190,1681],{"class":1593},[1588,3192,3193],{"class":1590,"line":1684},[1588,3194,1687],{"class":1593},[1588,3196,3197,3199,3201],{"class":1590,"line":1690},[1588,3198,1693],{"class":1593},[1588,3200,1696],{"class":1611},[1588,3202,1699],{"class":1593},[1588,3204,3205,3207,3209,3211,3213,3215,3217],{"class":1590,"line":1702},[1588,3206,1705],{"class":1593},[1588,3208,1708],{"class":1601},[1588,3210,1634],{"class":1593},[1588,3212,1713],{"class":1624},[1588,3214,1716],{"class":1593},[1588,3216,1719],{"class":1624},[1588,3218,1722],{"class":1593},[1588,3220,3221],{"class":1590,"line":1725},[1588,3222,1728],{"class":1593},[1588,3224,3225],{"class":1590,"line":1731},[1588,3226,1687],{"class":1593},[1588,3228,3229,3231,3233],{"class":1590,"line":1736},[1588,3230,1693],{"class":1593},[1588,3232,1741],{"class":1611},[1588,3234,1699],{"class":1593},[1588,3236,3237,3239,3241,3243,3245,3247,3249],{"class":1590,"line":1746},[1588,3238,1705],{"class":1593},[1588,3240,1708],{"class":1601},[1588,3242,1634],{"class":1593},[1588,3244,1755],{"class":1624},[1588,3246,1716],{"class":1593},[1588,3248,1719],{"class":1624},[1588,3250,1722],{"class":1593},[1588,3252,3253],{"class":1590,"line":1764},[1588,3254,1728],{"class":1593},[1588,3256,3257],{"class":1590,"line":1769},[1588,3258,1772],{"class":1593},[1588,3260,3261],{"class":1590,"line":1775},[1588,3262,1646],{"emptyLinePlaceholder":1645},[1588,3264,3265,3267,3269,3271,3273,3275,3277,3279,3281,3283,3285],{"class":1590,"line":1780},[1588,3266,1783],{"class":1620},[1588,3268,1786],{"class":1601},[1588,3270,1634],{"class":1593},[1588,3272,1792],{"class":1791},[1588,3274,1795],{"class":1620},[1588,3276,1798],{"class":1624},[1588,3278,1716],{"class":1593},[1588,3280,1803],{"class":1791},[1588,3282,1795],{"class":1620},[1588,3284,1798],{"class":1624},[1588,3286,1810],{"class":1593},[1588,3288,3289,3291,3293,3295],{"class":1590,"line":1813},[1588,3290,1816],{"class":1620},[1588,3292,1819],{"class":1624},[1588,3294,1628],{"class":1620},[1588,3296,1824],{"class":1593},[1588,3298,3299,3301,3303,3305,3307,3309,3311,3313,3315,3317,3319,3321,3323,3325,3327,3329,3331,3333,3335,3337,3339,3341,3343,3345,3347,3349,3351,3353,3355,3357,3359,3361,3363,3365,3367,3369,3371],{"class":1590,"line":1827},[1588,3300,1830],{"class":1593},[1588,3302,1833],{"class":1624},[1588,3304,1716],{"class":1593},[1588,3306,1838],{"class":1624},[1588,3308,1716],{"class":1593},[1588,3310,1755],{"class":1624},[1588,3312,1716],{"class":1593},[1588,3314,1847],{"class":1624},[1588,3316,1716],{"class":1593},[1588,3318,1852],{"class":1624},[1588,3320,1716],{"class":1593},[1588,3322,1857],{"class":1624},[1588,3324,1716],{"class":1593},[1588,3326,1862],{"class":1624},[1588,3328,1716],{"class":1593},[1588,3330,1847],{"class":1624},[1588,3332,1716],{"class":1593},[1588,3334,1871],{"class":1624},[1588,3336,1716],{"class":1593},[1588,3338,1876],{"class":1624},[1588,3340,1716],{"class":1593},[1588,3342,1857],{"class":1624},[1588,3344,1716],{"class":1593},[1588,3346,1885],{"class":1624},[1588,3348,1716],{"class":1593},[1588,3350,1890],{"class":1624},[1588,3352,1716],{"class":1593},[1588,3354,1847],{"class":1624},[1588,3356,1716],{"class":1593},[1588,3358,1899],{"class":1624},[1588,3360,1716],{"class":1593},[1588,3362,1904],{"class":1624},[1588,3364,1716],{"class":1593},[1588,3366,1876],{"class":1624},[1588,3368,1716],{"class":1593},[1588,3370,1885],{"class":1624},[1588,3372,1915],{"class":1593},[1588,3374,3375,3377,3379,3381,3383,3385,3387,3389,3391,3393,3395,3397,3399,3401,3403,3405,3407,3409,3411,3413,3415,3417,3419,3421,3423,3425,3427,3429,3431,3433,3435,3437,3439,3441,3443,3445,3447],{"class":1590,"line":1918},[1588,3376,1830],{"class":1593},[1588,3378,1904],{"class":1624},[1588,3380,1716],{"class":1593},[1588,3382,1838],{"class":1624},[1588,3384,1716],{"class":1593},[1588,3386,1931],{"class":1624},[1588,3388,1716],{"class":1593},[1588,3390,1876],{"class":1624},[1588,3392,1716],{"class":1593},[1588,3394,1940],{"class":1624},[1588,3396,1716],{"class":1593},[1588,3398,1945],{"class":1624},[1588,3400,1716],{"class":1593},[1588,3402,1950],{"class":1624},[1588,3404,1716],{"class":1593},[1588,3406,1876],{"class":1624},[1588,3408,1716],{"class":1593},[1588,3410,1959],{"class":1624},[1588,3412,1716],{"class":1593},[1588,3414,1885],{"class":1624},[1588,3416,1716],{"class":1593},[1588,3418,1871],{"class":1624},[1588,3420,1716],{"class":1593},[1588,3422,1885],{"class":1624},[1588,3424,1716],{"class":1593},[1588,3426,1755],{"class":1624},[1588,3428,1716],{"class":1593},[1588,3430,1833],{"class":1624},[1588,3432,1716],{"class":1593},[1588,3434,1984],{"class":1624},[1588,3436,1716],{"class":1593},[1588,3438,1904],{"class":1624},[1588,3440,1716],{"class":1593},[1588,3442,1993],{"class":1624},[1588,3444,1716],{"class":1593},[1588,3446,1998],{"class":1624},[1588,3448,1915],{"class":1593},[1588,3450,3451],{"class":1590,"line":2003},[1588,3452,2006],{"class":1593},[1588,3454,3455,3457,3459,3461],{"class":1590,"line":2009},[1588,3456,2012],{"class":1620},[1588,3458,2015],{"class":1593},[1588,3460,1608],{"class":1620},[1588,3462,2020],{"class":1624},[1588,3464,3465,3467,3469,3471],{"class":1590,"line":2023},[1588,3466,1816],{"class":1620},[1588,3468,1673],{"class":1624},[1588,3470,1628],{"class":1620},[1588,3472,2032],{"class":1593},[1588,3474,3475,3477,3479,3481,3483,3485,3487,3489,3491,3493],{"class":1590,"line":2035},[1588,3476,2012],{"class":1620},[1588,3478,2040],{"class":1593},[1588,3480,1608],{"class":1620},[1588,3482,2045],{"class":1620},[1588,3484,2048],{"class":1601},[1588,3486,1634],{"class":1593},[1588,3488,2053],{"class":1611},[1588,3490,2056],{"class":1593},[1588,3492,2059],{"class":1601},[1588,3494,2062],{"class":1593},[1588,3496,3497,3499,3501,3503],{"class":1590,"line":2065},[1588,3498,2068],{"class":1620},[1588,3500,2071],{"class":1593},[1588,3502,1594],{"class":1620},[1588,3504,2076],{"class":1593},[1588,3506,3507,3509,3511,3513,3515,3517,3519],{"class":1590,"line":2079},[1588,3508,2082],{"class":1593},[1588,3510,2085],{"class":1601},[1588,3512,2088],{"class":1593},[1588,3514,2091],{"class":1620},[1588,3516,2094],{"class":1593},[1588,3518,2091],{"class":1620},[1588,3520,2099],{"class":1593},[1588,3522,3523,3525,3527],{"class":1590,"line":2102},[1588,3524,2105],{"class":1593},[1588,3526,2108],{"class":1620},[1588,3528,2111],{"class":1624},[1588,3530,3531,3533],{"class":1590,"line":2114},[1588,3532,2117],{"class":1593},[1588,3534,2120],{"class":1620},[1588,3536,3537],{"class":1590,"line":2123},[1588,3538,2126],{"class":1593},[1588,3540,3541,3543],{"class":1590,"line":2129},[1588,3542,2132],{"class":1620},[1588,3544,2135],{"class":1593},[1588,3546,3547],{"class":1590,"line":2138},[1588,3548,2141],{"class":1593},[1588,3550,3551],{"class":1590,"line":2144},[1588,3552,1646],{"emptyLinePlaceholder":1645},[1588,3554,3555,3557,3559],{"class":1590,"line":2149},[1588,3556,2152],{"class":1620},[1588,3558,2155],{"class":1601},[1588,3560,2158],{"class":1593},[1588,3562,3563,3565,3567],{"class":1590,"line":2161},[1588,3564,2164],{"class":1593},[1588,3566,2167],{"class":1611},[1588,3568,1699],{"class":1593},[1588,3570,3571,3573,3575],{"class":1590,"line":2172},[1588,3572,2175],{"class":1593},[1588,3574,2178],{"class":1624},[1588,3576,1699],{"class":1593},[1588,3578,3579],{"class":1590,"line":2183},[1588,3580,2186],{"class":1593},[1588,3582,3583],{"class":1590,"line":2189},[1588,3584,2192],{"class":1593},[1588,3586,3587],{"class":1590,"line":2195},[1588,3588,2198],{"class":1593},[1588,3590,3591,3593,3595],{"class":1590,"line":2201},[1588,3592,2204],{"class":1593},[1588,3594,2207],{"class":1611},[1588,3596,1699],{"class":1593},[1588,3598,3599,3601,3603],{"class":1590,"line":2212},[1588,3600,2215],{"class":1593},[1588,3602,2218],{"class":1624},[1588,3604,1699],{"class":1593},[1588,3606,3607],{"class":1590,"line":2223},[1588,3608,2226],{"class":1593},[1588,3610,3611,3613,3615],{"class":1590,"line":2229},[1588,3612,2232],{"class":1593},[1588,3614,2235],{"class":1624},[1588,3616,1699],{"class":1593},[1588,3618,3619],{"class":1590,"line":2240},[1588,3620,2243],{"class":1593},[1588,3622,3623],{"class":1590,"line":2246},[1588,3624,2249],{"class":1593},[1588,3626,3627,3629,3631],{"class":1590,"line":2252},[1588,3628,2255],{"class":1593},[1588,3630,2235],{"class":1624},[1588,3632,1699],{"class":1593},[1588,3634,3635],{"class":1590,"line":2262},[1588,3636,2243],{"class":1593},[1588,3638,3639],{"class":1590,"line":2267},[1588,3640,2270],{"class":1593},[1588,3642,3643,3645,3647],{"class":1590,"line":2273},[1588,3644,2255],{"class":1593},[1588,3646,2218],{"class":1624},[1588,3648,1699],{"class":1593},[1588,3650,3651,3653,3655],{"class":1590,"line":2282},[1588,3652,2285],{"class":1593},[1588,3654,1713],{"class":1624},[1588,3656,1915],{"class":1593},[1588,3658,3659,3661,3663,3665],{"class":1590,"line":2292},[1588,3660,2295],{"class":1593},[1588,3662,2298],{"class":1620},[1588,3664,1998],{"class":1624},[1588,3666,1699],{"class":1593},[1588,3668,3669,3671,3673],{"class":1590,"line":2305},[1588,3670,2308],{"class":1593},[1588,3672,1998],{"class":1624},[1588,3674,1699],{"class":1593},[1588,3676,3677,3679,3681],{"class":1590,"line":2315},[1588,3678,2318],{"class":1593},[1588,3680,2321],{"class":1624},[1588,3682,1699],{"class":1593},[1588,3684,3685,3687,3689],{"class":1590,"line":2326},[1588,3686,2329],{"class":1593},[1588,3688,2332],{"class":1624},[1588,3690,1699],{"class":1593},[1588,3692,3693],{"class":1590,"line":2337},[1588,3694,2243],{"class":1593},[1588,3696,3697],{"class":1590,"line":2342},[1588,3698,2345],{"class":1593},[1588,3700,3701,3703,3705,3707,3709],{"class":1590,"line":2348},[1588,3702,2351],{"class":1593},[1588,3704,2354],{"class":1611},[1588,3706,1716],{"class":1593},[1588,3708,2359],{"class":1611},[1588,3710,1915],{"class":1593},[1588,3712,3713],{"class":1590,"line":2364},[1588,3714,2367],{"class":1593},[1588,3716,3717,3719,3721],{"class":1590,"line":2370},[1588,3718,2373],{"class":1593},[1588,3720,2376],{"class":1611},[1588,3722,1699],{"class":1593},[1588,3724,3725,3727,3729],{"class":1590,"line":2381},[1588,3726,2384],{"class":1593},[1588,3728,2387],{"class":1624},[1588,3730,1699],{"class":1593},[1588,3732,3733],{"class":1590,"line":2392},[1588,3734,2345],{"class":1593},[1588,3736,3737],{"class":1590,"line":2397},[1588,3738,2400],{"class":1593},[1588,3740,3741,3743,3745],{"class":1590,"line":2403},[1588,3742,2406],{"class":1593},[1588,3744,2409],{"class":1611},[1588,3746,1699],{"class":1593},[1588,3748,3749,3751,3753],{"class":1590,"line":2414},[1588,3750,2417],{"class":1593},[1588,3752,2420],{"class":1611},[1588,3754,1699],{"class":1593},[1588,3756,3757],{"class":1590,"line":2425},[1588,3758,2345],{"class":1593},[1588,3760,3761],{"class":1590,"line":2430},[1588,3762,2433],{"class":1593},[1588,3764,3765,3767,3769],{"class":1590,"line":2436},[1588,3766,2439],{"class":1593},[1588,3768,2235],{"class":1624},[1588,3770,1699],{"class":1593},[1588,3772,3773],{"class":1590,"line":2446},[1588,3774,2345],{"class":1593},[1588,3776,3777],{"class":1590,"line":2451},[1588,3778,2454],{"class":1593},[1588,3780,3781,3783,3785],{"class":1590,"line":2457},[1588,3782,2460],{"class":1593},[1588,3784,1713],{"class":1624},[1588,3786,1699],{"class":1593},[1588,3788,3789,3791,3793],{"class":1590,"line":2467},[1588,3790,2470],{"class":1593},[1588,3792,2473],{"class":1611},[1588,3794,1699],{"class":1593},[1588,3796,3797,3799,3801],{"class":1590,"line":2478},[1588,3798,2481],{"class":1593},[1588,3800,2387],{"class":1624},[1588,3802,1699],{"class":1593},[1588,3804,3805,3807,3809],{"class":1590,"line":2488},[1588,3806,2491],{"class":1593},[1588,3808,1755],{"class":1624},[1588,3810,1699],{"class":1593},[1588,3812,3813,3815,3817],{"class":1590,"line":2498},[1588,3814,2501],{"class":1593},[1588,3816,1755],{"class":1624},[1588,3818,1699],{"class":1593},[1588,3820,3821],{"class":1590,"line":2508},[1588,3822,2511],{"class":1593},[1588,3824,3825,3827,3829],{"class":1590,"line":2514},[1588,3826,2517],{"class":1593},[1588,3828,2520],{"class":1624},[1588,3830,1699],{"class":1593},[1588,3832,3833],{"class":1590,"line":2525},[1588,3834,2243],{"class":1593},[1588,3836,3837],{"class":1590,"line":2530},[1588,3838,2345],{"class":1593},[1588,3840,3841],{"class":1590,"line":2535},[1588,3842,2538],{"class":1593},[1588,3844,3845,3847,3849],{"class":1590,"line":2541},[1588,3846,2544],{"class":1593},[1588,3848,2547],{"class":1611},[1588,3850,1699],{"class":1593},[1588,3852,3853],{"class":1590,"line":2552},[1588,3854,2555],{"class":1593},[1588,3856,3857,3859,3861],{"class":1590,"line":2558},[1588,3858,2232],{"class":1593},[1588,3860,2235],{"class":1624},[1588,3862,1699],{"class":1593},[1588,3864,3865],{"class":1590,"line":2567},[1588,3866,2243],{"class":1593},[1588,3868,3869],{"class":1590,"line":2572},[1588,3870,2575],{"class":1593},[1588,3872,3873,3875,3877],{"class":1590,"line":2578},[1588,3874,2232],{"class":1593},[1588,3876,2235],{"class":1624},[1588,3878,1699],{"class":1593},[1588,3880,3881],{"class":1590,"line":2587},[1588,3882,2243],{"class":1593},[1588,3884,3885],{"class":1590,"line":2592},[1588,3886,2345],{"class":1593},[1588,3888,3889],{"class":1590,"line":2597},[1588,3890,2600],{"class":1593},[1588,3892,3893],{"class":1590,"line":2603},[1588,3894,2606],{"class":1593},[1588,3896,3897,3899,3901],{"class":1590,"line":2609},[1588,3898,2612],{"class":1593},[1588,3900,1713],{"class":1624},[1588,3902,1699],{"class":1593},[1588,3904,3905,3907,3909,3911],{"class":1590,"line":2619},[1588,3906,2622],{"class":1593},[1588,3908,2298],{"class":1620},[1588,3910,2321],{"class":1624},[1588,3912,1699],{"class":1593},[1588,3914,3915],{"class":1590,"line":2631},[1588,3916,2243],{"class":1593},[1588,3918,3919],{"class":1590,"line":2636},[1588,3920,2639],{"class":1593},[1588,3922,3923,3925,3927],{"class":1590,"line":2642},[1588,3924,2255],{"class":1593},[1588,3926,2218],{"class":1624},[1588,3928,1699],{"class":1593},[1588,3930,3931],{"class":1590,"line":2651},[1588,3932,2243],{"class":1593},[1588,3934,3935],{"class":1590,"line":2656},[1588,3936,2345],{"class":1593},[1588,3938,3939],{"class":1590,"line":2661},[1588,3940,2664],{"class":1593},[1588,3942,3943,3945,3947],{"class":1590,"line":2667},[1588,3944,2670],{"class":1593},[1588,3946,2218],{"class":1624},[1588,3948,1699],{"class":1593},[1588,3950,3951],{"class":1590,"line":2677},[1588,3952,2680],{"class":1593},[1588,3954,3955,3957,3959,3961],{"class":1590,"line":2683},[1588,3956,2308],{"class":1593},[1588,3958,2298],{"class":1620},[1588,3960,2321],{"class":1624},[1588,3962,1699],{"class":1593},[1588,3964,3965,3967,3969],{"class":1590,"line":2694},[1588,3966,2697],{"class":1593},[1588,3968,2321],{"class":1624},[1588,3970,1699],{"class":1593},[1588,3972,3973],{"class":1590,"line":2704},[1588,3974,2243],{"class":1593},[1588,3976,3977],{"class":1590,"line":2709},[1588,3978,2345],{"class":1593},[1588,3980,3981],{"class":1590,"line":2714},[1588,3982,2717],{"class":1593},[1588,3984,3985],{"class":1590,"line":2720},[1588,3986,2723],{"class":1593},[1588,3988,3989,3991,3993],{"class":1590,"line":2726},[1588,3990,2729],{"class":1593},[1588,3992,2732],{"class":1611},[1588,3994,1699],{"class":1593},[1588,3996,3997],{"class":1590,"line":2737},[1588,3998,2243],{"class":1593},[1588,4000,4001],{"class":1590,"line":2742},[1588,4002,2745],{"class":1593},[1588,4004,4005,4007,4009,4011,4013,4015,4017,4019],{"class":1590,"line":2748},[1588,4006,2751],{"class":1601},[1588,4008,2754],{"class":1593},[1588,4010,2757],{"class":1791},[1588,4012,2760],{"class":1620},[1588,4014,2763],{"class":1611},[1588,4016,2757],{"class":1593},[1588,4018,2768],{"class":1611},[1588,4020,1699],{"class":1593},[1588,4022,4023],{"class":1590,"line":2773},[1588,4024,2243],{"class":1593},[1588,4026,4027],{"class":1590,"line":2778},[1588,4028,2345],{"class":1593},[1588,4030,4031],{"class":1590,"line":2783},[1588,4032,2786],{"class":1593},[1588,4034,4035,4037,4039],{"class":1590,"line":2789},[1588,4036,2792],{"class":1593},[1588,4038,2795],{"class":1611},[1588,4040,1699],{"class":1593},[1588,4042,4043,4045,4047],{"class":1590,"line":2800},[1588,4044,2803],{"class":1593},[1588,4046,2806],{"class":1611},[1588,4048,1699],{"class":1593},[1588,4050,4051],{"class":1590,"line":2811},[1588,4052,2345],{"class":1593},[1588,4054,4055],{"class":1590,"line":2816},[1588,4056,2819],{"class":1593},[1588,4058,4059,4061,4063],{"class":1590,"line":2822},[1588,4060,2544],{"class":1593},[1588,4062,2827],{"class":1611},[1588,4064,1699],{"class":1593},[1588,4066,4067,4069,4071],{"class":1590,"line":2832},[1588,4068,2835],{"class":1593},[1588,4070,1876],{"class":1624},[1588,4072,1699],{"class":1593},[1588,4074,4075],{"class":1590,"line":2842},[1588,4076,2345],{"class":1593},[1588,4078,4079],{"class":1590,"line":2847},[1588,4080,1728],{"class":1593},[1588,4082,4083],{"class":1590,"line":2852},[1588,4084,2855],{"class":1593},[1588,4086,4087],{"class":1590,"line":2858},[1588,4088,2861],{"class":1593},[1588,4090,4091,4093,4095],{"class":1590,"line":2864},[1588,4092,2867],{"class":1593},[1588,4094,1598],{"class":1597},[1588,4096,1615],{"class":1593},[1588,4098,4099],{"class":1590,"line":2874},[1588,4100,1646],{"emptyLinePlaceholder":1645},[1588,4102,4103,4105,4107],{"class":1590,"line":2879},[1588,4104,1594],{"class":1593},[1588,4106,1567],{"class":1597},[1588,4108,1615],{"class":1593},[1588,4110,4111,4113,4115,4117,4119,4121],{"class":1590,"line":2888},[1588,4112,2891],{"class":1593},[1588,4114,2894],{"class":1597},[1588,4116,2897],{"class":1601},[1588,4118,1608],{"class":1593},[1588,4120,2902],{"class":1611},[1588,4122,1615],{"class":1593},[1588,4124,4125,4127,4129,4131,4133,4135],{"class":1590,"line":2907},[1588,4126,2910],{"class":1593},[1588,4128,2894],{"class":1597},[1588,4130,2897],{"class":1601},[1588,4132,1608],{"class":1593},[1588,4134,2919],{"class":1611},[1588,4136,1615],{"class":1593},[1588,4138,4139,4141],{"class":1590,"line":2924},[1588,4140,2927],{"class":1593},[1588,4142,2930],{"class":1597},[1588,4144,4145,4147,4149],{"class":1590,"line":2933},[1588,4146,2936],{"class":1601},[1588,4148,1608],{"class":1593},[1588,4150,2941],{"class":1611},[1588,4152,4153,4155,4157],{"class":1590,"line":2944},[1588,4154,2947],{"class":1601},[1588,4156,1608],{"class":1593},[1588,4158,2952],{"class":1611},[1588,4160,4161,4163,4165],{"class":1590,"line":2955},[1588,4162,2958],{"class":1601},[1588,4164,1608],{"class":1593},[1588,4166,2963],{"class":1611},[1588,4168,4169,4171,4173],{"class":1590,"line":2966},[1588,4170,2969],{"class":1601},[1588,4172,1608],{"class":1593},[1588,4174,2974],{"class":1611},[1588,4176,4177,4179,4181],{"class":1590,"line":2977},[1588,4178,2980],{"class":1601},[1588,4180,1608],{"class":1593},[1588,4182,2985],{"class":1611},[1588,4184,4185],{"class":1590,"line":2988},[1588,4186,2991],{"class":1593},[1588,4188,4189,4191,4193,4195,4197],{"class":1590,"line":2994},[1588,4190,2997],{"class":1593},[1588,4192,1588],{"class":1597},[1588,4194,3002],{"class":1593},[1588,4196,1588],{"class":1597},[1588,4198,1615],{"class":1593},[1588,4200,4201,4203,4205],{"class":1590,"line":3009},[1588,4202,3012],{"class":1593},[1588,4204,3015],{"class":1597},[1588,4206,1615],{"class":1593},[1588,4208,4209,4211,4213],{"class":1590,"line":3020},[1588,4210,3023],{"class":1593},[1588,4212,2894],{"class":1597},[1588,4214,1615],{"class":1593},[1588,4216,4217],{"class":1590,"line":3030},[1588,4218,1646],{"emptyLinePlaceholder":1645},[1588,4220,4221,4223,4225,4227,4229,4231],{"class":1590,"line":3035},[1588,4222,2910],{"class":1593},[1588,4224,3040],{"class":1597},[1588,4226,3043],{"class":1601},[1588,4228,1608],{"class":1593},[1588,4230,3048],{"class":1611},[1588,4232,3051],{"class":1593},[1588,4234,4235,4237,4239],{"class":1590,"line":3054},[1588,4236,3057],{"class":1593},[1588,4238,2894],{"class":1597},[1588,4240,1615],{"class":1593},[1588,4242,4243,4245,4247],{"class":1590,"line":3064},[1588,4244,2867],{"class":1593},[1588,4246,1567],{"class":1597},[1588,4248,1615],{"class":1593},[1560,4250,332],{"id":3073},[3075,4252,1246],{"id":3077},[3079,4254],{"name":1246},[3082,4256,1248],{},{"title":9,"searchDepth":16,"depth":45,"links":4258},[4259,4260],{"id":1562,"depth":16,"text":591},{"id":3073,"depth":16,"text":332,"children":4261},[4262],{"id":3077,"depth":45,"text":1246},[1246],{"src":3093,"srcDark":3093},{},{"title":1507},{"title":1230,"description":1232},[4269,4270],{"title":1159,"path":1158,"stem":1500,"children":-1},{"title":1510,"path":1250,"stem":1511,"children":-1},["Reactive",4272],{"$snuxt-i18n-meta":4273,"$scolor-mode":4274,"$snui-toasts-max":45,"$snui-toasts":4276,"$stairo-demo-search-open":1430,"$stairo-demo-color-switcher-open":1430,"$stairo-demo-mobile-nav-open":1430,"$stairo-panels-stack":4277,"$stairo-panels-transition-from":4278},{},{"preference":4275,"value":4275,"unknown":1645,"forced":1430},"system",[],[],"right",["Set"],["ShallowReactive",4281],{"search":-1,"docs-navigation":-1,"page-data:/documentation/reference/advanced/apexcharts":-1,"page-surround:/documentation/reference/advanced/apexcharts":-1,"/documentation/reference/advanced/apexcharts":-1,"nuxt-component-meta-AddonApexcharts":4282},["NuxtError",4283],{"message":4284,"statusCode":4285,"statusMessage":4286,"data":4287},"[GET] \"/api/component-meta/AddonApexcharts\": 404 Components not found!",404,"Components not found!",{"error":1645,"url":4288,"statusCode":4285,"statusMessage":4286,"message":4286,"data":4289},"http://localhost/api/component-meta/AddonApexcharts",{"description":4290},"Please make sure you are looking for correct component"]