1<!DOCTYPE html> 2<html lang="en-US" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>Quick Start | Vue.js</title> 7 <meta name="description" content="Vue.js - The Progressive JavaScript Framework"> 8 <meta name="generator" content="VitePress v2.0.0-alpha.17"> 9 <link rel="preload stylesheet" href="/assets/style.BMnqHME7.css" as="style"> 10 <link rel="preload stylesheet" href="/vp-icons.css" as="style"> 11 12
12<script type="module" src="/assets/app.B91ytTIH.js"></script>
12 13 <link rel="preload" href="/assets/inter-roman-latin.Cy4MYw_J.woff2" as="font" type="font/woff2" crossorigin=""> 14 <link rel="modulepreload" href="/assets/chunks/plugin-vue_export-helper.CHIaqsk5.js"> 15 <link rel="modulepreload" href="/assets/chunks/preload-helper.DPeZQNDl.js"> 16 <link rel="modulepreload" href="/assets/chunks/client.Di6ffgQ0.js"> 17 <link rel="modulepreload" href="/assets/chunks/PreferenceSwitch.Xjf1us8F.js"> 18 <link rel="modulepreload" href="/assets/chunks/SponsorsGroup.DCKN6C6f.js"> 19 <link rel="modulepreload" href="/assets/chunks/src.BvVF4JYV.js"> 20 <link rel="modulepreload" href="/assets/chunks/runtime-core.esm-bundler.D9dvqvXF.js"> 21 <link rel="modulepreload" href="/assets/chunks/runtime-dom.esm-bundler.CWLNKmOD.js"> 22 <link rel="modulepreload" href="/assets/guide_quick-start.md.B1k9QN6u.lean.js"> 23 <link rel="icon" href="/logo.svg"> 24 <meta name="theme-color" content="#3c8772"> 25 <meta property="og:url" content="https://vuejs.org/"> 26 <meta property="og:type" content="website"> 27 <meta property="og:title" content="Vue.js"> 28 <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework"> 29 <meta property="og:image" content="https://vuejs.org/images/logo.png"> 30 <meta name="twitter:site" content="@vuejs"> 31 <meta name="twitter:card" content="summary"> 32 <link rel="preconnect" href="https://automation.vuejs.org"> 33
33<script>(()=>{let e=(e,t,n=!1)=>{let r=localStorage.getItem(e);(r?r!==`false`:n)&&document.documentElement.classList.add(t)};e(`vue-docs-prefer-composition`,`prefer-composition`,!0),e(`vue-docs-prefer-sfc`,`prefer-sfc`,!0)})();</script>
33 34
34<script>location.search.includes(`?uwu`)&&document.documentElement.classList.add(`uwu`);</script>
34 35
35<script src="https://cdn.usefathom.com/script.js" data-site="XNOLWPLB" data-spa="auto" defer></script>
35 36
36<script src="https://media.bitterbrains.com/main.js?from=vuejs&type=top" async></script>
36 37
37<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t:e===`dark`)&&document.documentElement.classList.add(`dark`)})();</script>
37 38
38<script id="check-mac-os">document.documentElement.classList.toggle(`mac`,/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
38 39 <link rel="preload" href="/assets/inter-roman-latin.Cy4MYw_J.woff2" as="font" type="font/woff2" crossorigin=""> 40 </head> 41 <body> 42 <div id="app"><div class="VPApp" data-v-9a2a41fe><!--[--><span tabindex="-1" data-v-5912a850></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-5912a850>Skip to content</a><!--]--><!----><!--[--><!--]--><header class="VPNav nav-bar" data-v-9a2a41fe data-v-61d2b4f7><div class="VPNavBar" data-v-61d2b4f7 data-v-963304d0><div class="container" data-v-963304d0><a class="VPNavBarTitle" href="/" data-v-963304d0 data-v-6b5e9f5d><!--[--><svg class="logo" viewBox="0 0 128 128" width="24" height="24" data-v-6b5e9f5d><path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" data-v-6b5e9f5d></path><path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-6b5e9f5d></path></svg><span class="text" data-v-6b5e9f5d>Vue.js</span><!--]--></a><div class="content" data-v-963304d0><div class="VPNavBarSearch search" data-v-963304d0><!----><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-963304d0 data-v-608420ba><span id="main-nav-aria-label" class="visually-hidden" data-v-608420ba>Main Navigation</span><!--[--><!--[--><div class="vt-flyout VPNavBarMenuGroup active" data-v-608420ba data-v-4b09bc3a><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/quick-start'><!--[-->Quick Start<!--]--><!----><!----></a><!--]--><!--[--><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="/api/"><!--[-->API<!--]--><!----><!----></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>
42<!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="vt-link link VPNavBarMenuLink" href="https://play.vuejs.org" target="_blank" rel="noopener noreferrer" data-v-608420ba data-v-6ca01e25><!--[-->Playground<!--]--><!----><!----></a><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-608420ba data-v-4b09bc3a><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='/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://www.vue-plugins.org/" target="_blank" rel="noopener noreferrer"><!--[-->Plugins Collection<!--]--><!----><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>
42<!--]--><!--[--><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&utm_source=Vuejs.org&utm_medium=Link&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://x.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-608420ba data-v-4b09bc3a><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>
42<!--]--><!--[--><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><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-608420ba data-v-4b09bc3a><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><!--[--><span class="vt-flyout-button-text">Support <!----><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="/sponsor/"><!--[-->Sponsor<!--]--><!----><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/partners/"><!--[-->Partners<!--]--><!----><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--><div class="vt-flyout VPNavBarMenuGroup active VPNavBarLocale" data-v-608420ba data-v-cc04984b><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-cc04984b><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-cc04984b><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-cc04984b><!--[--><div class="vt-locales-menu-item"><a class='vt-locales-menu-item-text' href='https://cn.vuejs.org/guide/quick-start' target='_blank'>ç®ä½ä¸æ <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 class='vt-locales-menu-item-text' href='https://ja.vuejs.org/guide/quick-start' target='_blank'>æ¥æ¬èª <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 class='vt-locales-menu-item-text' href='https://ua.vuejs.org/guide/quick-start' target='_blank'>УкÑаÑнÑÑка <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 class='vt-locales-menu-item-text' href='https://fr.vuejs.org/guide/quick-start' target='_blank'>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 class='vt-locales-menu-item-text' href='https://de.vuejs.org/guide/quick-start' target='_blank'>Deutsch <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-de" title="Deutsch 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 class='vt-locales-menu-item-text' href='https://ko.vuejs.org/guide/quick-start' target='_blank'>íêµì´ <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 class='vt-locales-menu-item-text' href='https://pt.vuejs.org/guide/quick-start' target='_blank'>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 class='vt-locales-menu-item-text' href='https://bn.vuejs.org/guide/quick-start' target='_blank'>বাà¦à¦²à¦¾ <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 class='vt-locales-menu-item-text' href='https://it.vuejs.org/guide/quick-start' target='_blank'>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 class='vt-locales-menu-item-text' href='https://fa.vuejs.org/guide/quick-start' target='_blank'>ÙØ§Ø±Ø³Û <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
42"><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 class='vt-locales-menu-item-text' href='https://ru.vuejs.org/guide/quick-start' target='_blank'>Ð ÑÑÑкий <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-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 class='vt-locales-menu-item-text' href='https://cs.vuejs.org/guide/quick-start' target='_blank'>Ä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 class='vt-locales-menu-item-text' href='https://zh-hk.vuejs.org/guide/quick-start' target='_blank'>ç¹é«ä¸æ <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 class="vt-locales-menu-item"><a class='vt-locales-menu-item-text' href='https://pl.vuejs.org/guide/quick-start' target='_blank'>Polski <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-pl" title="Polski 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-8f7a26ed></div><div class="vt-locales-menu-item join-translations" data-v-8f7a26ed><div role="link" tabindex="0" class="vt-locales-menu-item-text" data-v-8f7a26ed>Help Us Translate!</div></div><!--]--><!--]--><!--]--><!--]--></div></div></div></nav><div class="VPNavBarAppearance appearance" data-v-963304d0 data-v-726275c6><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="Toggle dark mode" aria-checked="false" data-v-726275c6><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-963304d0 data-v-12ff5f55><!--[--><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://x.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
42-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-963304d0 data-v-26193eb2><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-26193eb2><div class="vt-menu-item item" data-v-26193eb2><p class="vt-menu-label" data-v-26193eb2>Appearance</p><div class="vt-menu-action action" data-v-26193eb2><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="Toggle dark mode" aria-checked="false" data-v-26193eb2><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-26193eb2><div class="vt-menu-item item" data-v-26193eb2><div class="vt-social-links social-links" data-v-26193eb2><!--[--><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://x.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
42-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-963304d0 data-v-c1a47b26><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 class="VPLocalNav" data-v-9a2a41fe data-v-7e6461cd><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-7e6461cd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-7e6461cd><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-7e6461cd>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vt-vh:0px;" data-v-7e6461cd data-v-b6fe5e76><button class="" data-v-b6fe5e76>On this page <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-b6fe5e76><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></button><!----></div></div><aside class="VPSidebar" data-v-9a2a41fe data-v-1299e0e1><nav id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-1299e0e1><!--[--><!--[--><div class="preference-switch" data-v-e02760d0><button class="toggle" aria-label="preference switches toggle" aria-controls="preference-switches" aria-expanded="true" data-v-e02760d0><span data-v-e02760d0>API Preference</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-link-icon open" data-v-e02760d0><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></button><div id="preference-switches" aria-hidden="false" data-v-e02760d0><div class="switch-container" data-v-e02760d0><label class="options-label" data-v-e02760d0>Options</label><button class="vt-switch api-switch" type="button" role="switch" aria-label="prefer composition api" aria-checked="true" data-v-e02760d0><span class="vt-switch-check"><!----></span></button><label class="composition-label" data-v-e02760d0>Composition</label><a class='switch-link' data-v-e02760d0 href='/guide/introduction#api-styles' title='About API preference'>?</a><!----></div><!----></div></div><!--]--><!--]--><span id="sidebar-aria-label" class="visually-hidden" data-v-1299e0e1>Sidebar Navigation</span><!--[--><div class="group" data-v-1299e0e1><section class="VPSidebarGroup" data-v-1299e0e1 data-v-337738bb><div class="title" data-v-337738bb><h2 class="active title-text" data-v-337738bb>Getting Started<!----></h2></div><!--[--><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/introduction'><p class="link-text" data-v-0a6be7db>Introduction<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/quick-start'><p class="link-text" data-v-0a6be7db>Quick Start<!----></p></a>
42<!--]--></section></div><div class="group" data-v-1299e0e1><section class="VPSidebarGroup" data-v-1299e0e1 data-v-337738bb><div class="title" data-v-337738bb><h2 class="title-text" data-v-337738bb>Essentials<!----></h2></div><!--[--><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/application'><p class="link-text" data-v-0a6be7db>Creating an Application<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/template-syntax'><p class="link-text" data-v-0a6be7db>Template Syntax<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/reactivity-fundamentals'><p class="link-text" data-v-0a6be7db>Reactivity Fundamentals<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/computed'><p class="link-text" data-v-0a6be7db>Computed Properties<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/class-and-style'><p class="link-text" data-v-0a6be7db>Class and Style Bindings<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/conditional'><p class="link-text" data-v-0a6be7db>Conditional Rendering<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/list'><p class="link-text" data-v-0a6be7db>List Rendering<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/event-handling'><p class="link-text" data-v-0a6be7db>Event Handling<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/forms'><p class="link-text" data-v-0a6be7db>Form Input Bindings<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/watchers'><p class="link-text" data-v-0a6be7db>Watchers<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/template-refs'><p class="link-text" data-v-0a6be7db>Template Refs<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/component-basics'><p class="link-text" data-v-0a6be7db>Components Basics<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/essentials/lifecycle'><p class="link-text" data-v-0a6be7db>Lifecycle Hooks<!----></p></a><!--]--></section></div><div class="group" data-v-1299e0e1><section class="VPSidebarGroup" data-v-1299e0e1 data-v-337738bb><div class="title" data-v-337738bb><h2 class="title-text" data-v-337738bb>Components In-Depth<!----></h2></div><!--[--><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/components/registration'><p class="link-text" data-v-0a6be7db>Registration<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/components/props'><p class="link-text" data-v-0a6be7db>Props<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/components/events'><p class="link-text" data-v-0a6be7db>Events<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/components/v-model'><p class="link-text" data-v-0a6be7db>Component v-model<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/components/attrs'><p class="link-text" data-v-0a6be7db>Fallthrough Attributes<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/components/slots'><p class="link-text" data-v-0a6be7db>Slots<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/components/provide-inject'><p class="link-text" data-v-0a6be7db>Provide / inject<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/components/async'><p class="link-text" data-v-0a6be7db>Async Components<!----></p></a><!--]--></section></div><div class="group" data-v-1299e0e1><section class="VPSidebarGroup" data-v-1299e0e1 data-v-337738bb><div class="title" data-v-337738bb><h2 class="title-text" data-v-337738bb>Reusability<!----></h2></div><!--[--><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/reusability/composables'><p class="link-text" data-v-0a6be7db>Composables<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/reusability/custom-directives'><p class="link-text" data-v-0a6be7db>Custom Directives<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/reusability/plugins'><p class="link-text" data-v-0a6be7db>Plugins<!----></p></a>
42<!--]--></section></div><div class="group" data-v-1299e0e1><section class="VPSidebarGroup" data-v-1299e0e1 data-v-337738bb><div class="title" data-v-337738bb><h2 class="title-text" data-v-337738bb>Built-in Components<!----></h2></div><!--[--><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/built-ins/transition'><p class="link-text" data-v-0a6be7db>Transition<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/built-ins/transition-group'><p class="link-text" data-v-0a6be7db>TransitionGroup<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/built-ins/keep-alive'><p class="link-text" data-v-0a6be7db>KeepAlive<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/built-ins/teleport'><p class="link-text" data-v-0a6be7db>Teleport<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/built-ins/suspense'><p class="link-text" data-v-0a6be7db>Suspense<!----></p></a><!--]--></section></div><div class="group" data-v-1299e0e1><section class="VPSidebarGroup" data-v-1299e0e1 data-v-337738bb><div class="title" data-v-337738bb><h2 class="title-text" data-v-337738bb>Scaling Up<!----></h2></div><!--[--><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/scaling-up/sfc'><p class="link-text" data-v-0a6be7db>Single-File Components<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/scaling-up/tooling'><p class="link-text" data-v-0a6be7db>Tooling<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/scaling-up/routing'><p class="link-text" data-v-0a6be7db>Routing<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/scaling-up/state-management'><p class="link-text" data-v-0a6be7db>State Management<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/scaling-up/testing'><p class="link-text" data-v-0a6be7db>Testing<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/scaling-up/ssr'><p class="link-text" data-v-0a6be7db>Server-Side Rendering (SSR)<!----></p></a><!--]--></section></div><div class="group" data-v-1299e0e1><section class="VPSidebarGroup" data-v-1299e0e1 data-v-337738bb><div class="title" data-v-337738bb><h2 class="title-text" data-v-337738bb>Best Practices<!----></h2></div><!--[--><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/best-practices/production-deployment'><p class="link-text" data-v-0a6be7db>Production Deployment<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/best-practices/performance'><p class="link-text" data-v-0a6be7db>Performance<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/best-practices/accessibility'><p class="link-text" data-v-0a6be7db>Accessibility<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/best-practices/security'><p class="link-text" data-v-0a6be7db>Security<!----></p></a><!--]--></section></div><div class="group" data-v-1299e0e1><section class="VPSidebarGroup" data-v-1299e0e1 data-v-337738bb><div class="title" data-v-337738bb><h2 class="title-text" data-v-337738bb>TypeScript<!----></h2></div><!--[--><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/typescript/overview'><p class="link-text" data-v-0a6be7db>Overview<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/typescript/composition-api'><p class="link-text" data-v-0a6be7db>TS with Composition API<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/typescript/options-api'><p class="link-text" data-v-0a6be7db>TS with Options API<!----></p></a><!--]--></section></div><div class="group" data-v-1299e0e1><section class="VPSidebarGroup" data-v-1299e0e1 data-v-337738bb><div class="title" data-v-337738bb><h2 class="title-text" data-v-337738bb>Extra Topics<!----></h2></div><!--[--><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/extras/ways-of-using-vue'><p class="link-text" data-v-0a6be7db>Ways of Using Vue<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/extras/composition-api-faq'><p class="link-text" data-v-0a6be7db>Composition API FAQ<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/extras/reactivity-in-depth'><p class="link-text" data-v-0a6be7db>Reactivity in Depth<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/extras/rendering-mechanism'><p class="link-text" data-v-0a6be7db>Rendering Mechanism<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/extras/render-function'><p class="link-text" data-v-0a6be7db>Render Functions & JSX<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/extras/web-components'><p class="link-text" data-v-0a6be7db>Vue and Web Components<!----></p></a><a class='link' data-v-0a6be7db data-v-337738bb href='/guide/extras/animation'><p class="link-text" data-v-0a6be7db>Animation Techniques<!----></p></a>
42<!--]--></section></div><!--]--><!--[--><!--[--><div class="container" data-v-6b569599><a class="security" href="https://www.herodevs.com/support/nes-vue?utm_source=vuejs_org&utm_medium=sidebar_link&utm_campaign=vue2eol" target="_blank" data-v-6b569599> Get Security Updates for Vue 2 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-v-6b569599><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-6b569599></path></svg></a></div><!--]--><!--]--></nav></aside><div id="VPContent" class="VPContent has-sidebar" data-v-9a2a41fe data-v-b0fbf66a><div class="VPContentDoc has-aside has-sidebar" data-v-b0fbf66a data-v-2935696f><div class="container" data-v-2935696f><div class="aside" data-v-2935696f><div class="aside-container" data-v-2935696f><!--[--><!--]--><div class="VPContentDocOutline" data-v-2935696f data-v-b297a019><div class="outline-marker" data-v-b297a019></div><div class="outline-title" data-v-b297a019>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-b297a019><span id="doc-outline-aria-label" class="visually-hidden" data-v-b297a019>Table of Contents for current page</span><ul class="root" data-v-b297a019 data-v-ce04368b><!--[--><li data-v-ce04368b><a class="outline-link" href="#try-vue-online" style="" data-v-ce04368b>Try Vue Online</a><!----></li><li data-v-ce04368b><a class="outline-link" href="#creating-a-vue-application" style="" data-v-ce04368b>Creating a Vue Application</a><!----></li><li data-v-ce04368b><a class="outline-link" href="#using-vue-from-cdn" style="" data-v-ce04368b>Using Vue from CDN</a><!----></li><li data-v-ce04368b><a class="outline-link" href="#frameworks" style="" data-v-ce04368b>Frameworks</a><!----></li><li data-v-ce04368b><a class="outline-link" href="#next-steps" style="" data-v-ce04368b>Next Steps</a><!----></li><!--]--></ul></nav></div><!--[--><!--[--><!--[--><div><a class="sponsors-aside-text" href="/sponsor/">Sponsors</a><div class="spsr-container special aside" data-v-03eb1f1f><!----><!----><!----></div><div class="spsr-container platinum aside" data-v-03eb1f1f><!----><a href="/sponsor/" class="spsr-item action" data-v-03eb1f1f>Become a Sponsor</a><!----></div></div><!--]--><!--]--><!--]--><div class="VPCarbonAds" data-v-2935696f></div><!--[--><!--]--></div></div><div class="content" data-v-2935696f><!--[--><!--]--><main data-v-2935696f><div style="position:relative;" class="vt-doc guide" data-v-2935696f><div><div style="display:none;" hidden="true" aria-hidden="true">Are you an LLM? You can read better optimized documentation at /guide/quick-start.md for this page in Markdown format</div><h1 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to âQuick Startâ">â</a></h1><h2 id="try-vue-online" tabindex="-1">Try Vue Online <a class="header-anchor" href="#try-vue-online" aria-label="Permalink to âTry Vue Onlineâ">â</a></h2><ul><li><p>To quickly get a taste of Vue, you can try it directly in our <a href="https://play.vuejs.org/#eNo9jcEKwjAMhl/lt5fpQYfXUQfefAMvvRQbddC1pUuHUPrudg4HIcmXjyRZXEM4zYlEJ+T0iEPgXjn6BB8Zhp46WUZWDjCa9f6w9kAkTtH9CRinV4fmRtZ63H20Ztesqiylphqy3R5UYBqD1UyVAPk+9zkvV1CKbCv9poMLiTEfR2/IXpSoXomqZLtti/IFwVtA9A==" target="_blank" rel="noreferrer">Playground</a>.</p></li><li><p>If you prefer a plain HTML setup without any build steps, you can use this <a href="https://jsfiddle.net/yyx990803/2ke1ab0z/" target="_blank" rel="noreferrer">JSFiddle</a> as your starting point.</p></li><li><p>If you are already familiar with Node.js and the concept of build tools, you can also try a complete build setup right within your browser on <a href="https://vite.new/vue" target="_blank" rel="noreferrer">StackBlitz</a>.</p></li><li><p>To get a walkthrough of the recommended setup, watch this interactive <a href="http://scrimba.com/links/vue-quickstart" target="_blank" rel="noreferrer">Scrimba</a> tutorial that shows you how to run, edit, and deploy your first Vue app.</p></li></ul><h2 id="creating-a-vue-application" tabindex="-1">Creating a Vue Application <a class="header-anchor" href="#creating-a-vue-application" aria-label="Permalink to âCreating a Vue Applicationâ">â</a></h2><div class="tip custom-block"><p class="custom-block-title">Prerequisites</p><ul><li>Familiarity with the command line</li><li>Install <a href="https://nodejs.org/" target="_blank" rel="noreferrer">Node.js</a> version <code>^22.18.0 || >=24.12.0</code></li></ul></div><p>In this section we will introduce how to scaffold a Vue <a href='/guide/extras/ways-of-using-vue#single-page-application-spa'>Single Page Application</a> on your local machine. The created project will be using a build setup based on <a href="https://vite.dev/" target="_blank" rel="noreferrer">Vite</a> and allow us to use Vue <a href='/guide/scaling-up/sfc'>Single-File Components</a> (SFCs).</p><p>Make sure you have an up-to-date version of <a href="https://nodejs.org/" target="_blank" rel="noreferrer">Node.js</a> installed and your current working directory is the one where you intend to create a project. Run the following command in your command line (without the <code>$</code> sign):</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-53" id="tab-54" checked><label data-title="npm" for="tab-54">npm</label><input type="radio" name="group-53" id="tab-55"><label data-title="pnpm" for="tab-55">pnpm</label><input type="radio" name="group-53" id="tab-56"><label data-title="yarn" for="tab-56">yarn</label><input type="radio" name="group-53" id="tab-57"><label data-title="bun" for="tab-57">bun</label></div><div class="blocks"><div class="language-sh active"><button title="Copy Code" class="copy"></button><span class="lang">sh</span>
42<pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">npm</span><span style="color:#9ECBFF;"> create</span><span style="color:#9ECBFF;"> vue@latest</span></span></code></pre></div><div class="language-sh"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#9ECBFF;"> create</span><span style="color:#9ECBFF;"> vue@latest</span></span></code></pre></div><div class="language-sh"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="color:#6A737D;"># For Yarn (v1+)</span></span> 43<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">yarn</span><span style="color:#9ECBFF;"> create</span><span style="color:#9ECBFF;"> vue</span></span> 44<span class="line"></span> 45<span class="line"><span style="color:#6A737D;"># For Yarn Modern (v2+)</span></span> 46<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">yarn</span><span style="color:#9ECBFF;"> create</span><span style="color:#9ECBFF;"> vue@latest</span></span> 47<span class="line"><span style="color:#E1E4E8;"> </span></span> 48<span class="line"><span style="color:#6A737D;"># For Yarn ^v4.11</span></span> 49<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">yarn</span><span style="color:#9ECBFF;"> dlx</span><span style="color:#9ECBFF;"> create-vue@latest</span></span></code></pre></div><div class="language-sh"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">bun</span><span style="color:#9ECBFF;"> create</span><span style="color:#9ECBFF;"> vue@latest</span></span></code></pre></div></div></div><p>This command will install and execute <a href="https://github.com/vuejs/create-vue" target="_blank" rel="noreferrer">create-vue</a>, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:</p><div class="language-sh"><pre><code><span style="color:var(--vt-c-green);">â</span> <span style="color:#A6ACCD;">Project name: <span style="color:#888;">⦠<span style="color:#89DDFF;"><</span><span style="color:#888;">your-project-name</span><span style="color:#89DDFF;">></span></span></span> 50<span style="color:var(--vt-c-green);">â</span> <span style="color:#A6ACCD;">Add TypeScript? <span style="color:#888;">⦠<span style="color:#89DDFF;text-decoration:underline;">No</span> / Yes</span></span> 51<span style="color:var(--vt-c-green);">â</span> <span style="color:#A6ACCD;">Add JSX Support? <span style="color:#888;">⦠<span style="color:#89DDFF;text-decoration:underline;">No</span> / Yes</span></span> 52<span style="color:var(--vt-c-green);">â</span> <span style="color:#A6ACCD;">Add Vue Router for Single Page Application development? <span style="color:#888;">⦠<span style="color:#89DDFF;text-decoration:underline;">No</span> / Yes</span></span> 53<span style="color:var(--vt-c-green);">â</span> <span style="color:#A6ACCD;">Add Pinia for state management? <span style="color:#888;">⦠<span style="color:#89DDFF;text-decoration:underline;">No</span> / Yes</span></span> 54<span style="color:var(--vt-c-green);">â</span> <span style="color:#A6ACCD;">Add Vitest for Unit testing? <span style="color:#888;">⦠<span style="color:#89DDFF;text-decoration:underline;">No</span> / Yes</span></span> 55<span style="color:var(--vt-c-green);">â</span> <span style="color:#A6ACCD;">Add an End-to-End Testing Solution? <span style="color:#888;">⦠<span style="color:#89DDFF;text-decoration:underline;">No</span> / Cypress / Nightwatch / Playwright</span></span> 56<span style="color:var(--vt-c-green);">â</span> <span style="color:#A6ACCD;">Add ESLint for code quality? <span style="color:#888;">⦠No / <span style="color:#89DDFF;text-decoration:underline;">Yes</span></span></span> 57<span style="color:var(--vt-c-green);">â</span> <span style="color:#A6ACCD;">Add Prettier for code formatting? <span style="color:#888;">⦠<span style="color:#89DDFF;text-decoration:underline;">No</span> / Yes</span></span> 58<span style="color:var(--vt-c-green);">â</span> <span style="color:#A6ACCD;">Add Vue DevTools 7 extension for debugging? (experimental) <span style="color:#888;">⦠<span style="color:#89DDFF;text-decoration:underline;">No</span> / Yes</span></span> 59<span></span> 60<span style="color:#A6ACCD;">Scaffolding project in ./<span style="color:#89DDFF;"><</span><span style="color:#888;">
60your-project-name</span><span style="color:#89DDFF;">></span>...</span> 61<span style="color:#A6ACCD;">Done.</span></code></pre></div><p>If you are unsure about an option, simply choose <code>No</code> by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server:</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-66" id="tab-67" checked><label data-title="npm" for="tab-67">npm</label><input type="radio" name="group-66" id="tab-68"><label data-title="pnpm" for="tab-68">pnpm</label><input type="radio" name="group-66" id="tab-69"><label data-title="yarn" for="tab-69">yarn</label><input type="radio" name="group-66" id="tab-70"><label data-title="bun" for="tab-70">bun</label></div><div class="blocks"><div class="language-sh active"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">cd</span><span style="color:#9ECBFF;"> <your-project-name></span></span> 62<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">npm</span><span style="color:#9ECBFF;"> install</span></span> 63<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">npm</span><span style="color:#9ECBFF;"> run</span><span style="color:#9ECBFF;"> dev</span></span></code></pre></div><div class="language-sh"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">cd</span><span style="color:#9ECBFF;"> <your-project-name></span></span> 64<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#9ECBFF;"> install</span></span> 65<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#9ECBFF;"> run</span><span style="color:#9ECBFF;"> dev</span></span></code></pre></div><div class="language-sh"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">cd</span><span style="color:#9ECBFF;"> <your-project-name></span></span> 66<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">yarn</span></span> 67<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">yarn</span><span style="color:#9ECBFF;"> dev</span></span></code></pre></div><div class="language-sh"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">cd</span><span style="color:#9ECBFF;"> <your-project-name></span></span> 68<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">bun</span><span style="color:#9ECBFF;"> install</span></span> 69<span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">bun</span><span style="color:#9ECBFF;"> run</span><span style="color:#9ECBFF;"> dev</span></span></code></pre></div></div></div><p>You should now have your first Vue project running! Note that the example components in the generated project are written using the <a href='/guide/introduction#composition-api'>Composition API</a> and <code><script setup></code>, rather than the <a href='/guide/introduction#options-api'>Options API</a>. Here are some additional tips:</p><ul><li>The recommended IDE setup is <a href="https://code.visualstudio.com/" target="_blank" rel="noreferrer">Visual Studio Code</a> + <a href="https://marketplace.visualstudio.com/items?itemName=Vue.volar" target="_blank" rel="noreferrer">Vue - Official extension</a>. If you use other editors, check out the <a href='/guide/scaling-up/tooling#ide-support'>IDE support section</a>.</li><li>More tooling details, including integration with backend frameworks, are discussed in the <a href='/guide/scaling-up/tooling'>Tooling Guide</a>.</li><li>To learn more about the underlying build tool Vite, check out the <a href="https://vite.dev/" target="_blank" rel="noreferrer">Vite docs</a>.</li><li>If you choose to use TypeScript, check out the <a href='/guide/typescript/overview'>TypeScript Usage Guide</a>.</li></ul><p>When you are ready to ship your app to production, run the following:</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-100" id="tab-101" checked><label data-title="npm" for="tab-101">npm</label><input type="radio" name="group-100" id="tab-102"><label data-title="pnpm" for="tab-102">pnpm</label><input type="radio" name="group-100" id="tab-103"><label data-title="yarn" for="tab-103">yarn</label><input type="radio" name="group-100" id="tab-104"><label data-title="bun" for="tab-104">bun</label></div><div class="blocks"><div class="language-sh active"><button title="Copy Code" class="copy"></button><span class="lang">sh</span>
69<pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">npm</span><span style="color:#9ECBFF;"> run</span><span style="color:#9ECBFF;"> build</span></span></code></pre></div><div class="language-sh"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#9ECBFF;"> run</span><span style="color:#9ECBFF;"> build</span></span></code></pre></div><div class="language-sh"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">yarn</span><span style="color:#9ECBFF;"> build</span></span></code></pre></div><div class="language-sh"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="user-select:none;-webkit-user-select:none;">$ </span><span style="color:#9ECBFF;">bun</span><span style="color:#9ECBFF;"> run</span><span style="color:#9ECBFF;"> build</span></span></code></pre></div></div></div><p>This will create a production-ready build of your app in the project's <code>./dist</code> directory. Check out the <a href='/guide/best-practices/production-deployment'>Production Deployment Guide</a> to learn more about shipping your app to production.</p><p><a href="#next-steps">Next Steps ></a></p><h2 id="using-vue-from-cdn" tabindex="-1">Using Vue from CDN <a class="header-anchor" href="#using-vue-from-cdn" aria-label="Permalink to âUsing Vue from CDNâ">â</a></h2><p>You can use Vue directly from a CDN via a script tag:</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#B392F0;"> src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"https://unpkg.com/vue@3/dist/vue.global.js"</span><span style="color:#E1E4E8;">></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre></div><p>Here we are using <a href="https://unpkg.com/" target="_blank" rel="noreferrer">unpkg</a>, but you can also use any CDN that serves npm packages, for example <a href="https://www.jsdelivr.com/package/npm/vue" target="_blank" rel="noreferrer">jsdelivr</a> or <a href="https://cdnjs.com/libraries/vue" target="_blank" rel="noreferrer">cdnjs</a>. Of course, you can also download this file and serve it yourself.</p><p>When using Vue from a CDN, there is no "build step" involved. This makes the setup a lot simpler, and is suitable for enhancing static HTML or integrating with a backend framework. However, you won't be able to use the Single-File Component (SFC) syntax.</p><h3 id="using-the-global-build" tabindex="-1">Using the Global Build <a class="header-anchor" href="#using-the-global-build" aria-label="Permalink to âUsing the Global Buildâ">â</a></h3><p>The above link loads the <em>global build</em> of Vue, where all top-level APIs are exposed as properties on the global <code>Vue</code> object. Here is a full example using the global build:</p><div class="options-api"><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#B392F0;"> src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"https://unpkg.com/vue@3/dist/vue.global.js"</span><span style="color:#E1E4E8;">></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span> 70<span class="line"></span> 71<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">div</span><span style="color:#B392F0;"> id</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"app"</span><span style="color:#E1E4E8;">>{{ message }}</</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span> 72<span class="line"></span> 73<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span> 74<span class="line"><span style="color:#F97583;"> const</span><span style="color:#E1E4E8;"> { </span><span style="color:#79B8FF;">createApp</span><span style="color:#E1E4E8;"> } </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> Vue</span></span> 75<span class="line"></span> 76<span class="line"><span style="color:#B392F0;"> createApp</span><span style="color:#E1E4E8;">
76({</span></span> 77<span class="line"><span style="color:#B392F0;"> data</span><span style="color:#E1E4E8;">() {</span></span> 78<span class="line"><span style="color:#F97583;"> return</span><span style="color:#E1E4E8;"> {</span></span> 79<span class="line"><span style="color:#E1E4E8;"> message: </span><span style="color:#9ECBFF;">'Hello Vue!'</span></span> 80<span class="line"><span style="color:#E1E4E8;"> }</span></span> 81<span class="line"><span style="color:#E1E4E8;"> }</span></span> 82<span class="line"><span style="color:#E1E4E8;"> }).</span><span style="color:#B392F0;">mount</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'#app'</span><span style="color:#E1E4E8;">)</span></span> 83<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre></div><p><a href="https://codepen.io/vuejs-examples/pen/QWJwJLp" target="_blank" rel="noreferrer">CodePen Demo ></a></p></div><div class="composition-api"><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#B392F0;"> src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"https://unpkg.com/vue@3/dist/vue.global.js"</span><span style="color:#E1E4E8;">></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span> 84<span class="line"></span> 85<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">div</span><span style="color:#B392F0;"> id</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"app"</span><span style="color:#E1E4E8;">>{{ message }}</</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span> 86<span class="line"></span> 87<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span> 88<span class="line"><span style="color:#F97583;"> const</span><span style="color:#E1E4E8;"> { </span><span style="color:#79B8FF;">createApp</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">ref</span><span style="color:#E1E4E8;"> } </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> Vue</span></span> 89<span class="line"></span> 90<span class="line"><span style="color:#B392F0;"> createApp</span><span style="color:#E1E4E8;">({</span></span> 91<span class="line"><span style="color:#B392F0;"> setup</span><span style="color:#E1E4E8;">() {</span></span> 92<span class="line"><span style="color:#F97583;"> const</span><span style="color:#79B8FF;"> message</span><span style="color:#F97583;"> =</span><span style="color:#B392F0;"> ref</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'Hello vue!'</span><span style="color:#E1E4E8;">)</span></span> 93<span class="line"><span style="color:#F97583;"> return</span><span style="color:#E1E4E8;"> {</span></span> 94<span class="line"><span style="color:#E1E4E8;"> message</span></span> 95<span class="line"><span style="color:#E1E4E8;"> }</span></span> 96<span class="line"><span style="color:#E1E4E8;"> }</span></span> 97<span class="line"><span style="color:#E1E4E8;"> }).</span><span style="color:#B392F0;">mount</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'#app'</span><span style="color:#E1E4E8;">)</span></span> 98<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre></div><p><a href="https://codepen.io/vuejs-examples/pen/eYQpQEG" target="_blank" rel="noreferrer">CodePen Demo ></a></p><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>Many of the examples for Composition API throughout the guide will be using the <code><script setup></code> syntax, which requires build tools. If you intend to use Composition API without a build step, c
98onsult the usage of the <a href='/api/composition-api-setup'><code>setup()</code> option</a>.</p></div></div><h3 id="using-the-es-module-build" tabindex="-1">Using the ES Module Build <a class="header-anchor" href="#using-the-es-module-build" aria-label="Permalink to âUsing the ES Module Buildâ">â</a></h3><p>Throughout the rest of the documentation, we will be primarily using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules" target="_blank" rel="noreferrer">ES modules</a> syntax. Most modern browsers now support ES modules natively, so we can use Vue from a CDN via native ES modules like this:</p><div class="options-api"><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">div</span><span style="color:#B392F0;"> id</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"app"</span><span style="color:#E1E4E8;">>{{ message }}</</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span> 99<span class="line"></span> 100<span class="line highlighted"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#B392F0;"> type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"module"</span><span style="color:#E1E4E8;">></span></span> 101<span class="line highlighted"><span style="color:#F97583;"> import</span><span style="color:#E1E4E8;"> { createApp } </span><span style="color:#F97583;">from</span><span style="color:#9ECBFF;"> 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'</span></span> 102<span class="line"></span> 103<span class="line"><span style="color:#B392F0;"> createApp</span><span style="color:#E1E4E8;">({</span></span> 104<span class="line"><span style="color:#B392F0;"> data</span><span style="color:#E1E4E8;">() {</span></span> 105<span class="line"><span style="color:#F97583;"> return</span><span style="color:#E1E4E8;"> {</span></span> 106<span class="line"><span style="color:#E1E4E8;"> message: </span><span style="color:#9ECBFF;">'Hello Vue!'</span></span> 107<span class="line"><span style="color:#E1E4E8;"> }</span></span> 108<span class="line"><span style="color:#E1E4E8;"> }</span></span> 109<span class="line"><span style="color:#E1E4E8;"> }).</span><span style="color:#B392F0;">mount</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'#app'</span><span style="color:#E1E4E8;">)</span></span> 110<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre></div></div><div class="composition-api"><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">div</span><span style="color:#B392F0;"> id</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"app"</span><span style="color:#E1E4E8;">>{{ message }}</</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span> 111<span class="line"></span> 112<span class="line highlighted"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#B392F0;"> type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"module"</span><span style="color:#E1E4E8;">></span></span> 113<span class="line highlighted"><span style="color:#F97583;"> import</span><span style="color:#E1E4E8;"> { createApp, ref } </span><span style="color:#F97583;">from</span><span style="color:#9ECBFF;"> 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'</span></span> 114<span class="line"></span> 115<span class="line"><span style="color:#B392F0;"> createApp</span><span style="color:#E1E4E8;">
115({</span></span> 116<span class="line"><span style="color:#B392F0;"> setup</span><span style="color:#E1E4E8;">() {</span></span> 117<span class="line"><span style="color:#F97583;"> const</span><span style="color:#79B8FF;"> message</span><span style="color:#F97583;"> =</span><span style="color:#B392F0;"> ref</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'Hello Vue!'</span><span style="color:#E1E4E8;">)</span></span> 118<span class="line"><span style="color:#F97583;"> return</span><span style="color:#E1E4E8;"> {</span></span> 119<span class="line"><span style="color:#E1E4E8;"> message</span></span> 120<span class="line"><span style="color:#E1E4E8;"> }</span></span> 121<span class="line"><span style="color:#E1E4E8;"> }</span></span> 122<span class="line"><span style="color:#E1E4E8;"> }).</span><span style="color:#B392F0;">mount</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'#app'</span><span style="color:#E1E4E8;">)</span></span> 123<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre></div></div><p>Notice that we are using <code><script type="module"></code>, and the imported CDN URL is pointing to the <strong>ES modules build</strong> of Vue instead.</p><div class="options-api"><p><a href="https://codepen.io/vuejs-examples/pen/VwVYVZO" target="_blank" rel="noreferrer">CodePen Demo ></a></p></div><div class="composition-api"><p><a href="https://codepen.io/vuejs-examples/pen/MWzazEv" target="_blank" rel="noreferrer">CodePen Demo ></a></p></div><h3 id="enabling-import-maps" tabindex="-1">Enabling Import maps <a class="header-anchor" href="#enabling-import-maps" aria-label="Permalink to âEnabling Import mapsâ">â</a></h3><p>In the above example, we are importing from the full CDN URL, but in the rest of the documentation you will see code like this:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { createApp } </span><span style="color:#F97583;">from</span><span style="color:#9ECBFF;"> 'vue'</span></span></code></pre></div><p>We can teach the browser where to locate the <code>vue</code> import by using <a href="https://caniuse.com/import-maps" target="_blank" rel="noreferrer">Import Maps</a>:</p><div class="options-api"><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line highlighted"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#B392F0;"> type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"importmap"</span><span style="color:#E1E4E8;">></span></span> 124<span class="line highlighted"><span style="color:#E1E4E8;"> {</span></span> 125<span class="line highlighted"><span style="color:#E1E4E8;"> "imports": {</span></span> 126<span class="line highlighted"><span style="color:#E1E4E8;"> "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"</span></span> 127<span class="line highlighted"><span style="color:#E1E4E8;"> }</span></span> 128<span class="line highlighted"><span style="color:#E1E4E8;"> }</span></span> 129<span class="line highlighted"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span> 130<span class="line"></span> 131<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">div</span><span style="color:#B392F0;"> id</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"app"</span><span style="color:#E1E4E8;">>{{ message }}</</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span> 132<span class="line"></span> 133<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#B392F0;"> type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"module"</span><span style="color:#E1E4E8;">></span></span> 134<span class="line highlighted"><span style="color:#F97583;">
134 import</span><span style="color:#E1E4E8;"> { createApp } </span><span style="color:#F97583;">from</span><span style="color:#9ECBFF;"> 'vue'</span></span> 135<span class="line"></span> 136<span class="line"><span style="color:#B392F0;"> createApp</span><span style="color:#E1E4E8;">({</span></span> 137<span class="line"><span style="color:#B392F0;"> data</span><span style="color:#E1E4E8;">() {</span></span> 138<span class="line"><span style="color:#F97583;"> return</span><span style="color:#E1E4E8;"> {</span></span> 139<span class="line"><span style="color:#E1E4E8;"> message: </span><span style="color:#9ECBFF;">'Hello Vue!'</span></span> 140<span class="line"><span style="color:#E1E4E8;"> }</span></span> 141<span class="line"><span style="color:#E1E4E8;"> }</span></span> 142<span class="line"><span style="color:#E1E4E8;"> }).</span><span style="color:#B392F0;">mount</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'#app'</span><span style="color:#E1E4E8;">)</span></span> 143<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre></div><p><a href="https://codepen.io/vuejs-examples/pen/wvQKQyM" target="_blank" rel="noreferrer">CodePen Demo ></a></p></div><div class="composition-api"><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line highlighted"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#B392F0;"> type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"importmap"</span><span style="color:#E1E4E8;">></span></span> 144<span class="line highlighted"><span style="color:#E1E4E8;"> {</span></span> 145<span class="line highlighted"><span style="color:#E1E4E8;"> "imports": {</span></span> 146<span class="line highlighted"><span style="color:#E1E4E8;"> "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"</span></span> 147<span class="line highlighted"><span style="color:#E1E4E8;"> }</span></span> 148<span class="line highlighted"><span style="color:#E1E4E8;"> }</span></span> 149<span class="line highlighted"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span> 150<span class="line"></span> 151<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">div</span><span style="color:#B392F0;"> id</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"app"</span><span style="color:#E1E4E8;">>{{ message }}</</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span> 152<span class="line"></span> 153<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#B392F0;"> type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"module"</span><span style="color:#E1E4E8;">></span></span> 154<span class="line highlighted"><span style="color:#F97583;"> import</span><span style="color:#E1E4E8;"> { createApp, ref } </span><span style="color:#F97583;">from</span><span style="color:#9ECBFF;"> 'vue'</span></span> 155<span class="line"></span> 156<span class="line"><span style="color:#B392F0;"> createApp</span><span style="color:#E1E4E8;">({</span></span> 157<span class="line"><span style="color:#B392F0;"> setup</span><span style="color:#E1E4E8;">() {</span></span> 158<span class="line"><span style="color:#F97583;"> const</span><span style="color:#79B8FF;"> message</span><span style="color:#F97583;"> =</span><span style="color:#B392F0;"> ref</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'Hello Vue!'</span><span style="color:#E1E4E8;">)</span></span> 159<span class="line"><span style="color:#F97583;"> return</span><span style="color:#E1E4E8;"> {</span></span> 160<span class="line"><span style="color:#E1E4E8;"> message</span></span> 161<span class="line"><span style="color:#E1E4E8;"> }</span></span> 162<span class="line"><span style="color:#E1E4E8;"> }</span></span> 163<span class="line"><span style="color:#E1E4E8;"> }).</span><span style="color:#B392F0;">mount</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'#app'</span><span style="color:#E1E4E8;">)</span></span> 164<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre></div><p><a href="https://codepen.io/vuejs-examples/pen/YzRyRYM" target="_blank" rel="noreferrer">CodePen Demo ></a></p></div><p>You can also add entries for other dependencies to the import map - but make sure they point to the ES modules version of the library you intend to use.</p><div class="tip custom-block"><p class="custom-block-title">Import Maps Browser Support</p><p>Import Maps is a relatively new browser feature. Make sure to use a browser within its <a href="https://caniuse.com/import-maps" target="_blank" rel="noreferrer">support range</a>. In particular, it is only supported in Safari 16.4+.</p></div><div class="warning custom-block"><p class="custom-block-title">Notes on Production Use</p><p>The examples so far are using the development build of Vue - if you intend to use Vue from a CDN in production, make sure to check out the <a href='/guide/best-practices/production-deployment#without-build-tools'>Production Deployment Guide</a>.</p><p>While it is possible to use Vue without a build system, an alternative approach to consider is using <a href="https://github.com/vuejs/petite-vue" target="_blank" rel="noreferrer"><code>vuejs/petite-vue</code></a> that could better suit the context where <a href="https://github.com/jquery/jquery" target="_blank" rel="noreferrer"><code>jquery/jquery</code></a> (in the past) or <a href="https://github.com/alpinejs/alpine" target="_blank" rel="noreferrer"><code>alpinejs/alpine</code></a> (in the present) might be used instead.</p></div><h3 id="splitting-up-the-modules" tabindex="-1">Splitting Up the Modules <a class="header-anchor" href="#splitting-up-the-modules" aria-label="Permalink to âSplitting Up the Modulesâ">â</a></h3><p>
164As we dive deeper into the guide, we may need to split our code into separate JavaScript files so that they are easier to manage. For example:</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="index.html">index.html</span></div><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">div</span><span style="color:#B392F0;"> id</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"app"</span><span style="color:#E1E4E8;">></</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span> 165<span class="line"></span> 166<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#B392F0;"> type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"module"</span><span style="color:#E1E4E8;">></span></span> 167<span class="line"><span style="color:#F97583;"> import</span><span style="color:#E1E4E8;"> { createApp } </span><span style="color:#F97583;">from</span><span style="color:#9ECBFF;"> 'vue'</span></span> 168<span class="line"><span style="color:#F97583;"> import</span><span style="color:#E1E4E8;"> MyComponent </span><span style="color:#F97583;">from</span><span style="color:#9ECBFF;"> './my-component.js'</span></span> 169<span class="line"></span> 170<span class="line"><span style="color:#B392F0;"> createApp</span><span style="color:#E1E4E8;">(MyComponent).</span><span style="color:#B392F0;">mount</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">'#app'</span><span style="color:#E1E4E8;">)</span></span> 171<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre></div></div><div class="options-api"><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="my-component.js">my-component.js</span></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="color:#F97583;">export</span><span style="color:#F97583;"> default</span><span style="color:#E1E4E8;"> {</span></span> 172<span class="line"><span style="color:#B392F0;"> data</span><span style="color:#E1E4E8;">() {</span></span> 173<span class="line"><span style="color:#F97583;"> return</span><span style="color:#E1E4E8;"> { count: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> }</span></span> 174<span class="line"><span style="color:#E1E4E8;"> },</span></span> 175<span class="line"><span style="color:#E1E4E8;"> template: </span><span style="color:#9ECBFF;">`<div>Count is: {{ count }}</div>`</span></span> 176<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre></div></div></div><div class="composition-api"><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="my-component.js">my-component.js</span></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8;" tabindex="0" dir="ltr"><code><span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#9ECBFF;"> 'vue'</span></span> 177<span class="line"><span style="color:#F97583;">export</span><span style="color:#F97583;"> default</span><span style="color:#E1E4E8;"> {</span></span> 178<span class="line"><span style="color:#B392F0;"> setup</span><span style="color:#E1E4E8;">() {</span></span> 179<span class="line"><span style="color:#F97583;"> const</span><span style="color:#79B8FF;"> count</span><span style="color:#F97583;"> =</span><span style="color:#B392F0;"> ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">)</span></span> 180<span class="line"><span style="color:#F97583;"> return</span><span style="color:#E1E4E8;"> { count }</span></span> 181<span class="line"><span style="color:#E1E4E8;"> },</span></span> 182<span class="line"><span style="color:#E1E4E8;"> template: </span><span style="color:#9ECBFF;">`<div>Count is: {{ count }}</div>`</span></span> 183<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre></div></div></div><p>If you directly open the above <code>index.html</code> in your browser, you will find that it throws an error because ES modules cannot work over the <code>file://</code> protocol, which is the protocol the browser uses when you open a local file.</p><p>Due to security reasons, ES modules can only work over the <code>http://</code> protocol, which is what the browsers use when opening pages on the web. In order for ES modules to work on our local machine, we need to serve the <code>index.html</code> over the <code>http://</code> protocol, with a local HTTP server.</p><p>To start a local HTTP server, first make sure you have <a href="https://nodejs.org/en/" target="_blank" rel="noreferrer">Node.js</a> installed, then run <code>npx serve</code> from the command line in the same directory where your HTML file is. You can also use any other HTTP server that can serve static files with the correct MIME types.</p><p>You may have noticed that the imported component's template is inlined as a JavaScript string. If you are using VS Code, you can install the <a href="https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html" target="_blank" rel="noreferrer">es6-string-html</a> extension and prefix the strings with a <code>/*html*/</code> comment to get syntax highlighting for them.</p><h2 id="frameworks" tabindex="-1">Frameworks <a class="header-anchor" href="#frameworks" aria-label="Permalink to âFrameworksâ">â</a></h2><p>There are Vue frameworks which support <a href='/guide/scaling-up/ssr'>SSR</a> and other features out-of-the-box:</p><ul><li><a href="https://nuxt.com/" target="_blank" rel="noreferrer">Nuxt</a></li><li><a href="https://vike.dev/" target="_blank" rel="noreferrer">Vike</a></li><li><a href="https://astro.build/" target="_blank" rel="noreferrer">Astro</a></li><li><a href="https://quasar.dev/" target="_blank" rel="noreferrer">Quasar</a></li></ul><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>The general recommendation is to use a framework only if you need SSR.</p><p>If you don't need SSR, you can simply use <a href="https://vite.dev/" target="_blank" rel="noreferrer">Vite</a> (this is what the section above <a href="#creating-a-vue-application">Creating a Vue Application</a> scaffolds).</p></div><div class="info custom-block"><p class="custom-block-title custom-block-title-default">INFO</p><p>Vue frameworks typically use Vite under the hood, so directly using Vite instead of a Vue framework is a simpler setup if you don't need SSR. That said, frameworks also support extra features, such as UI themes, which can also be a reason to favor a Vue framework instead of just using Vite.</p></div><h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to âNext Stepsâ">â</a></h2><p>If you skipped the <a href='/guide/introduction'>Introduction</a>, we strongly recommend reading it before moving on to the rest of the documentation.</p><div class="vt-box-container next-steps"><a class='vt-box' href='/guide/essentials/application'><p class="next-steps-link">Continue with the Guide</p><p class="next-steps-caption">
183The guide walks you through every aspect of the framework in full detail.</p></a><a class="vt-box" href="/tutorial/"><p class="next-steps-link">Try the Tutorial</p><p class="next-steps-caption">For those who prefer learning things hands-on.</p></a><a class="vt-box" href="/examples/"><p class="next-steps-link">Check out the Examples</p><p class="next-steps-caption">Explore examples of core features and common UI tasks.</p></a></div></div></div><p class="edit-link" data-v-2935696f><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" class="vt-icon" data-v-2935696f><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg><a class="vt-link link" href="https://github.com/vuejs/docs/edit/main/src/guide/quick-start.md" target="_blank" rel="noopener noreferrer" data-v-2935696f><!--[-->Edit this page on GitHub<!--]--><!----><!----></a></p></main><!--[--><!--]--><!----></div></div></div></div><div class="visually-hidden" aria-live="polite" data-v-9a2a41fe>Quick Start has loaded</div></div></div> 184
184<script>window.__VP_HASH_MAP__=JSON.parse("{\"about_coc.md\":\"v_lGDmAB\",\"about_community-guide.md\":\"BwmxDKSS\",\"about_faq.md\":\"DHc_el53\",\"about_privacy.md\":\"DEPHtMz3\",\"about_releases.md\":\"DetwGGkT\",\"about_team.md\":\"Bju45K56\",\"api_application.md\":\"VZAiUUHH\",\"api_built-in-components.md\":\"DyOEstr8\",\"api_built-in-directives.md\":\"Bwl1j1C0\",\"api_built-in-special-attributes.md\":\"7ukuTnDw\",\"api_built-in-special-elements.md\":\"_89XGI6J\",\"api_compile-time-flags.md\":\"DnUXxyzB\",\"api_component-instance.md\":\"EDnTyqin\",\"api_composition-api-dependency-injection.md\":\"B9qPobt6\",\"api_composition-api-helpers.md\":\"Bw8Ah-tz\",\"api_composition-api-lifecycle.md\":\"CyX40fzd\",\"api_composition-api-setup.md\":\"Be3LqBUx\",\"api_custom-elements.md\":\"DWFOU3qZ\",\"api_custom-renderer.md\":\"BoXNGhLk\",\"api_general.md\":\"D7EvoH3O\",\"api_index.md\":\"C3D3OUgv\",\"api_options-composition.md\":\"BOsQ2PQi\",\"api_options-lifecycle.md\":\"CDBCDMoo\",\"api_options-misc.md\":\"D8V7uXE_\",\"api_options-rendering.md\":\"COtV-faK\",\"api_options-state.md\":\"DxHRHAbQ\",\"api_reactivity-advanced.md\":\"C41DjTEN\",\"api_reactivity-core.md\":\"DlT_WaF7\",\"api_reactivity-utilities.md\":\"Ca36juup\",\"api_render-function.md\":\"DACyuVQz\",\"api_sfc-css-features.md\":\"C_AaP-zv\",\"api_sfc-script-setup.md\":\"CyQsb2kc\",\"api_sfc-spec.md\":\"C34U61Oi\",\"api_ssr.md\":\"DK7Q8OTi\",\"api_utility-types.md\":\"DpWCoKQ9\",\"ecosystem_newsletters.md\":\"CVuypRbj\",\"ecosystem_themes.md\":\"Cr2s_KrP\",\"error-reference_index.md\":\"_PgetNiz\",\"examples_index.md\":\"BosncS-L\",\"glossary_index.md\":\"CwErPStu\",\"guide_best-practices_accessibility.md\":\"Danvt5NC\",\"guide_best-practices_performance.md\":\"CRCuQkrm\",\"guide_best-practices_production-deployment.md\":\"Bfz7TxyQ\",\"guide_best-practices_security.md\":\"VFTR_0Aj\",\"guide_built-ins_keep-alive.md\":\"Ji3uXOMI\",\"guide_built-ins_suspense.md\":\"DySA5I5e\",\"guide_built-ins_teleport.md\":\"BSmLY9qO\",\"guide_built-ins_transition-group.md\":\"4XsGgk67\",\"guide_built-ins_transition.md\":\"CRfSVht3\",\"guide_components_async.md\":\"CTM3th60\",\"guide_components_attrs.md\":\"Bs43RDcV\",\"guide_components_events.md\":\"Bktakbkd\",\"guide_components_props.md\":\"B9hwuYLq\",\"guide_components_provide-inject.md\":\"XBqrIHRf\",\"guide_components_registration.md\":\"BI8Jpv7W\",\"guide_components_slots.md\":\"d4qdroQB\",\"guide_components_v-model.md\":\"CPVTbjOw\",\"guide_essentials_application.md\":\"Cnc3TbYf\",\"guide_essentials_class-and-style.md\":\"7d1YOI5v\",\"guide_essentials_component-basics.md\":\"DztF_zbV\",\"guide_essentials_computed.md\":\"z2hlVU6p\",\"guide_essentials_conditional.md\":\"WK5Fw9DQ\",\"guide_essentials_event-handling.md\":\"CWlF0xcY\",\"guide_essentials_forms.md\":\"B5_qYrzh\",\"guide_essentials_lifecycle.md\":\"BxGpL8_i\",\"guide_essentials_list.md\":\"DGS6BKbO\",\"guide_essentials_reactivity-fundamentals.md\":\"Dpx6Bh2G\",\"guide_essentials_template-refs.md\":\"4LtSUNLf\",\"guide_essentials_template-syntax.md\":\"D0xjQGCP\",\"guide_essentials_watchers.md\":\"Btqt4KH_\",\"guide_extras_animation.md\":\"B-DwfRTl\",\"guide_extras_composition-api-faq.md\":\"_odzTvi9\",\"guide_extras_reactivity-in-depth.md\":\"CzUXHV_5\",\"guide_extras_reactivity-transform.md\":\"B6Pu6gbR\",\"guide_extras_render-function.md\":\"Cxue8EsT\",\"guide_extras_rendering-mechanism.md\":\"BvPpETmZ\",\"guide_extras_ways-of-using-vue.md\":\"ODsap4pA\",\"guide_extras_web-components.md\":\"BJvj-n8q\",\"guide_introduction.md\":\"gc56Jx_-\",\"guide_quick-start.md\":\"B1k9QN6u\",\"guide_reusability_composables.md\":\"DgAERp1Y\",\"guide_reusability_custom-directives.md\":\"BaZSW9x9\",\"guide_reusability_plugins.md\":\"DAD0ptgV\",\"guide_scaling-up_routing.md\":\"wVWpKfKh\",\"guide_scaling-up_sfc.md\":\"BszREJuB\",\"guide_scaling-up_ssr.md\":\"BxWPmoPJ\",\"guide_scaling-up_state-management.md\":\"CuCI4wPy\",\"guide_scaling-up_testing.md\":\"19p_y5Bl\",\"guide_scaling-up_tooling.md\":\"CNmmMp3K\",\"guide_typescript_composition-api.md\":\"fU4bsdy-\",\"guide_typescript_options-api.md\":\"6brFTvQj\",\"guide_typescript_overview.md\":\"DLTHlNYO\",\"index.md\":\"DGgGtkgQ\",\"partners_all.md\":\"D__SxRI_\",\"partners_curotec.md\":\"DFzGVmJK\",\"partners_herodevs.md\":\"C5DSXeOX\",\"partners_index.md\":\"BqX16792\",\"partners_monterail.md\":\"DHPTzuTt\",\"partners_proxify.md\":\"C5Ra9A1h\",\"partners_redberry.md\":\"DZ4x3n30\",\"partners_vehikl.md\":\"z2Ms7-gY\",\"partners_webreinvent.md\":\"CtWCJJdf\",\"sponsor_index.md\":\"t80tqlQI\",\"style-guide_index.md\":\"BQIeFHYc\",\"style-guide_rules-essential.md\":\"CtcseRo2\",\"style-guide_rules-recommended.md\":\"FwqWnc8x\",\"style-guide_rules-strongly-recommended.md\":\"CLJOnRef\",\"style-guide_rules-use-with-caution.md\":\"A9hZCq0H\",\"translations_index.md\":\"CI3QR2Bi\",\"tutorial_index.md\":\"DAkQf-Ux\"}");
184window.__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|tutorial|examples|api|glossary|error-reference)/\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/guide/quick-start\"},{\"text\":\"Guide\",\"link\":\"/guide/introduction\"},{\"text\":\"Tutorial\",\"link\":\"/tutorial/\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"API\",\"link\":\"/api/\"},{\"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\":\"Playground\",\"link\":\"https://play.vuejs.org\"},{\"text\":\"Ecosystem\",\"activeMatch\":\"^/ecosystem/\",\"items\":[{\"text\":\"Resources\",\"items\":[{\"text\":\"Themes\",\"link\":\"/ecosystem/themes\"},{\"text\":\"UI Components\",\"link\":\"https://ui-libs.vercel.app/\"},{\"text\":\"Plugins Collection\",\"link\":\"https://www.vue-plugins.org/\"},{\"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://x.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\":\"Support\",\"activeMatch\":\"^/(sponsor|partners)/\",\"items\":[{\"text\":\"Sponsor\",\"link\":\"/sponsor/\"},{\"text\":\"Partners\",\"link\":\"/partners/\"}]}],\"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\":\"Watchers\",\"link\":\"/guide/essentials/watchers\"},{\"text\":\"Template Refs\",\"link\":\"/guide/essentials/template-refs\"},{\"text\":\"Components Basics\",\"link\":\"/guide/essentials/component-basics\"},{\"text\":\"Lifecycle Hooks\",\"link\":\"/guide/essentials/lifecycle\"}]},{\"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/
184attrs\"},{\"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\":\"
184<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\":\"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://de.vuejs.org\",\"text\":\"Deutsch\",\"repo\":\"https://github.com/vuejs-translations/docs-de\"},{\"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/vuejs-translations/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\":\"https://pl.vuejs.org\",\"text\":\"Polski\",\"repo\":\"https://github.com/vuejs-translations/docs-pl\"},{\"link\":\"/translations/\",\"text\":\"Help Us Translate!\",\"isTranslationsDesc\":true}],\"algolia\":{\"indexName\":\"vuejs\",\"appId\":\"ML0LEBN7FQ\",\"apiKey\":\"10e7a8b13e6aec4007343338ab134e05\",\"searchParameters\":{\"facetFilters\":[\"version:v3\"]}},\"carbonAds\":{\"code\":\"CEBDT27Y\",\"placement\":\"vuejsorg\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/vuejs/\"},{\"icon\":\"twitter\",\"link\":\"https://x.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-2026 Evan You\"}},\"locales\":{},\"scrollOffset\":[\"header\",\".VPLocalNav\"],\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
184 185 186 </body> 187</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.