CINXE.COM

Vue.js - The Progressive JavaScript Framework | Vue.js

<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Vue.js - The Progressive JavaScript Framework | Vue.js</title> <meta name="description" content="Vue.js - The Progressive JavaScript Framework"> <meta name="generator" content="VitePress v1.5.0"> <link rel="preload stylesheet" href="/assets/style.CqZh9gHU.css" as="style"> <link rel="preload stylesheet" href="/vp-icons.css" as="style"> <script type="module" src="/assets/app.DwydbuG7.js"></script> <link rel="modulepreload" href="/assets/chunks/theme.9I0WbWnt.js"> <link rel="modulepreload" href="/assets/chunks/framework.B2oIMGqn.js"> <link rel="modulepreload" href="/assets/index.md.CazYkl1-.lean.js"> <link rel="icon" href="/logo.svg"> <meta name="theme-color" content="#3c8772"> <meta property="og:url" content="https://vuejs.org/"> <meta property="og:type" content="website"> <meta property="og:title" content="Vue.js"> <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework"> <meta property="og:image" content="https://vuejs.org/images/logo.png"> <meta name="twitter:site" content="@vuejs"> <meta name="twitter:card" content="summary"> <link rel="preconnect" href="https://sponsors.vuejs.org"> <script>(()=>{const e=(s,t,r=!1)=>{const o=localStorage.getItem(s);(o?o!=="false":r)&&document.documentElement.classList.add(t)};e("vue-docs-prefer-composition","prefer-composition",!0),e("vue-docs-prefer-sfc","prefer-sfc",!0)})();</script> <script>location.search.includes("?uwu")&&document.documentElement.classList.add("uwu");</script> <script src="https://cdn.usefathom.com/script.js" data-site="XNOLWPLB" data-spa="auto" defer></script> <script src="https://vueschool.io/banner.js?affiliate=vuejs&amp;type=top" async></script> <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script> <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script> <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin=""> </head> <body> <div id="app"><div class="VPApp" data-v-7da1e34f><!--[--><span tabindex="-1" data-v-ea12ab4d></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ea12ab4d>Skip to content</a><!--]--><!----><!--[--><div class="vuemastery-banner-wrapper" role="banner" data-v-d08b7089><div class="vuemastery-background-dim" data-v-d08b7089></div><a id="vm-banner" href="https://www.vuemastery.com/black-friday" target="_blank" data-v-d08b7089><img id="vm-logo-full" src="/vuemastery/vuemastery-white.svg" alt="vuemastery" data-v-d08b7089><img id="vm-logo-small" src="https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2Fvue-mastery-logo-small.png?alt=media&amp;token=941fcc3a-2b6f-40e9-b4c8-56b3890da108" alt="vuemastery" data-v-d08b7089><div class="vm-banner-wrapper" data-v-d08b7089><div class="vm-banner-content" data-v-d08b7089><h1 class="vm-banner-title" data-v-d08b7089>BLACK FRIDAY</h1><p class="vm-banner-sub" data-v-d08b7089>Get 60% off a year of Vue Mastery</p></div><button id="vm-banner-cta" data-v-d08b7089>CLAIM DISCOUNT</button></div><button id="vm-banner-close" data-v-d08b7089><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="close" data-v-d08b7089><path d="M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"></path></svg></button></a></div><!--]--><header class="VPNav nav-bar stick" data-v-7da1e34f data-v-7958f4a8><div class="VPNavBar" data-v-7958f4a8 data-v-926b474f><div class="container" data-v-926b474f><a class="VPNavBarTitle" href="/" data-v-926b474f data-v-2b313a12><!--[--><svg class="logo" viewBox="0 0 128 128" width="24" height="24" data-v-2b313a12><path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" data-v-2b313a12></path><path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-2b313a12></path></svg><span class="text" data-v-2b313a12>Vue.js</span><!--]--></a><div class="content" data-v-926b474f><div class="VPNavBarSearch search" data-v-926b474f><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><!----></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-926b474f data-v-93948c33><span id="main-nav-aria-label" class="visually-hidden" data-v-93948c33>Main Navigation</span><!--[--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-93948c33 data-v-34f21754><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><!--[--><span class="vt-flyout-button-text">Docs <!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span><!--]--></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class='vt-link link vt-menu-link' href='/guide/introduction'><!--[-->Guide<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/tutorial/"><!--[-->Tutorial<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/examples/"><!--[-->Examples<!--]--><!----><!----></a><!--]--><!--[--><a class='vt-link link vt-menu-link' href='/guide/quick-start'><!--[-->Quick Start<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/glossary/"><!--[-->Glossary<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/error-reference/"><!--[-->Error Reference<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://v2.vuejs.org" target="_blank" rel="noopener noreferrer"><!--[-->Vue 2 Docs<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://v3-migration.vuejs.org/" target="_blank" rel="noopener noreferrer"><!--[-->Migration from Vue 2<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="vt-link link VPNavBarMenuLink" href="/api/" data-v-93948c33 data-v-7a48a17c><!--[-->API<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link VPNavBarMenuLink" href="https://play.vuejs.org" target="_blank" rel="noopener noreferrer" data-v-93948c33 data-v-7a48a17c><!--[-->Playground<!--]--><!----><!----></a><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-93948c33 data-v-34f21754><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><!--[--><span class="vt-flyout-button-text">Ecosystem <!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span><!--]--></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><div class="vt-menu-group"><p class="vt-menu-group-title">Resources</p><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/partners/"><!--[-->Partners<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/developers/"><!--[-->Developers<!--]--><!----><!----></a><!--]--><!--[--><a class='vt-link link vt-menu-link' href='/ecosystem/themes'><!--[-->Themes<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://ui-libs.vercel.app/" target="_blank" rel="noopener noreferrer"><!--[-->UI Components<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://certificates.dev/vuejs/?ref=vuejs-nav" target="_blank" rel="noopener noreferrer"><!--[-->Certification<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://vuejobs.com/?ref=vuejs" target="_blank" rel="noopener noreferrer"><!--[-->Jobs<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://vue.threadless.com/" target="_blank" rel="noopener noreferrer"><!--[-->T-Shirt Shop<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--]--></div><!--]--><!--[--><div class="vt-menu-group"><p class="vt-menu-group-title">Official Libraries</p><!--[--><!--[--><a class="vt-link link vt-menu-link" href="https://router.vuejs.org/" target="_blank" rel="noopener noreferrer"><!--[-->Vue Router<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener noreferrer"><!--[-->Pinia<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class='vt-link link vt-menu-link' href='/guide/scaling-up/tooling'><!--[-->Tooling Guide<!--]--><!----><!----></a><!--]--><!--]--></div><!--]--><!--[--><div class="vt-menu-group"><p class="vt-menu-group-title">Video Courses</p><!--[--><!--[--><a class="vt-link link vt-menu-link" href="https://www.vuemastery.com/courses/" target="_blank" rel="noopener noreferrer"><!--[-->Vue Mastery<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://vueschool.io/?friend=vuejs&amp;utm_source=Vuejs.org&amp;utm_medium=Link&amp;utm_content=Navbar%20Dropdown" target="_blank" rel="noopener noreferrer"><!--[-->Vue School<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--]--></div><!--]--><!--[--><div class="vt-menu-group"><p class="vt-menu-group-title">Help</p><!--[--><!--[--><a class="vt-link link vt-menu-link" href="https://discord.com/invite/HBherRA" target="_blank" rel="noopener noreferrer"><!--[-->Discord Chat<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://github.com/vuejs/core/discussions" target="_blank" rel="noopener noreferrer"><!--[-->GitHub Discussions<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://dev.to/t/vue" target="_blank" rel="noopener noreferrer"><!--[-->DEV Community<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--]--></div><!--]--><!--[--><div class="vt-menu-group"><p class="vt-menu-group-title">News</p><!--[--><!--[--><a class="vt-link link vt-menu-link" href="https://blog.vuejs.org/" target="_blank" rel="noopener noreferrer"><!--[-->Blog<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://twitter.com/vuejs" target="_blank" rel="noopener noreferrer"><!--[-->Twitter<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://events.vuejs.org/" target="_blank" rel="noopener noreferrer"><!--[-->Events<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--[--><a class='vt-link link vt-menu-link' href='/ecosystem/newsletters'><!--[-->Newsletters<!--]--><!----><!----></a><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-93948c33 data-v-34f21754><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><!--[--><span class="vt-flyout-button-text">About <!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span><!--]--></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class='vt-link link vt-menu-link' href='/about/faq'><!--[-->FAQ<!--]--><!----><!----></a><!--]--><!--[--><a class='vt-link link vt-menu-link' href='/about/team'><!--[-->Team<!--]--><!----><!----></a><!--]--><!--[--><a class='vt-link link vt-menu-link' href='/about/releases'><!--[-->Releases<!--]--><!----><!----></a><!--]--><!--[--><a class='vt-link link vt-menu-link' href='/about/community-guide'><!--[-->Community Guide<!--]--><!----><!----></a><!--]--><!--[--><a class='vt-link link vt-menu-link' href='/about/coc'><!--[-->Code of Conduct<!--]--><!----><!----></a><!--]--><!--[--><a class='vt-link link vt-menu-link' href='/about/privacy'><!--[-->Privacy Policy<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://www.youtube.com/watch?v=OrxmtDw4pVI" target="_blank" rel="noopener noreferrer"><!--[-->The Documentary<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="vt-link link VPNavBarMenuLink" href="/sponsor/" data-v-93948c33 data-v-7a48a17c><!--[-->Sponsor<!--]--><!----><!----></a><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-93948c33 data-v-34f21754><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><!--[--><span class="vt-flyout-button-text">Experts <span class="vt-menu-badge">NEW</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span><!--]--></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/partners/"><!--[-->Partners<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/developers/"><!--[-->Developers<!--]--><span class="vt-menu-badge">NEW</span><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--><div class="vt-flyout VPNavBarMenuGroup active VPNavBarLocale" data-v-93948c33 data-v-817baab4><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false" aria-label="Select Language"><!--[--><div class="vt-locales-btn-icon-container" data-v-817baab4><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon" data-v-817baab4><path d="M0 0h24v24H0z" fill="none"></path><path d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z " class="css-c4d79v"></path></svg></div><!--]--></button><div class="vt-flyout-menu"><div class="vt-menu"><!----><!--[--><!--[--><!--[--><div class="vt-menu-items x-padding" data-v-817baab4><!--[--><div class="vt-locales-menu-item"><a href="https://cn.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">简体中文 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-zh-cn" title="简体中文 Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://ja.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">日本語 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-ja" title="日本語 Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://ua.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">Українська <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-uk" title="Українська Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://fr.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">Français <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-fr" title="Français Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://ko.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">한국어 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-ko" title="한국어 Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://pt.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">Português <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-pt" title="Português Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://bn.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">বাংলা <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-bn" title="বাংলা Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://it.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">Italiano <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-it" title="Italiano Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://fa.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">فارسی <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-fa" title="فارسی Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://ru.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">Русский <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/translation-gang/docs-ru" title="Русский Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://cs.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">Čeština <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-cs" title="Čeština Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class="vt-locales-menu-item"><a href="https://zh-hk.vuejs.org/" target="_blank" class="vt-locales-menu-item-text">繁體中文 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><a href="https://github.com/vuejs-translations/docs-zh-hk" title="繁體中文 Repository" target="_blank" class="vt-locales-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-locales-btn-icon repo"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><!--]--></div><!--[--><div class="vt-locales-menu-hr-divider" data-v-fa395110></div><div class="vt-locales-menu-item join-translations" data-v-fa395110><div role="link" tabindex="0" class="vt-locales-menu-item-text" data-v-fa395110>Help Us Translate!</div></div><!--]--><!--]--><!--]--><!--]--></div></div></div></nav><div class="VPNavBarAppearance appearance" data-v-926b474f data-v-2dded041><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="Toggle dark mode" aria-checked="false" data-v-2dded041><span class="vt-switch-check"><span class="vt-switch-icon"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="vt-social-links VPNavBarSocialLinks social-links" data-v-926b474f data-v-4ecc52f0><!--[--><a class="vt-social-link is-small" href="https://github.com/vuejs/" title="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden">github</span></a><a class="vt-social-link is-small" href="https://twitter.com/vuejs" title="twitter" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg><span class="visually-hidden">twitter</span></a><a class="vt-social-link is-small" href="https://discord.com/invite/vue" title="discord" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden">discord</span></a><!--]--></div><div class="vt-flyout VPNavBarExtra extra" data-v-926b474f data-v-19a12313><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-icon"><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg><!--]--></button><div class="vt-flyout-menu"><div class="vt-menu"><!----><!--[--><!--[--><div class="vt-menu-group" data-v-19a12313><div class="vt-menu-item item" data-v-19a12313><p class="vt-menu-label" data-v-19a12313>Appearance</p><div class="vt-menu-action action" data-v-19a12313><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="Toggle dark mode" aria-checked="false" data-v-19a12313><span class="vt-switch-check"><span class="vt-switch-icon"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="vt-menu-group" data-v-19a12313><div class="vt-menu-item item" data-v-19a12313><div class="vt-social-links social-links" data-v-19a12313><!--[--><a class="vt-social-link is-small" href="https://github.com/vuejs/" title="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden">github</span></a><a class="vt-social-link is-small" href="https://twitter.com/vuejs" title="twitter" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg><span class="visually-hidden">twitter</span></a><a class="vt-social-link is-small" href="https://discord.com/invite/vue" title="discord" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden">discord</span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><button type="button" class="vt-hamburger VPNavBarHamburger hamburger" aria-label="Mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-926b474f data-v-d3cc693d><span class="vt-hamburger-container"><span class="vt-hamburger-top"></span><span class="vt-hamburger-middle"></span><span class="vt-hamburger-bottom"></span></span></button></div></div></div><!----></header><!----><!----><div id="VPContent" class="VPContent" data-v-7da1e34f data-v-3040f9d0><div class="VPContentPage" data-v-3040f9d0><main><div style="position:relative;"><div><!--[--><section id="hero" data-v-fdd1a574><img id="uwu" alt="Vue.js Kawaii Logo by @icarusgkx" data-v-fdd1a574><h1 class="tagline" data-v-fdd1a574> The <span class="accent" data-v-fdd1a574>Progressive</span><br data-v-fdd1a574>JavaScript Framework </h1><p class="description" data-v-fdd1a574> An approachable, performant and versatile framework for building web user interfaces. </p><p class="actions" data-v-fdd1a574><!--[--><a id="vuemastery-action" class="why-vue" href="javascript:;" data-v-bf2d099b><svg class="icon-play" aria-labelledby="simpleicons-play-icon" role="img" viewBox="0 0 100 125" fill="#FFFFFF" data-v-bf2d099b><title id="simpleicons-play-icon" lang="en" data-v-bf2d099b>Play icon</title><path d="M50,3.8C24.5,3.8,3.8,24.5,3.8,50S24.5,96.2,50,96.2S96.2,75.5,96.2,50S75.5,3.8,50,3.8z M71.2,53.3l-30.8,18 c-0.6,0.4-1.3,0.5-1.9,0.5c-0.6,0-1.3-0.1-1.9-0.5c-1.2-0.6-1.9-1.9-1.9-3.3V32c0-1.4,0.8-2.7,1.9-3.3c1.2-0.6,2.7-0.6,3.8,0 l30.8,18c1.2,0.6,1.9,1.9,1.9,3.3S72.3,52.7,71.2,53.3z" data-v-bf2d099b></path></svg> Why Vue </a><!----><!--]--><a class='get-started' data-v-fdd1a574 href='/guide/introduction'> Get Started <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" data-v-fdd1a574><path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z" data-v-fdd1a574></path></svg></a><a class='setup' data-v-fdd1a574 href='/guide/quick-start'>Install</a><a class="security" href="https://v2.vuejs.org/eol/" target="_blank" data-v-fdd1a574> Get Security Updates for Vue 2 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-v-fdd1a574><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" data-v-fdd1a574></path></svg></a></p></section><section id="special-sponsor" data-v-fdd1a574><span data-v-fdd1a574><a href="/sponsor/#tier-benefits" data-v-fdd1a574> Special Sponsor slot is now vacant - Inquire now </a></span></section><section id="highlights" class="vt-box-container" data-v-fdd1a574><div class="vt-box" data-v-fdd1a574><h2 data-v-fdd1a574>Approachable</h2><p data-v-fdd1a574> Builds on top of standard HTML, CSS and JavaScript with intuitive API and world-class documentation. </p></div><div class="vt-box" data-v-fdd1a574><h2 data-v-fdd1a574>Performant</h2><p data-v-fdd1a574> Truly reactive, compiler-optimized rendering system that rarely requires manual optimization. </p></div><div class="vt-box" data-v-fdd1a574><h2 data-v-fdd1a574>Versatile</h2><p data-v-fdd1a574> A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework. </p></div></section><section id="sponsors" data-v-fdd1a574><h2 data-v-fdd1a574>Platinum Sponsors</h2><div class="sponsor-container platinum landing" data-v-fdd1a574 data-v-accdbd0b><!----><a href="/sponsor/" class="sponsor-item action" data-v-accdbd0b>Become a Sponsor</a><!----></div><h2 data-v-fdd1a574>Gold Sponsors</h2><div class="sponsor-container gold landing" data-v-fdd1a574 data-v-accdbd0b><!----><a href="/sponsor/" class="sponsor-item action" data-v-accdbd0b>Become a Sponsor</a><!----></div></section><section id="sitemap" data-v-fdd1a574><div class="container"><!--[--><div class="sitemap-col"><h4>Docs</h4><ul><!--[--><li><a class="vt-link link" href="/guide/introduction"><!--[-->Guide<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/tutorial/"><!--[-->Tutorial<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/examples/"><!--[-->Examples<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/guide/quick-start"><!--[-->Quick Start<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/glossary/"><!--[-->Glossary<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/error-reference/"><!--[-->Error Reference<!--]--><!----><!----></a></li><li><a class="vt-link link" href="https://v2.vuejs.org" target="_blank" rel="noopener noreferrer"><!--[-->Vue 2 Docs<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="https://v3-migration.vuejs.org/" target="_blank" rel="noopener noreferrer"><!--[-->Migration from Vue 2<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><!--]--></ul></div><div class="sitemap-col"><h4>About</h4><ul><!--[--><li><a class="vt-link link" href="/about/faq"><!--[-->FAQ<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/about/team"><!--[-->Team<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/about/releases"><!--[-->Releases<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/about/community-guide"><!--[-->Community Guide<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/about/coc"><!--[-->Code of Conduct<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/about/privacy"><!--[-->Privacy Policy<!--]--><!----><!----></a></li><li><a class="vt-link link" href="https://www.youtube.com/watch?v=OrxmtDw4pVI" target="_blank" rel="noopener noreferrer"><!--[-->The Documentary<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><!--]--></ul></div><div class="sitemap-col"><h4>Experts</h4><ul><!--[--><li><a class="vt-link link" href="/partners/"><!--[-->Partners<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/developers/"><!--[-->Developers<!--]--><!----><!----></a></li><!--]--></ul></div><div class="sitemap-col"><h4>Resources</h4><ul><!--[--><li><a class="vt-link link" href="/partners/"><!--[-->Partners<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/developers/"><!--[-->Developers<!--]--><!----><!----></a></li><li><a class="vt-link link" href="/ecosystem/themes"><!--[-->Themes<!--]--><!----><!----></a></li><li><a class="vt-link link" href="https://ui-libs.vercel.app/" target="_blank" rel="noopener noreferrer"><!--[-->UI Components<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="https://certificates.dev/vuejs/?ref=vuejs-nav" target="_blank" rel="noopener noreferrer"><!--[-->Certification<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="https://vuejobs.com/?ref=vuejs" target="_blank" rel="noopener noreferrer"><!--[-->Jobs<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="https://vue.threadless.com/" target="_blank" rel="noopener noreferrer"><!--[-->T-Shirt Shop<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><!--]--></ul></div><div class="sitemap-col"><h4>Official Libraries</h4><ul><!--[--><li><a class="vt-link link" href="https://router.vuejs.org/" target="_blank" rel="noopener noreferrer"><!--[-->Vue Router<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener noreferrer"><!--[-->Pinia<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class='vt-link link' href='/guide/scaling-up/tooling'><!--[-->Tooling Guide<!--]--><!----><!----></a></li><!--]--></ul></div><div class="sitemap-col"><h4>Video Courses</h4><ul><!--[--><li><a class="vt-link link" href="https://www.vuemastery.com/courses/" target="_blank" rel="noopener noreferrer"><!--[-->Vue Mastery<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="https://vueschool.io/?friend=vuejs&amp;utm_source=Vuejs.org&amp;utm_medium=Link&amp;utm_content=Navbar%20Dropdown" target="_blank" rel="noopener noreferrer"><!--[-->Vue School<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><!--]--></ul></div><div class="sitemap-col"><h4>Help</h4><ul><!--[--><li><a class="vt-link link" href="https://discord.com/invite/HBherRA" target="_blank" rel="noopener noreferrer"><!--[-->Discord Chat<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="https://github.com/vuejs/core/discussions" target="_blank" rel="noopener noreferrer"><!--[-->GitHub Discussions<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="https://dev.to/t/vue" target="_blank" rel="noopener noreferrer"><!--[-->DEV Community<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><!--]--></ul></div><div class="sitemap-col"><h4>News</h4><ul><!--[--><li><a class="vt-link link" href="https://blog.vuejs.org/" target="_blank" rel="noopener noreferrer"><!--[-->Blog<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="https://twitter.com/vuejs" target="_blank" rel="noopener noreferrer"><!--[-->Twitter<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="https://events.vuejs.org/" target="_blank" rel="noopener noreferrer"><!--[-->Events<!--]--><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></li><li><a class="vt-link link" href="/ecosystem/newsletters"><!--[-->Newsletters<!--]--><!----><!----></a></li><!--]--></ul></div><!--]--></div></section><!--]--></div></div></main><!--[--><!--]--><div class="VPFooter" data-v-f55dc1ee><p class="license" data-v-f55dc1ee>Released under the <a class="vt-link link link" href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer" data-v-f55dc1ee><!--[-->MIT License<!--]--><!----><!----></a>.</p><p class="copyright" data-v-f55dc1ee>Copyright © 2014-2024 Evan You</p></div><!--[--><!--]--></div></div><div class="visually-hidden" aria-live="polite" data-v-7da1e34f>Vue.js - The Progressive JavaScript Framework has loaded</div></div></div> <script>window.__VP_HASH_MAP__=JSON.parse("{\"about_coc.md\":\"zrx7CFJs\",\"about_community-guide.md\":\"BF3ozkZY\",\"about_faq.md\":\"QXZ8X5j4\",\"about_privacy.md\":\"BG1BPrvC\",\"about_releases.md\":\"BhAjNuYV\",\"about_team.md\":\"DMo7nYHb\",\"api_application.md\":\"BjipyAuK\",\"api_built-in-components.md\":\"BP6z-5M3\",\"api_built-in-directives.md\":\"pRausb35\",\"api_built-in-special-attributes.md\":\"DRTAJ0fq\",\"api_built-in-special-elements.md\":\"PCIMSsZj\",\"api_compile-time-flags.md\":\"BG_e9TD_\",\"api_component-instance.md\":\"jKCOPZ95\",\"api_composition-api-dependency-injection.md\":\"Cbn6OFmb\",\"api_composition-api-helpers.md\":\"DaGVBXIm\",\"api_composition-api-lifecycle.md\":\"Dp7aPXYi\",\"api_composition-api-setup.md\":\"x7CoaPjy\",\"api_custom-elements.md\":\"B69oBs27\",\"api_custom-renderer.md\":\"YcRNQo8G\",\"api_general.md\":\"DABfgppr\",\"api_index.md\":\"Dq_4jlb7\",\"api_options-composition.md\":\"CFpKssgJ\",\"api_options-lifecycle.md\":\"DFtXvz6d\",\"api_options-misc.md\":\"Bm_vJYLn\",\"api_options-rendering.md\":\"D0k2o1o9\",\"api_options-state.md\":\"CK3hTg03\",\"api_reactivity-advanced.md\":\"DuCkLEqi\",\"api_reactivity-core.md\":\"C0wN8Kln\",\"api_reactivity-utilities.md\":\"DbN2SSKe\",\"api_render-function.md\":\"C3qQcEt6\",\"api_sfc-css-features.md\":\"D6yD8YkB\",\"api_sfc-script-setup.md\":\"D-zw2uKo\",\"api_sfc-spec.md\":\"8Pbyu5KL\",\"api_ssr.md\":\"DanynrVy\",\"api_utility-types.md\":\"BQbqZMtn\",\"developers_abdusaid-html-css-vue-typescript-frontend-dev.md\":\"qzSbijJU\",\"developers_eduard-miskov-vue-frontend-developer.md\":\"58dXkM6l\",\"developers_emre-vue-frontend-developer.md\":\"BcikEjeR\",\"developers_harshit-vue-frontend-developer.md\":\"Cj-jHp1C\",\"developers_index.md\":\"CU4cExPk\",\"developers_kostiantyn-vue-frontend-developer.md\":\"ejDH4Fvx\",\"developers_nicolas-vue-php-fullstack-developer.md\":\"4CTBGxhS\",\"developers_santiago-anaya-vue-ruby-fullstack-developer.md\":\"D44VanS-\",\"developers_stelios-vue-node-fullstack-developer.md\":\"4sJA3PyV\",\"developers_tomek-vue-node-fullstack-developer.md\":\"BP5s5Ich\",\"developers_vardan-vue-node-fullstack-developer.md\":\"De20gxYo\",\"ecosystem_newsletters.md\":\"Bih5-KFl\",\"ecosystem_themes.md\":\"CD29AOv9\",\"error-reference_index.md\":\"BU5CvG_m\",\"examples_index.md\":\"B_ilGEpL\",\"glossary_index.md\":\"CYG1PC3O\",\"guide_best-practices_accessibility.md\":\"CFkgTi-B\",\"guide_best-practices_performance.md\":\"BAL1olg0\",\"guide_best-practices_production-deployment.md\":\"DFAgWV4o\",\"guide_best-practices_security.md\":\"DfcWuEMO\",\"guide_built-ins_keep-alive.md\":\"rif7E40D\",\"guide_built-ins_suspense.md\":\"C_7fn5RS\",\"guide_built-ins_teleport.md\":\"wiK0BQCF\",\"guide_built-ins_transition-group.md\":\"P62EmpIg\",\"guide_built-ins_transition.md\":\"fVCT0fC2\",\"guide_components_async.md\":\"B1CMqmXm\",\"guide_components_attrs.md\":\"CVjwFzR6\",\"guide_components_events.md\":\"D4PfVABG\",\"guide_components_props.md\":\"BJVdprec\",\"guide_components_provide-inject.md\":\"DRCKWJLC\",\"guide_components_registration.md\":\"A0PoMhTS\",\"guide_components_slots.md\":\"BWAhK4qj\",\"guide_components_v-model.md\":\"CmGLOkuw\",\"guide_essentials_application.md\":\"BKV2lME5\",\"guide_essentials_class-and-style.md\":\"YUaTzoDD\",\"guide_essentials_component-basics.md\":\"QaFx_RCX\",\"guide_essentials_computed.md\":\"BPRWvVgR\",\"guide_essentials_conditional.md\":\"BG5g_loe\",\"guide_essentials_event-handling.md\":\"Mx8K1ikw\",\"guide_essentials_forms.md\":\"BqHI3dfO\",\"guide_essentials_lifecycle.md\":\"DXusz2Ji\",\"guide_essentials_list.md\":\"DAieDux0\",\"guide_essentials_reactivity-fundamentals.md\":\"BjM8wMd4\",\"guide_essentials_template-refs.md\":\"C5mZ9QTg\",\"guide_essentials_template-syntax.md\":\"CT7Cq_OG\",\"guide_essentials_watchers.md\":\"Bpoem7n8\",\"guide_extras_animation.md\":\"DBhOTIzQ\",\"guide_extras_composition-api-faq.md\":\"e0f4zb1u\",\"guide_extras_reactivity-in-depth.md\":\"D7ZsIxOt\",\"guide_extras_reactivity-transform.md\":\"DIR7ee5_\",\"guide_extras_render-function.md\":\"6XGyxySO\",\"guide_extras_rendering-mechanism.md\":\"CA1tdzzW\",\"guide_extras_ways-of-using-vue.md\":\"BpXtYJf1\",\"guide_extras_web-components.md\":\"Dyd-40TG\",\"guide_introduction.md\":\"F__qTshW\",\"guide_quick-start.md\":\"DFOD6Ih4\",\"guide_reusability_composables.md\":\"DzFUjnNf\",\"guide_reusability_custom-directives.md\":\"CIzkaHqu\",\"guide_reusability_plugins.md\":\"Bs4E5ynp\",\"guide_scaling-up_routing.md\":\"qkt_rsRB\",\"guide_scaling-up_sfc.md\":\"hwgWCG2G\",\"guide_scaling-up_ssr.md\":\"BN6wVpXy\",\"guide_scaling-up_state-management.md\":\"6yIVVKSl\",\"guide_scaling-up_testing.md\":\"DT7Rf0gz\",\"guide_scaling-up_tooling.md\":\"D3a7I_71\",\"guide_typescript_composition-api.md\":\"Bu757tRD\",\"guide_typescript_options-api.md\":\"YiDrP3nE\",\"guide_typescript_overview.md\":\"C77hHJ2q\",\"index.md\":\"CazYkl1-\",\"partners_all.md\":\"A5BukTRM\",\"partners_curotec.md\":\"DN54ZJg9\",\"partners_herodevs.md\":\"BqxwfZTV\",\"partners_index.md\":\"CteN8unF\",\"partners_monterail.md\":\"BSzfsTcw\",\"partners_passionatepeople.md\":\"lLGqwE0U\",\"partners_proxify.md\":\"CxN5nlHQ\",\"partners_redberry.md\":\"BUfOTauj\",\"partners_vehikl.md\":\"Bw53kw-T\",\"partners_webreinvent.md\":\"DAqQ3OH7\",\"sponsor_index.md\":\"C5KhrL9c\",\"style-guide_index.md\":\"DfUu9Cox\",\"style-guide_rules-essential.md\":\"D0AMsUOK\",\"style-guide_rules-recommended.md\":\"Bd9Wl08I\",\"style-guide_rules-strongly-recommended.md\":\"hURZvQ7h\",\"style-guide_rules-use-with-caution.md\":\"DZuPNqLo\",\"translations_index.md\":\"BS95exON\",\"tutorial_index.md\":\"gzZ_L9U3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vue.js\",\"description\":\"Vue.js - The Progressive JavaScript Framework\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Docs\",\"activeMatch\":\"^/(guide|style-guide|cookbook|examples)/\",\"items\":[{\"text\":\"Guide\",\"link\":\"/guide/introduction\"},{\"text\":\"Tutorial\",\"link\":\"/tutorial/\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"Quick Start\",\"link\":\"/guide/quick-start\"},{\"text\":\"Glossary\",\"link\":\"/glossary/\"},{\"text\":\"Error Reference\",\"link\":\"/error-reference/\"},{\"text\":\"Vue 2 Docs\",\"link\":\"https://v2.vuejs.org\"},{\"text\":\"Migration from Vue 2\",\"link\":\"https://v3-migration.vuejs.org/\"}]},{\"text\":\"API\",\"activeMatch\":\"^/api/\",\"link\":\"/api/\"},{\"text\":\"Playground\",\"link\":\"https://play.vuejs.org\"},{\"text\":\"Ecosystem\",\"activeMatch\":\"^/ecosystem/\",\"items\":[{\"text\":\"Resources\",\"items\":[{\"text\":\"Partners\",\"link\":\"/partners/\"},{\"text\":\"Developers\",\"link\":\"/developers/\"},{\"text\":\"Themes\",\"link\":\"/ecosystem/themes\"},{\"text\":\"UI Components\",\"link\":\"https://ui-libs.vercel.app/\"},{\"text\":\"Certification\",\"link\":\"https://certificates.dev/vuejs/?ref=vuejs-nav\"},{\"text\":\"Jobs\",\"link\":\"https://vuejobs.com/?ref=vuejs\"},{\"text\":\"T-Shirt Shop\",\"link\":\"https://vue.threadless.com/\"}]},{\"text\":\"Official Libraries\",\"items\":[{\"text\":\"Vue Router\",\"link\":\"https://router.vuejs.org/\"},{\"text\":\"Pinia\",\"link\":\"https://pinia.vuejs.org/\"},{\"text\":\"Tooling Guide\",\"link\":\"/guide/scaling-up/tooling.html\"}]},{\"text\":\"Video Courses\",\"items\":[{\"text\":\"Vue Mastery\",\"link\":\"https://www.vuemastery.com/courses/\"},{\"text\":\"Vue School\",\"link\":\"https://vueschool.io/?friend=vuejs&utm_source=Vuejs.org&utm_medium=Link&utm_content=Navbar%20Dropdown\"}]},{\"text\":\"Help\",\"items\":[{\"text\":\"Discord Chat\",\"link\":\"https://discord.com/invite/HBherRA\"},{\"text\":\"GitHub Discussions\",\"link\":\"https://github.com/vuejs/core/discussions\"},{\"text\":\"DEV Community\",\"link\":\"https://dev.to/t/vue\"}]},{\"text\":\"News\",\"items\":[{\"text\":\"Blog\",\"link\":\"https://blog.vuejs.org/\"},{\"text\":\"Twitter\",\"link\":\"https://twitter.com/vuejs\"},{\"text\":\"Events\",\"link\":\"https://events.vuejs.org/\"},{\"text\":\"Newsletters\",\"link\":\"/ecosystem/newsletters\"}]}]},{\"text\":\"About\",\"activeMatch\":\"^/about/\",\"items\":[{\"text\":\"FAQ\",\"link\":\"/about/faq\"},{\"text\":\"Team\",\"link\":\"/about/team\"},{\"text\":\"Releases\",\"link\":\"/about/releases\"},{\"text\":\"Community Guide\",\"link\":\"/about/community-guide\"},{\"text\":\"Code of Conduct\",\"link\":\"/about/coc\"},{\"text\":\"Privacy Policy\",\"link\":\"/about/privacy\"},{\"text\":\"The Documentary\",\"link\":\"https://www.youtube.com/watch?v=OrxmtDw4pVI\"}]},{\"text\":\"Sponsor\",\"link\":\"/sponsor/\"},{\"text\":\"Experts\",\"badge\":{\"text\":\"NEW\"},\"activeMatch\":\"^/(partners|developers)/\",\"items\":[{\"text\":\"Partners\",\"link\":\"/partners/\"},{\"text\":\"Developers\",\"link\":\"/developers/\",\"badge\":{\"text\":\"NEW\"}}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"Getting Started\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/guide/introduction\"},{\"text\":\"Quick Start\",\"link\":\"/guide/quick-start\"}]},{\"text\":\"Essentials\",\"items\":[{\"text\":\"Creating an Application\",\"link\":\"/guide/essentials/application\"},{\"text\":\"Template Syntax\",\"link\":\"/guide/essentials/template-syntax\"},{\"text\":\"Reactivity Fundamentals\",\"link\":\"/guide/essentials/reactivity-fundamentals\"},{\"text\":\"Computed Properties\",\"link\":\"/guide/essentials/computed\"},{\"text\":\"Class and Style Bindings\",\"link\":\"/guide/essentials/class-and-style\"},{\"text\":\"Conditional Rendering\",\"link\":\"/guide/essentials/conditional\"},{\"text\":\"List Rendering\",\"link\":\"/guide/essentials/list\"},{\"text\":\"Event Handling\",\"link\":\"/guide/essentials/event-handling\"},{\"text\":\"Form Input Bindings\",\"link\":\"/guide/essentials/forms\"},{\"text\":\"Lifecycle Hooks\",\"link\":\"/guide/essentials/lifecycle\"},{\"text\":\"Watchers\",\"link\":\"/guide/essentials/watchers\"},{\"text\":\"Template Refs\",\"link\":\"/guide/essentials/template-refs\"},{\"text\":\"Components Basics\",\"link\":\"/guide/essentials/component-basics\"}]},{\"text\":\"Components In-Depth\",\"items\":[{\"text\":\"Registration\",\"link\":\"/guide/components/registration\"},{\"text\":\"Props\",\"link\":\"/guide/components/props\"},{\"text\":\"Events\",\"link\":\"/guide/components/events\"},{\"text\":\"Component v-model\",\"link\":\"/guide/components/v-model\"},{\"text\":\"Fallthrough Attributes\",\"link\":\"/guide/components/attrs\"},{\"text\":\"Slots\",\"link\":\"/guide/components/slots\"},{\"text\":\"Provide / inject\",\"link\":\"/guide/components/provide-inject\"},{\"text\":\"Async Components\",\"link\":\"/guide/components/async\"}]},{\"text\":\"Reusability\",\"items\":[{\"text\":\"Composables\",\"link\":\"/guide/reusability/composables\"},{\"text\":\"Custom Directives\",\"link\":\"/guide/reusability/custom-directives\"},{\"text\":\"Plugins\",\"link\":\"/guide/reusability/plugins\"}]},{\"text\":\"Built-in Components\",\"items\":[{\"text\":\"Transition\",\"link\":\"/guide/built-ins/transition\"},{\"text\":\"TransitionGroup\",\"link\":\"/guide/built-ins/transition-group\"},{\"text\":\"KeepAlive\",\"link\":\"/guide/built-ins/keep-alive\"},{\"text\":\"Teleport\",\"link\":\"/guide/built-ins/teleport\"},{\"text\":\"Suspense\",\"link\":\"/guide/built-ins/suspense\"}]},{\"text\":\"Scaling Up\",\"items\":[{\"text\":\"Single-File Components\",\"link\":\"/guide/scaling-up/sfc\"},{\"text\":\"Tooling\",\"link\":\"/guide/scaling-up/tooling\"},{\"text\":\"Routing\",\"link\":\"/guide/scaling-up/routing\"},{\"text\":\"State Management\",\"link\":\"/guide/scaling-up/state-management\"},{\"text\":\"Testing\",\"link\":\"/guide/scaling-up/testing\"},{\"text\":\"Server-Side Rendering (SSR)\",\"link\":\"/guide/scaling-up/ssr\"}]},{\"text\":\"Best Practices\",\"items\":[{\"text\":\"Production Deployment\",\"link\":\"/guide/best-practices/production-deployment\"},{\"text\":\"Performance\",\"link\":\"/guide/best-practices/performance\"},{\"text\":\"Accessibility\",\"link\":\"/guide/best-practices/accessibility\"},{\"text\":\"Security\",\"link\":\"/guide/best-practices/security\"}]},{\"text\":\"TypeScript\",\"items\":[{\"text\":\"Overview\",\"link\":\"/guide/typescript/overview\"},{\"text\":\"TS with Composition API\",\"link\":\"/guide/typescript/composition-api\"},{\"text\":\"TS with Options API\",\"link\":\"/guide/typescript/options-api\"}]},{\"text\":\"Extra Topics\",\"items\":[{\"text\":\"Ways of Using Vue\",\"link\":\"/guide/extras/ways-of-using-vue\"},{\"text\":\"Composition API FAQ\",\"link\":\"/guide/extras/composition-api-faq\"},{\"text\":\"Reactivity in Depth\",\"link\":\"/guide/extras/reactivity-in-depth\"},{\"text\":\"Rendering Mechanism\",\"link\":\"/guide/extras/rendering-mechanism\"},{\"text\":\"Render Functions & JSX\",\"link\":\"/guide/extras/render-function\"},{\"text\":\"Vue and Web Components\",\"link\":\"/guide/extras/web-components\"},{\"text\":\"Animation Techniques\",\"link\":\"/guide/extras/animation\"}]}],\"/api/\":[{\"text\":\"Global API\",\"items\":[{\"text\":\"Application\",\"link\":\"/api/application\"},{\"text\":\"General\",\"link\":\"/api/general\"}]},{\"text\":\"Composition API\",\"items\":[{\"text\":\"setup()\",\"link\":\"/api/composition-api-setup\"},{\"text\":\"Reactivity: Core\",\"link\":\"/api/reactivity-core\"},{\"text\":\"Reactivity: Utilities\",\"link\":\"/api/reactivity-utilities\"},{\"text\":\"Reactivity: Advanced\",\"link\":\"/api/reactivity-advanced\"},{\"text\":\"Lifecycle Hooks\",\"link\":\"/api/composition-api-lifecycle\"},{\"text\":\"Dependency Injection\",\"link\":\"/api/composition-api-dependency-injection\"},{\"text\":\"Helpers\",\"link\":\"/api/composition-api-helpers\"}]},{\"text\":\"Options API\",\"items\":[{\"text\":\"Options: State\",\"link\":\"/api/options-state\"},{\"text\":\"Options: Rendering\",\"link\":\"/api/options-rendering\"},{\"text\":\"Options: Lifecycle\",\"link\":\"/api/options-lifecycle\"},{\"text\":\"Options: Composition\",\"link\":\"/api/options-composition\"},{\"text\":\"Options: Misc\",\"link\":\"/api/options-misc\"},{\"text\":\"Component Instance\",\"link\":\"/api/component-instance\"}]},{\"text\":\"Built-ins\",\"items\":[{\"text\":\"Directives\",\"link\":\"/api/built-in-directives\"},{\"text\":\"Components\",\"link\":\"/api/built-in-components\"},{\"text\":\"Special Elements\",\"link\":\"/api/built-in-special-elements\"},{\"text\":\"Special Attributes\",\"link\":\"/api/built-in-special-attributes\"}]},{\"text\":\"Single-File Component\",\"items\":[{\"text\":\"Syntax Specification\",\"link\":\"/api/sfc-spec\"},{\"text\":\"<script setup>\",\"link\":\"/api/sfc-script-setup\"},{\"text\":\"CSS Features\",\"link\":\"/api/sfc-css-features\"}]},{\"text\":\"Advanced APIs\",\"items\":[{\"text\":\"Custom Elements\",\"link\":\"/api/custom-elements\"},{\"text\":\"Render Function\",\"link\":\"/api/render-function\"},{\"text\":\"Server-Side Rendering\",\"link\":\"/api/ssr\"},{\"text\":\"TypeScript Utility Types\",\"link\":\"/api/utility-types\"},{\"text\":\"Custom Renderer\",\"link\":\"/api/custom-renderer\"},{\"text\":\"Compile-Time Flags\",\"link\":\"/api/compile-time-flags\"}]}],\"/examples/\":[{\"text\":\"Basic\",\"items\":[{\"text\":\"Hello World\",\"link\":\"/examples/#hello-world\"},{\"text\":\"Handling User Input\",\"link\":\"/examples/#handling-input\"},{\"text\":\"Attribute Bindings\",\"link\":\"/examples/#attribute-bindings\"},{\"text\":\"Conditionals and Loops\",\"link\":\"/examples/#conditionals-and-loops\"},{\"text\":\"Form Bindings\",\"link\":\"/examples/#form-bindings\"},{\"text\":\"Simple Component\",\"link\":\"/examples/#simple-component\"}]},{\"text\":\"Practical\",\"items\":[{\"text\":\"Markdown Editor\",\"link\":\"/examples/#markdown\"},{\"text\":\"Fetching Data\",\"link\":\"/examples/#fetching-data\"},{\"text\":\"Grid with Sort and Filter\",\"link\":\"/examples/#grid\"},{\"text\":\"Tree View\",\"link\":\"/examples/#tree\"},{\"text\":\"SVG Graph\",\"link\":\"/examples/#svg\"},{\"text\":\"Modal with Transitions\",\"link\":\"/examples/#modal\"},{\"text\":\"List with Transitions\",\"link\":\"/examples/#list-transition\"},{\"text\":\"TodoMVC\",\"link\":\"/examples/#todomvc\"}]},{\"text\":\"7 GUIs\",\"items\":[{\"text\":\"Counter\",\"link\":\"/examples/#counter\"},{\"text\":\"Temperature Converter\",\"link\":\"/examples/#temperature-converter\"},{\"text\":\"Flight Booker\",\"link\":\"/examples/#flight-booker\"},{\"text\":\"Timer\",\"link\":\"/examples/#timer\"},{\"text\":\"CRUD\",\"link\":\"/examples/#crud\"},{\"text\":\"Circle Drawer\",\"link\":\"/examples/#circle-drawer\"},{\"text\":\"Cells\",\"link\":\"/examples/#cells\"}]}],\"/style-guide/\":[{\"text\":\"Style Guide\",\"items\":[{\"text\":\"Overview\",\"link\":\"/style-guide/\"},{\"text\":\"A - Essential\",\"link\":\"/style-guide/rules-essential\"},{\"text\":\"B - Strongly Recommended\",\"link\":\"/style-guide/rules-strongly-recommended\"},{\"text\":\"C - Recommended\",\"link\":\"/style-guide/rules-recommended\"},{\"text\":\"D - Use with Caution\",\"link\":\"/style-guide/rules-use-with-caution\"}]}]},\"localeLinks\":[{\"link\":\"https://cn.vuejs.org\",\"text\":\"简体中文\",\"repo\":\"https://github.com/vuejs-translations/docs-zh-cn\"},{\"link\":\"https://ja.vuejs.org\",\"text\":\"日本語\",\"repo\":\"https://github.com/vuejs-translations/docs-ja\"},{\"link\":\"https://ua.vuejs.org\",\"text\":\"Українська\",\"repo\":\"https://github.com/vuejs-translations/docs-uk\"},{\"link\":\"https://fr.vuejs.org\",\"text\":\"Français\",\"repo\":\"https://github.com/vuejs-translations/docs-fr\"},{\"link\":\"https://ko.vuejs.org\",\"text\":\"한국어\",\"repo\":\"https://github.com/vuejs-translations/docs-ko\"},{\"link\":\"https://pt.vuejs.org\",\"text\":\"Português\",\"repo\":\"https://github.com/vuejs-translations/docs-pt\"},{\"link\":\"https://bn.vuejs.org\",\"text\":\"বাংলা\",\"repo\":\"https://github.com/vuejs-translations/docs-bn\"},{\"link\":\"https://it.vuejs.org\",\"text\":\"Italiano\",\"repo\":\"https://github.com/vuejs-translations/docs-it\"},{\"link\":\"https://fa.vuejs.org\",\"text\":\"فارسی\",\"repo\":\"https://github.com/vuejs-translations/docs-fa\"},{\"link\":\"https://ru.vuejs.org\",\"text\":\"Русский\",\"repo\":\"https://github.com/translation-gang/docs-ru\"},{\"link\":\"https://cs.vuejs.org\",\"text\":\"Čeština\",\"repo\":\"https://github.com/vuejs-translations/docs-cs\"},{\"link\":\"https://zh-hk.vuejs.org\",\"text\":\"繁體中文\",\"repo\":\"https://github.com/vuejs-translations/docs-zh-hk\"},{\"link\":\"/translations/\",\"text\":\"Help Us Translate!\",\"isTranslationsDesc\":true}],\"algolia\":{\"indexName\":\"vuejs\",\"appId\":\"ML0LEBN7FQ\",\"apiKey\":\"21cf9df0734770a2448a9da64a700c22\",\"searchParameters\":{\"facetFilters\":[\"version:v3\"]}},\"carbonAds\":{\"code\":\"CEBDT27Y\",\"placement\":\"vuejsorg\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/vuejs/\"},{\"icon\":\"twitter\",\"link\":\"https://twitter.com/vuejs\"},{\"icon\":\"discord\",\"link\":\"https://discord.com/invite/vue\"}],\"editLink\":{\"repo\":\"vuejs/docs\",\"text\":\"Edit this page on GitHub\"},\"footer\":{\"license\":{\"text\":\"MIT License\",\"link\":\"https://opensource.org/licenses/MIT\"},\"copyright\":\"Copyright © 2014-2024 Evan You\"}},\"locales\":{},\"scrollOffset\":[\"header\",\".VPLocalNav\"],\"cleanUrls\":false}");</script> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10