CINXE.COM

<!doctype html> <html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D"> <head> <title>Vue Mastery | The best way to learn Vue.js</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="robots" content="index, follow"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5"><meta data-n-head="ssr" data-hid="fb:app_id" property="fb:app_id" content="3980905448613053"><meta data-n-head="ssr" data-hid="og:site_name" property="og:site_name" content="Vue Mastery"><meta data-n-head="ssr" data-hid="og:title" property="og:title" content="Vue Mastery"><meta data-n-head="ssr" property="og:type" content="website"><meta data-n-head="ssr" data-hid="og:image" property="og:image" content="https://www.vuemastery.com/images/facebook_social_image.png"><meta data-n-head="ssr" data-hid="og:description" property="og:description" content="Vue Mastery is the ultimate learning resource for Vue.js developers. We release weekly video tutorials and articles as well as the proud producers of the official Vue.js News. You can consume it in newsletter and podcast format at news.vuejs.org."><meta data-n-head="ssr" name="twitter:card" content="summary_large_image"><meta data-n-head="ssr" name="twitter:site" content="@vuemastery"><meta data-n-head="ssr" data-hid="twitter:title" name="twitter:title" content="Vue Mastery"><meta data-n-head="ssr" data-hid="twitter:description" name="twitter:description" content="Vue Mastery is the ultimate learning resource for Vue.js developers. We release weekly video tutorials and articles as well as the proud producers of the official Vue.js News. You can consume it in newsletter and podcast format at news.vuejs.org."><meta data-n-head="ssr" name="theme-color" content="#39B982"><meta data-n-head="ssr" name="mobile-web-app-capable" content="yes"><meta data-n-head="ssr" name="apple-mobile-web-app-title" content="Application Title"><meta data-n-head="ssr" name="apple-mobile-web-app-capable" content="yes"><meta data-n-head="ssr" name="apple-mobile-web-app-status-bar-style" content="default"><meta data-n-head="ssr" name="msapplication-navbutton-color" content="#39B982"><meta data-n-head="ssr" name="msapplication-TileColor" content="#39B982"><meta data-n-head="ssr" name="msapplication-TileImage" content="https://www.vuemastery.com/icons/mstile-144x144.png"><meta data-n-head="ssr" name="msapplication-square70x70logo" content="https://www.vuemastery.com/icons/mstile-70x70.png"><meta data-n-head="ssr" name="msapplication-square150x150logo" content="https://www.vuemastery.com/icons/mstile-150x150.png"><meta data-n-head="ssr" name="msapplication-wide310x150logo" content="https://www.vuemastery.com/icons/mstile-310x150.png"><meta data-n-head="ssr" name="msapplication-square310x310logo" content="https://www.vuemastery.com/icons/mstile-310x310.png"><meta data-n-head="ssr" name="application-name" content="Vue Mastery"><meta data-n-head="ssr" name="msapplication-tooltip" content="Vue Mastery is the ultimate learning resource for Vue.js developers. We release weekly video tutorials and articles as well as the proud producers of the official Vue.js News. You can consume it in newsletter and podcast format at news.vuejs.org."><meta data-n-head="ssr" name="msapplication-starturl" content="/"><meta data-n-head="ssr" name="msapplication-tap-highlight" content="no"><meta data-n-head="ssr" name="full-screen" content="Yes"><meta data-n-head="ssr" name="browsermode" content="application"><meta data-n-head="ssr" data-hid="charset" charset="utf-8"><meta data-n-head="ssr" data-hid="og:type" name="og:type" property="og:type" content="website"><meta data-n-head="ssr" data-hid="og:url" property="og:url" content="https://www.vuemastery.com"><meta data-n-head="ssr" data-hid="description" name="description" content="Vuejs tutorials to elevate your skills. Courses taught by Evan You and Core Vue Team Members. Start learning for free."><meta data-n-head="ssr" data-hid="keywords" name="keywords" content="vuejs, vue js, vue.js, vue.js tutorial, vuejs tutorial, vue.js tutorial, vuejs components, vuejs framework, learn vuejs, learn vue, learn vue js, nuxt, nuxtjs, nuxt js, nuxt.js, vue router, vue routing, pinia, vuex, typescript, vue course, vuejs course, vue.js course, vue js course, vite, vite.js, vitejs, vite js, vue workshop, vuejs workshop, vue js workshop, vue.js workshop, vue training, vuejs training, vue js training, vue.js training, vue conference, vuejs conference, vue.js conference, vue js conference"><meta data-n-head="ssr" data-hid="twitter:image" name="twitter:image" content="https://www.vuemastery.com/images/facebook_image.png"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://www.vuemastery.com/icons/favicon.ico"><link data-n-head="ssr" href="https://www.vuemastery.com/icons/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16"><link data-n-head="ssr" href="https://www.vuemastery.com/icons/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32"><link data-n-head="ssr" href="https://www.vuemastery.com/icons/favicon-48x48.png" rel="icon" type="image/png" sizes="48x48"><link data-n-head="ssr" href="https://www.vuemastery.com/icons/favicon-96x96.png" rel="icon" type="image/png" sizes="96x96"><link data-n-head="ssr" rel="apple-touch-icon-precomposed" sizes="57x57" href="https://www.vuemastery.com/icons/apple-touch-icon-57x57.png"><link data-n-head="ssr" rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.vuemastery.com/icons/apple-touch-icon-114x114.png"><link data-n-head="ssr" rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.vuemastery.com/icons/apple-touch-icon-72x72.png"><link data-n-head="ssr" rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.vuemastery.com/icons/apple-touch-icon-144x144.png"><link data-n-head="ssr" rel="apple-touch-icon-precomposed" sizes="60x60" href="https://www.vuemastery.com/icons/apple-touch-icon-60x60.png"><link data-n-head="ssr" rel="apple-touch-icon" sizes="96x96" href="https://www.vuemastery.com/icons/afavicon-96x96.png"><link data-n-head="ssr" rel="apple-touch-icon" sizes="120x120" href="https://www.vuemastery.com/icons/apple-touch-icon-120x120.png"><link data-n-head="ssr" rel="apple-touch-icon-precomposed" sizes="76x76" href="https://www.vuemastery.com/icons/apple-touch-icon-76x76.png"><link data-n-head="ssr" rel="apple-touch-icon-precomposed" sizes="152x152" href="https://www.vuemastery.com/icons/apple-touch-icon-152x152.png"><link data-n-head="ssr" rel="icon" type="image/png" href="https://www.vuemastery.com/icons/favicon-196x196.png" sizes="196x196"><link data-n-head="ssr" rel="icon" type="image/png" href="https://www.vuemastery.com/icons/favicon-96x96.png" sizes="96x96"><link data-n-head="ssr" rel="icon" type="image/png" href="https://www.vuemastery.com/icons/favicon-32x32.png" sizes="32x32"><link data-n-head="ssr" rel="icon" type="image/png" href="https://www.vuemastery.com/icons/favicon-16x16.png" sizes="16x16"><link data-n-head="ssr" rel="icon" type="image/png" href="https://www.vuemastery.com/icons/favicon-128.png" sizes="128x128"><link data-n-head="ssr" rel="stylesheet" type="text/css" href="/normalize.css"><link data-n-head="ssr" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,700|Inconsolata&display=swap" rel="preload" defer as="font"><link data-n-head="ssr" href="/styles/font-awesome.css" rel="stylesheet" defer as="style"><link data-n-head="ssr" href="/manifest.json" rel="manifest"><link data-n-head="ssr" data-hid="shortcut-icon" rel="shortcut icon" href="/favicon.ico"><link data-n-head="ssr" rel="manifest" href="/_nuxt/manifest.160d9525.json" data-hid="manifest"><link data-n-head="ssr" rel="preload" href="/images/homepage/hero_platform.webp" as="image"><link data-n-head="ssr" rel="preload" href="/images/homepage/hero_courses.png" as="image"><link data-n-head="ssr" rel="prefetch" href="/images/courses/studyroom-standard.webp"><link data-n-head="ssr" rel="prefetch" href="/images/courses/studyroom-bg-standard.webp"><script data-n-head="ssr" type="text/javascript" defer src="https://extend.vimeocdn.com/ga/72160148.js" rel="dns-prefetch"></script><script data-n-head="ssr" type="text/javascript" defer src="https://js.chargebee.com/v2/chargebee.js" rel="dns-prefetch"></script><script data-n-head="ssr">!function(e,t,n,s,c,o){e.twq||((s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments)}).version="1.1",s.queue=[],(c=t.createElement(n)).async=!0,c.src="https://static.ads-twitter.com/uwt.js",(o=t.getElementsByTagName(n)[0]).parentNode.insertBefore(c,o))}(window,document,"script"),twq("config","obw0r")</script><script data-n-head="ssr" data-hid="gtm-script">window._gtm_init||(window._gtm_init=1,function(t,e,n,a,o){t[n]=1==t[n]||"yes"==e[n]||1==e[n]||1==e.msDoNotTrack||t[a]&&t[a][o]&&t[a][o]()?1:0}(window,navigator,"doNotTrack","external","msTrackingProtectionEnabled"),function(a,o,i,r,g){a[g]={},a._gtm_inject=function(t){var e,n;a.doNotTrack||a[g][t]||(a[g][t]=1,a[r]=a[r]||[],a[r].push({"gtm.start":(new Date).getTime(),event:"gtm.js"}),e=o.getElementsByTagName(i)[0],(n=o.createElement(i)).async=!0,n.src="https://www.googletagmanager.com/gtm.js?id="+t,e.parentNode.insertBefore(n,e))}}(window,document,"script","dataLayer","_gtm_ids"))</script><script data-n-head="ssr" type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","url":"https://www.vuemastery.com","potentialAction":[{"@type":"SearchAction","target":"https://www.vuemastery.com/search?q={search_term_string}","query-input":"required name=search_term_string"}]}</script><style data-vue-ssr-id="0f307ae8:0 f0f3df94:0 112bbc14:0 265e7b8d:0 27b002dc:0 49bcb79e:0 02b5034b:0 5d773986:0 8fe11c60:0 7ba4d651:0 07349f9b:0 51bb1aec:0 2858109c:0 63c28462:0 4b6e9ac4:0 b40ab6ba:0 1a6310d1:0 0d656662:0 e0f42258:0 07734000:0 4b214b82:0 c2675ffe:0 a5cb557a:0 503978d4:0 1975dcf8:0 ad11e912:0 ba9cf61c:0 d15b9432:0 5ba11fa0:0 d3e0176e:0 07b4fd70:0 70b4b32a:0 b4fc7a32:0 1c05dac8:0 34995c91:0">html{text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body{font-family:"Source Sans Pro",sans-serif;font-size:14px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:"Source Sans Pro",sans-serif;font-weight:700;margin-top:0;padding-top:.5em;margin-bottom:.3em}.h1,h1{font-size:32px}.h2,h2{font-size:28px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:12px}p{line-height:1.5}@media screen and (min-width:40em){body{font-size:18px}.h1,h1{font-size:3.25em}.h2,h2{font-size:2.1em}.h3,h3{font-size:1.75em}.h4,h4{font-size:1.25em}.h5,h5{font-size:1em}.h6,h6{font-size:.75em}p{line-height:1.5}}button{outline:0}button[disabled]{opacity:.7}.button{display:inline-flex;height:44px;margin:.25em 0;padding:0 30px;color:#fff;text-decoration:none;align-items:center;justify-content:center;line-height:44px;border:none;border-radius:30px;cursor:pointer;transition:all .55s cubic-bezier(.19,1,.22,1);overflow:hidden;position:relative;white-space:nowrap;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}.button:after,.button:before{background:linear-gradient(to top right,transparent,#fff);content:"";height:150px;left:-175px;opacity:.1;position:absolute;top:-50px;transform:rotate(35deg);width:100px}.button:disabled{pointer-events:none}.button:focus{outline:0}.button.primary{background:linear-gradient(to top right,#41b782,#86d169)}.button.primary.border{color:#39b982;border-color:#39b982}.button.secondary{background:linear-gradient(to top right,#122549,#203762)}.button.secondary.border{color:#0a2b4e;border-color:#0a2b4e}.button.high-contrast,.button.tertiary{background:linear-gradient(to top right,#3d2c61,#835ec2)}.button.danger{background:linear-gradient(to top right,#eb4641,#f06372)}.button.danger.border{color:#eb4641;border-color:#eb4641}.button.inverted{background:#fff;color:#0a2b4e}.button.inverted.border{color:#fff;border-color:#fff}.button.inverted.border:hover{color:#0a2b4e}.button.border{background:0 0;border:2px solid #0a2b4e;line-height:40px}.button.modern{border-color:#028ebb;border-top:1px solid rgba(3,143,188,.16);border-bottom:1px solid rgba(46,162,200,.29);padding:0 20px}.button.modern.active{background:rgba(2,142,187,.18);box-shadow:inset 0 9px 21px rgba(19,183,166,.1),0 0 2px rgba(60,196,180,.6);border-color:#028ebb;border-top:1px solid rgba(3,143,188,.722);text-shadow:0 0 3px #0a1121;border-bottom:1px solid rgba(3,143,188,.722)}.button.modern.-plain{padding:28px 85px;background:rgba(5,37,59,.21)}.button.modern.-plain:before{animation:left 10s infinite}.button.modern.-plain:hover{transform:scale(1.1)}.button.-small{height:44px;padding:0 15px}@media screen and (min-width:40em){.button.-small{line-height:44px}}.button.-small.-has-icon{line-height:inherit}.button.-full{white-space:nowrap;width:100%}.button.-has-icon,.button.-only-icon{display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.button.-has-icon i[class*=fa],.button.-has-icon i[class*=fab],.button.-only-icon i[class*=fa],.button.-only-icon i[class*=fab]{margin-right:10px}.button.-has-icon:after,.button.-only-icon:after{content:none}.button.-has-icon i,.button.-only-icon i{transition:transform .5s cubic-bezier(.19,1,.22,1)}.button.link{background:0 0;border:none;padding:0;color:#0a2b4e}.button.link.inverted{color:#fff}.button .icon{margin-right:8px}.control-group{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap}.control-group.-spaced{justify-content:space-evenly}.control-group.-separate{justify-content:space-between}@media screen and (min-width:40em){.button{height:54px;margin:.5em 0;line-height:54px}.button.border{line-height:50px}.button.-small{height:44px;padding:0 30px;line-height:44px}.button.-small.border{line-height:40px}}.button.active,.button:hover,a:hover .button{text-decoration:none}.button.active:after,.button:hover:after,a:hover .button:after{left:120%;transition:left 1.5s cubic-bezier(.19,1,.22,1)}.button.active.primary,.button:hover.primary,a:hover .button.primary{background:linear-gradient(to bottom right,#41b782,#86d169)}.button.active.secondary,.button:hover.secondary,a:hover .button.secondary{background:linear-gradient(to bottom right,#122549,#203762)}.button.active.danger,.button:hover.danger,a:hover .button.danger{background:linear-gradient(to bottom right,#eb4641,#f06372)}.button.active.inverted,.button:hover.inverted,a:hover .button.inverted{background:#fff;color:#0a2b4e}.button.active.border,.button:hover.border,a:hover .button.border{border-color:transparent;color:#fff}.button.active.modern,.button:hover.modern,a:hover .button.modern{box-shadow:inset 0 9px 21px rgba(19,183,166,.1),0 0 2px rgba(60,196,180,.6);border-left-color:#028ebb;border-right-color:#028ebb;border-top:1px solid rgba(3,143,188,.722);border-bottom:1px solid rgba(3,143,188,.722)}.button.active.-only-icon,.button:hover.-only-icon,a:hover .button.-only-icon{background:0 0;text-decoration:none}.button.active.-only-icon i,.button:hover.-only-icon i,a:hover .button.-only-icon i{transform:scale(.9)}@keyframes left{0%{top:-40px;left:-175px}40%{top:-40px;left:-175px}50%{top:-40px;left:120%}55%{top:-200px;left:-175px}to{top:-40px;left:-175px}}.underline{position:relative;overflow:hidden;padding-bottom:2px;margin-bottom:-2px;cursor:pointer;color:#39b982}.underline.-has-icon{display:inline-flex;align-items:center;justify-content:center;overflow:visible}.underline.-has-icon i[class*=fa],.underline.-has-icon i[class*=fab]{margin-right:10px}.underline:before{position:absolute;z-index:-1;content:"";left:0;bottom:0;width:100%;height:2px;background:linear-gradient(to top right,#41b782,#86d169);transition:transform .5s cubic-bezier(.19,1,.22,1);transform:translateX(-100%)}.underline:hover:before{z-index:0;transform:translateX(0)}.underline:hover{text-decoration:none}a:hover .underline:before{transform:translateX(0)}.input{width:100%;padding:0 27px;margin:5px 0;height:54px;line-height:54px;border:2px solid #bbb;border-radius:30px}.input:focus{width:100%;outline:0}.input.-small{height:44px;line-height:44px}.input.primary.-hollow{color:#39b982;border-color:#39b982}.input.primary.-hollow::-moz-placeholder{color:#39b982}.input.primary.-hollow::placeholder{color:#39b982}.input.-hollow{background:0 0;border-width:2px;border-style:solid}.input.-is-info{color:#a8d7dd;border-color:#a8d7dd}.input.-is-info::-moz-placeholder{color:#a8d7dd}.input.-is-info::placeholder{color:#a8d7dd}.input.-is-success{color:#39b982;border-color:#39b982}.input.-is-success::-moz-placeholder{color:#39b982}.input.-is-success::placeholder{color:#39b982}.input.-is-warning{color:#f3e43c;border-color:#f3e43c}.input.-is-warning::-moz-placeholder{color:#f3e43c}.input.-is-warning::placeholder{color:#f3e43c}.input.-is-error{color:#e04848;border-color:#e04848}.input.-is-error::-moz-placeholder{color:#e04848}.input.-is-error::placeholder{color:#e04848}.textarea{width:100%;padding:27px;margin:5px 0;border:2px solid #bbb;border-radius:30px}.textarea:focus{width:100%;outline:0}.upload{display:inline-block;position:relative;overflow:hidden}.upload input[type=file]{font-size:100px;position:absolute;left:0;top:0;opacity:0;cursor:pointer}.checkbox{display:flex;justify-content:flex-start;align-items:center;font-size:15.75px}.checkbox .mark,.checkbox input[type=checkbox]{margin-top:-2px;margin-right:10px}.checkmark{display:block;position:relative;padding-left:22px;margin-bottom:22px;font-size:22px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.checkmark .check{position:absolute;top:0;left:0;height:22px;width:22px;border:2px solid #39b982;background-color:transparent;border-radius:4px}.checkmark .check:after{content:"";position:absolute;display:none;left:6px;top:1px;width:5px;height:10px;border:solid #39b982;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkmark input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.checkmark input[type=checkbox]:checked~.check{border-color:#39b982;background-color:#fff}.checkmark input[type=checkbox]:checked~.check:after{display:block}.checkmark:hover input~.check{background-color:#fff}.switch{display:flex;margin-right:10px;margin-left:10px}.switch label{display:block;position:relative;width:66px;height:33px;background:#aaa;border-radius:33px;text-indent:-9999px;cursor:pointer}.switch label:after{content:"";position:absolute;top:4px;left:4px;width:25px;height:25px;background:#fff;border-radius:25px;transition:.3s}.switch label:active:after{width:33px}.switch input[type=checkbox]{height:0;width:0;visibility:hidden}.switch input[type=checkbox]:checked+label{background:#39b982}.switch input[type=checkbox]:checked+label:after{left:calc(100% - 5px);transform:translateX(-100%)}.help-text{display:block;position:relative;margin:0 0 10px 27px;font-size:15.75px}.help-text.-is-info{color:#a8d7dd}.help-text.-is-success{color:#39b982}.help-text.-is-warning{color:#f3e43c}.help-text.-is-error{color:#e04848}.form .label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.form-title{padding:20px 5%}.form-group{display:flex;flex-direction:column;margin:10px 0}.form-group.-center{align-items:center}.form-group.-inline{position:relative}.form-group.-inline .button{position:absolute;top:10px;right:5%;margin:0;padding-right:10px}.form-error.help-text{padding-top:10px;padding-bottom:10px}.-is-error{color:#e04848}.callout{padding:.5em 1em 0;border-radius:10px}.callout.-info{background:#f2f9fa;border:1px solid #a8d7dd;color:#214e54}.callout.-success{background:#e0f6ec;border:1px solid #39b982;color:#113727}.callout.-warning{background:#fdfbe2;border:1px solid #f3e43c;color:#564f05}.callout.-error{background:#fae4e4;border:1px solid #e04848;color:#4c0d0d}.card{display:flex;background:#fff;box-shadow:0 1px 4px 0 rgba(0,0,0,.3);border-radius:12px;transition:box-shadow .5s cubic-bezier(.19,1,.22,1)}.card .title{transition:color .2s ease-in}.card-body{width:100%;padding:20px}a.card:hover{box-shadow:0 2px 7px 0 rgba(0,0,0,.3)}a.card:hover .title{color:#39b982}.media-block{display:grid;grid-column-gap:4%;grid-row-gap:22.5px;align-items:center;grid-template-columns:1fr;grid-template-areas:"media" "body"}@media screen and (min-width:40em){.media-block{grid-template-columns:auto 1fr;grid-template-areas:"media body";grid-row-gap:45px}}.media-block .media{grid-area:media;display:flex;justify-content:center;align-items:center}.media-block .media.fake{min-height:125px}.media-block .media.fake.-small{width:120px}.media-block .media.fake.-large{width:200px}.media-block .media img{-o-object-fit:contain;object-fit:contain;max-width:100px}@media screen and (min-width:40em){.media-block .media img{max-width:200px}}@media screen and (min-width:40em){.media-block .media img.-small{width:120px}.media-block .media img.-large{width:200px}}.media-block .media.-video{position:relative}.media-block .media.-video .icon{position:absolute;left:50%;top:50%;color:#fff;filter:drop-shadow(0 2px 3px #000);transform:translate(-50%,-50%);transition:all .3s;transform-origin:0 0}.media-block .media.-video:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.4);transition:background .3s ease}.media-block .title-small{transition:color .2s ease-in}.media-block .body{grid-area:body;text-align:center}@media screen and (min-width:40em){.media-block .body{max-width:400px;min-width:calc(100% - 200px);margin:0;text-align:left}.media-block .body .title{font-size:27px}}.media-block .body.fake{min-height:100px}.media-block .body .content{margin:0}.media-block .body .meta{display:flex;align-items:center;justify-content:center;color:#222;margin-top:10px;font-weight:200}@media screen and (min-width:40em){.media-block .body .meta{justify-content:flex-start}}.media-block .body .meta .-has-icon{display:flex;align-items:center}.media-block .body .meta .-has-icon i{margin-right:5px}.grid .media-block .body{text-align:center;margin:0 auto}.media-block:hover a,a:hover .media-block{text-decoration:none}.media-block:hover a .title-small,a:hover .media-block .title-small{color:#39b982}.media-block:hover a .-video:before,a:hover .media-block .-video:before{background:0 0}.media-block:hover a .-video .icon,a:hover .media-block .-video .icon{transform:scale(1.1) translate(-50%,-50%);filter:drop-shadow(0 2px 3px #000)}.v--modal{border-radius:10px!important}@media screen and (max-width:39.9375em){.v--modal{margin-bottom:100px!important;width:90%!important;left:5%!important;top:40px!important}}.v--modal .form-title{display:flex;align-items:center;background-color:#0a2b4e;color:#fff;margin-bottom:20px}.v--modal .form-title button{margin:0;padding:0;border:none;background:0 0;color:#fff;cursor:pointer}.v--modal .form{color:#222}.v--modal .form>div{padding-left:5%;padding-right:5%}.v--modal .form-footer{background-color:#ececec;margin-top:10px}.paginate{display:flex}.paginate .next,.paginate .prev{display:flex;align-items:center;width:100%;height:80px;width:50%;padding:0 2em;border:none;color:#fff;font-size:18px;font-weight:600;text-transform:capitalize;cursor:pointer;transition:padding .5s cubic-bezier(.19,1,.22,1)}.paginate .next[disabled],.paginate .prev[disabled]{background:rgba(0,0,0,.1);color:#ccc;cursor:not-allowed}.paginate .next[disabled]:hover i.fa,.paginate .prev[disabled]:hover i.fa{transform:translateX(0)}.paginate .next i,.paginate .prev i{font-size:24px;transition:transform .5s cubic-bezier(.19,1,.22,1)}.paginate .next{background:linear-gradient(90deg,#41b782,#86d169);text-align:left}.paginate .next i{margin-left:15px}.paginate .next:hover{padding-left:2.2em}.paginate .next:hover i{transform:translateX(20px)}.paginate .prev{background:linear-gradient(90deg,#122549,#203762);text-align:right;justify-content:flex-end}.paginate .prev:hover{paddin-right:2.2em}.paginate .prev i{margin-right:15px}.paginate .prev:hover i{transform:translateX(-20px)}@media screen and (min-width:40em){.paginate .next,.paginate .prev{height:118px;font-size:32px}.paginate .next i,.paginate .prev i{font-size:50px}}.empty{display:flex;width:100%;min-height:300px;justify-content:center;align-items:center;text-align:center;background:rgba(0,0,0,.03);border-radius:12px;padding:20px}.empty .empty-title{font-weight:600;color:#777}.empty-media-list li{margin-bottom:20px}.loading{display:inline-block;width:100%;left:0;top:0;height:100%;position:absolute;z-index:4}.loading:after,.loading:before{content:" ";display:block}.loading:before{background:rgba(0,0,0,.1);width:100%;height:100%}.loading:after{position:absolute;left:calc(50% - 40px);top:calc(50% - 40px);width:80px;height:80px;margin:8px;border-radius:50%;border-color:#39b982 transparent;border-style:solid;border-width:6px;animation:loading-circle 1.2s linear infinite}@keyframes loading-circle{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.ribbon{position:absolute;right:-6px;top:-7px;z-index:1;overflow:hidden;width:146px;height:141px;text-align:center}.ribbon span{font-size:14px;font-weight:700;color:#fff;line-height:30px;transform:rotate(45deg);width:188px;display:block;background:#835ec2;background:linear-gradient(#8269be,#835ec2);box-shadow:0 1px 4px 0 rgba(0,0,0,.3);position:absolute;top:43px;right:-36px}.ribbon span:after,.ribbon span:before{content:"";position:absolute;top:100%;z-index:-1;border-bottom:3px solid transparent;border-top:3px solid #835ec2}.ribbon span:before{left:0;border-left:3px solid #835ec2;border-right:3px solid transparent}.ribbon span:after{right:0;border-left:3px solid transparent;border-right:3px solid #835ec2}.tab-switch{position:relative;overflow:hidden;display:inline-flex;align-items:center;height:3rem;margin:0 auto 3rem;border-radius:4rem;box-shadow:0 1px 1px 0 rgba(0,0,0,.3);font-weight:600;background:#ececec;cursor:pointer}.tab-switch:before{content:"";position:absolute;left:-50%;top:-100%;width:106%;height:300%;border-radius:50%;box-shadow:1px 0 1px 0 rgba(0,0,0,.3);background:linear-gradient(to top right,#0a2b4e,#164373);transition:.25s}.tab-switch .switch-item:first-child{color:#fff}.tab-switch.switch-active:before{left:53%;box-shadow:-1px 0 1px 0 rgba(0,0,0,.3);background:#835ec2}.tab-switch.switch-active .switch-item:nth-child(2){color:#fff}.tab-switch.switch-active .switch-item:first-child{color:#555}.tab-switch.switch-alternative:before{background:#39b982}.switch-item{position:relative;display:flex;justify-content:center;align-items:center;height:100%;padding:2rem;color:#555;z-index:2;transition:.1s}.page-enter-active,.page-leave-active{transition:opacity .125s,transform .125s}.page-enter{opacity:0;transform:translateY(-20px)}.page-leave-to{opacity:0;transform:translateY(20px)}.course-enter-active,.course-leave-active{transition:none .1s}.course-enter-active .lesson-video,.course-enter-active .lessons-list,.course-leave-active .lesson-video,.course-leave-active .lessons-list{transition:opacity .1s}.course-enter .lesson-video,.course-enter .lessons-list,.course-leave-to .lesson-video,.course-leave-to .lessons-list{opacity:0}.settings-enter-active,.settings-leave-active{transition:none .1s}.settings-enter-active .account-content,.settings-leave-active .account-content{transition:opacity .1s}.settings-enter .account-wrapper,.settings-leave-to .account-content{opacity:0}img{width:100%}p>img{max-width:900px}.img-circle{border-radius:50%}.img-100{width:100px}.img-200{width:200px}.img-300{width:300px}.img-400{width:400px}.img-500{width:500px}.img-600{width:600px}.img-700{width:700px}.img-800{width:800px}.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;touch-action:pan-y!important}.video-wrapper embed,.video-wrapper iframe,.video-wrapper object{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:pan-y!important}.vm-toasted,.vm-toasted-subscribe{padding:10px 20px!important;color:#222!important;line-height:1.4!important;background:#fff!important;border-radius:6px!important;box-shadow:0 1px 4px 0 rgba(0,0,0,.3)!important}.vm-toasted,.vm-toasted .action,.vm-toasted-subscribe,.vm-toasted-subscribe .action{font-family:"Source Sans Pro",sans-serif!important;font-size:18px!important;font-weight:400!important}.vm-toasted .action,.vm-toasted-subscribe .action{color:#39b982!important;text-decoration:none!important}.vm-toasted-subscribe .action{padding:0 30px!important;color:#fff!important;border:none!important;border-radius:30px!important;overflow:hidden!important;position:relative!important;line-height:44px!important;height:44px!important;background:linear-gradient(to top right,#41b782,#86d169)!important;transition:all .55s cubic-bezier(.19,1,.22,1)!important;-webkit-tap-highlight-color:transparent!important;-webkit-tap-highlight-color:transparent!important}.vm-toasted-subscribe .action:after{background:linear-gradient(to top right,transparent,#fff);content:"";height:150px;left:-175px;opacity:.1;position:absolute;top:-50px;transform:rotate(35deg);width:100px}.toasted-container .toasted.toasted-primary.success{background:linear-gradient(to top right,#41b782,#86d169)}.toasted-container .toasted.toasted-primary.error,.toasted-container .toasted.toasted-primary.info,.toasted-container .toasted.toasted-primary.success{display:flex;flex-direction:row;align-items:center;font-weight:700;justify-content:space-between;padding:.5rem 1.5rem;border-radius:1rem;text-transform:uppercase}.toasted-container .toasted.toasted-primary.error .action,.toasted-container .toasted.toasted-primary.info .action,.toasted-container .toasted.toasted-primary.success .action{font-weight:700;color:#fff}.toasted-container .toasted.toasted-primary.error .action.fa-sync,.toasted-container .toasted.toasted-primary.info .action.fa-sync,.toasted-container .toasted.toasted-primary.success .action.fa-sync{transform-origin:center;animation:rotate 1s linear infinite}.toasted-container .toasted.toasted-primary.error .action:hover,.toasted-container .toasted.toasted-primary.info .action:hover,.toasted-container .toasted.toasted-primary.success .action:hover{text-decoration:none}@media screen and (max-width:1000px){.toasted-container .toasted{flex-direction:column;min-width:350px;text-align:center}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.badge{display:inline-flex;align-items:center;justify-content:center;font-size:.6em;height:24px;line-height:16px;padding:0 10px;white-space:nowrap;font-weight:400;border-radius:30px;text-transform:uppercase;color:#fff}.badge.primary{background:#39b982}.badge.secondary{background:#0a2b4e}.badge.tertiary{background:#835ec2}.badge.-inverted{background:#fff}.badge.-inverted.primary{color:#39b982}.badge.-inverted.secondary{color:#0a2b4e}.pricing-layout .card{color:#0a2b4e;cursor:pointer;transition:transform .2s ease-in}.pricing-layout .card:hover{text-decoration:none;transform:scale(1.03)}.pricing-layout .card .card-body{display:flex;flex-direction:column}.pricing-layout .card h3{padding-top:0}.pricing-layout .card .button{margin-bottom:0}.pricing-layout .card.side-card{margin:auto;width:100%}@media screen and (min-width:60em){.pricing-layout .card.side-card{max-width:330px}}.pricing-layout .card.side-card .money{margin-bottom:-1.8rem;margin-top:.9rem}.pricing-layout .benefit{align-items:flex-start;margin-bottom:10px;margin-top:10px;text-align:left}.pricing-layout .benefit i{margin-right:10px;font-size:30px;max-width:30px}.pricing-layout .special-benefit{display:block;max-width:256px;line-height:22px;margin-top:-4px}.pricing-layout .money{display:flex;justify-content:center}.pricing-layout .symbol{font-weight:700;color:#39b982;font-size:35px;padding-top:10px;margin-left:-20px}.pricing-layout .symbol span{color:#fff}.pricing-layout .trunc{color:#0a2b4e;font-weight:700;font-size:100px;line-height:1}.pricing-layout .decimal{align-self:center;margin-right:-2.6rem;margin-top:-.3rem;font-weight:700;font-size:2rem;animation:appear 1s 1s both}.pricing-layout .fa-unlock{margin-left:3px;margin-top:-6px}.pricing-layout .center-card{padding-bottom:1rem;position:relative}.pricing-layout .center-card .text-center{margin-top:1rem;margin-bottom:1rem}.pricing-layout .center-card .total-price{font-size:24px;text-align:center;margin:0 auto -1.5rem}.pricing-layout .center-card .normal-price{text-decoration:line-through;padding-right:5px;color:#bfbfbf}.pricing-layout .center-card .discount-price{font-weight:600}.pricing-layout .center-card .billed-yearly{display:block;text-transform:uppercase;color:#39b982;font-size:10px;line-height:16px;font-weight:700}.pricing-layout .benefits-list{display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;padding:2rem 0;margin:0 auto}.pricing-layout .benefit{font-size:16px;display:flex;align-items:center}.pricing-layout .benefit:first-child{margin-top:25px}.pricing-layout .benefit:after,.pricing-layout .benefit:before{content:"";background:#082a4e;width:10px;height:1px;position:absolute;left:0;top:50%;opacity:0}.pricing-layout .benefit:after{right:0;left:auto}.pricing-layout .pricing-structure{margin-top:7rem;align-items:center}.pricing-layout .permonth{font-weight:700;color:#39b982;justify-self:flex-end;align-self:flex-end;margin-bottom:1rem;width:0;overflow:visible;white-space:nowrap}.pricing-layout .money{position:relative}.pricing-layout .tag{text-align:center;margin-bottom:-2rem;margin-top:2.5rem;font-size:14px;font-weight:700;border-radius:5px;background:linear-gradient(to top right,#41b782,#86d169);color:#fff;align-self:center;padding:2px 1rem;transition:background .3s ease-out}.pricing-layout .tag.superDiscount{background:linear-gradient(#9c83d8,#835ec2);animation:tada 1s both}.pricing-layout i.fa-check{font-size:16px;color:#39b982}.pricing-layout .team-wrapper{display:flex;min-height:38.6rem;justify-content:center;align-items:center;padding-bottom:5rem;transition:transform .2s ease-in;flex-direction:column}@media screen and (min-width:40em){.pricing-layout .team-wrapper{flex-direction:row}}.pricing-layout .team-wrapper .card:hover{transform:scale(1)}.pricing-layout .team-wrapper:hover{transform:scale(1.03)}.pricing-layout .team-card{width:26rem;max-width:92vw}@media screen and (min-width:40em){.pricing-layout .team-card{max-width:43vw}}.pricing-layout .pourcent-off{display:flex;flex-direction:column;justify-content:flex-end;font-size:24px;font-weight:700;padding-bottom:.6rem;padding-left:.5rem;line-height:1.9rem}.pricing-layout .pourcent{font-size:2.5rem;font-weight:700}.pricing-layout .off{color:#39b982}.pricing-layout .team-description{flex-direction:column;width:23rem;position:relative;padding:0 2rem 2rem;border-radius:0 0 12px 12px;max-width:80vw}@media screen and (min-width:40em){.pricing-layout .team-description{width:43rem;border-radius:0 12px 12px 0;padding:0 1rem 2rem 2rem;max-width:38vw}}@media screen and (min-width:82em){.pricing-layout .team-description{padding:0 3rem 2rem 4rem}}.pricing-layout .team-description:before{content:"";position:absolute;top:-1rem;left:0;width:100%;height:2rem;background:linear-gradient(180deg,#fff 40%,#f3f3f3 58%,#fff)}@media screen and (min-width:40em){.pricing-layout .team-description:before{content:"";position:absolute;left:-1rem;top:0;width:3rem;height:100%;background:linear-gradient(90deg,#fff 25%,#f3f3f3 39%,#fff 90%)}}.pricing-layout .team-description .benefits-list{margin:0;padding-bottom:0}.pricing-layout .refresh .monthDiscounted,.pricing-layout .refresh .yearDiscounted{animation:refreshing 2s infinite both}@keyframes appear{0%{opacity:0}to{opacity:1}}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0)}}.l-dashboard .l-search{top:5.5rem!important}@media screen and (min-width:57em){.l-dashboard .l-search{top:.5rem!important;right:2.5rem!important;display:block!important}}.l-dashboard .announcement-bar{min-height:0!important}.l-dashboard .hamburger{height:1.5rem!important}.l-dashboard .hamburger:after,.l-dashboard .hamburger:before{background-color:#fff!important}@media screen and (min-width:40em){.l-dashboard .l-header .header{position:relative!important}}.l-dashboard .l-header .navbar{height:100%!important;opacity:1!important;position:relative;background:0 0!important;left:1.5rem!important;flex-direction:row;justify-content:flex-start}.l-dashboard .l-header .navbar *{pointer-events:auto!important}@media screen and (min-width:40em){.l-dashboard .l-header .navbar{left:0!important}}.l-dashboard .l-header .navbar-secondary{display:none!important}.l-dashboard .l-header .navbar-main{flex-direction:row!important;align-items:center!important;grid-gap:25px!important;gap:25px!important}.l-dashboard .l-header .navbar-item{color:#fff!important;opacity:1!important;margin-bottom:0!important;margin-right:0!important}.l-dashboard .l-header .search-link{display:none}@media screen and (min-width:40em){.l-dashboard .hamburger{display:none!important}}.l-dashboard .course-playlist-container{margin-top:0!important}.l-dashboard .playlist-wrapper-slider{max-width:calc(100vw - .7rem)!important}.l-dashboard .playlist-wrapper-slider.grid:after{background:0 0!important}@media screen and (min-width:40em){.l-dashboard .playlist-wrapper-slider{max-width:calc(100vw - 5.7rem)!important}}.l-dashboard .articles .playlist-wrapper-slider,.l-dashboard .conferences .playlist-wrapper-slider{flex-wrap:wrap}.l-dashboard .slider-title{padding-top:0!important}.l-dashboard .slider-title h1{font-size:2rem!important}.l-dashboard .slider-title .h6{padding-top:.8rem!important}.l-dashboard .tab-switch{top:0!important}.l-dashboard .slider-controler{top:.5rem!important}.l-dashboard .c-cheatsheet .slider-controler{top:-3rem!important}.l-dashboard .section-content-preview{margin-top:2rem!important}.l-dashboard .playlist-wrapper{margin-top:2em!important;padding-top:1rem}.l-dashboard .post-wrapper:before{display:none}@media screen and (min-width:78em){.l-dashboard .navbar-wrapper .search-link{display:none!important}}@media screen and (max-width:39.9375em){.l-dashboard{grid-template-rows:0 4rem 1fr auto!important}.l-dashboard .l-banner{position:absolute!important;z-index:4!important;height:4rem!important;left:4rem!important;right:4rem!important;width:auto!important}.l-dashboard .l-banner .button{display:none!important}.l-dashboard .navbar-logo{width:4rem}.l-dashboard .navbar-item:hover{background-color:transparent!important}.l-dashboard .l-sidenav{background:#091221;width:100%!important;position:absolute!important;z-index:3!important;height:4rem!important;transition:all .3s ease-in!important}.l-dashboard.open-nav .l-sidenav{width:100%!important;height:100%!important}.l-dashboard.open-nav.l-subscriber .navbar-logo{width:100%}.l-dashboard .mobile-only{display:block!important;margin-top:2rem}.l-dashboard .lesson-header{margin-top:0!important;padding-top:0!important}.l-dashboard .homepage{margin-top:0!important}.l-dashboard .homepage .playlist{margin-top:-10rem!important}}.l-dashboard .lesson-header .media{width:60px!important}.l-dashboard .lesson-header .title{font-size:2rem!important}.l-dashboard .promotion-container .inner-wrapper{margin-left:0!important;width:100%!important}.l-dashboard .promotion-container .inner-wrapper>.content{margin-left:0!important}body,html{background:linear-gradient(272deg,#001b38,#00213e)}*{box-sizing:border-box}a{text-decoration:none;color:#39b982;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}a:hover{text-decoration:underline}a.-inverted{color:#fff}ul{list-style-type:none;padding:0;margin:0}ul li{margin-bottom:10px}.text-center{text-align:center}hr{height:1px;border:0;background-color:#e6e8eb}code{font-family:Inconsolata,monospace;font-size:18px;background:#f7f9fa;border:1px solid #e6e8eb;padding:0 4px 2px}pre{background:#1e1e1e;padding:10px;border-radius:6px;white-space:pre-wrap}pre>code{background:0 0;border:none}ul{padding:10px 20px;margin:0 0 0 20px;list-style-type:disc}.list-unstyled{padding:0;margin:0;list-style-type:none}.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[v-cloak]>*{display:none}[v-cloak]:before{content:"loading…"}.truncate{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.banner{background-size:cover;background-position:50%;background-repeat:no-repeat}.section{padding:45px 4%}.fake{background-color:hsla(0,0%,86.3%,.2);width:100%}.fake.lesson-header{height:116px}.fake .player{min-width:100%!important;max-width:100%}.wrapper{display:grid;width:100%;padding:0 4%}@media screen and (min-width:78em){.wrapper{margin:0 auto;padding:0 4rem}}.-flash{border-radius:6px;background:#faf7a1;box-shadow:0 0 6px 6px #faf7a1;animation:flashfade 1s linear;animation-iteration-count:1}blockquote{padding:.5rem 2rem;border-left:4px solid #ccc;background:#f9f9f9}@media screen and (max-width:39.9375em){blockquote{margin-left:0;margin-right:0;padding-left:1rem;padding-right:1rem;border-left:4px solid #ccc;background:#f9f9f9}}@keyframes flashfade{0%{background:#faf7a1;box-shadow:0 0 6px 6px #faf7a1}60%{background:#faf7a1;box-shadow:0 0 6px 6px #faf7a1}to{background:rgba(250,247,161,0);box-shadow:0 0 6px 6px rgba(250,247,161,0)}}.hljs{display:block;overflow-x:auto;padding:.5em;background:#1e1e1e;color:#dcdcdc}.hljs-keyword,.hljs-link,.hljs-literal,.hljs-name,.hljs-symbol{color:#569cd6}.hljs-link{text-decoration:underline}.hljs-built_in,.hljs-type{color:#4ec9b0}.hljs-class,.hljs-number{color:#b8d7a3}.hljs-meta-string,.hljs-string{color:#d69d85}.hljs-regexp,.hljs-template-tag{color:#9a5334}.hljs-formula,.hljs-function,.hljs-params,.hljs-subst,.hljs-title{color:#dcdcdc}.hljs-comment,.hljs-quote{color:#57a64a;font-style:italic}.hljs-doctag{color:#608b4e}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:#9b9b9b}.hljs-template-variable,.hljs-variable{color:#bd63c5}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:#9cdcfe}.hljs-section{color:gold}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-bullet,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-selector-tag{color:#d7ba7d}.hljs-addition{background-color:#144212}.hljs-addition,.hljs-deletion{display:inline-block;width:100%}.hljs-deletion{background-color:#600}.cookieControl__Modal-enter-active,.cookieControl__Modal-leave-active{transition:opacity .25s}.cookieControl__Modal-enter,.cookieControl__Modal-leave-to{opacity:0}.cookieControl__Bar--center{top:50%;left:50%;transform:translate(-50%,-50%)}.cookieControl__Bar--bottom-full-enter-active,.cookieControl__Bar--bottom-full-leave-active,.cookieControl__Bar--bottom-left-enter-active,.cookieControl__Bar--bottom-left-leave-active,.cookieControl__Bar--bottom-right-enter-active,.cookieControl__Bar--bottom-right-leave-active,.cookieControl__Bar--center-enter-active,.cookieControl__Bar--center-leave-active,.cookieControl__Bar--top-full-enter-active,.cookieControl__Bar--top-full-leave-active,.cookieControl__Bar--top-left-enter-active,.cookieControl__Bar--top-left-leave-active,.cookieControl__Bar--top-right-enter-active,.cookieControl__Bar--top-right-leave-active{transition:transform .25s}.cookieControl__Bar--top-full-enter,.cookieControl__Bar--top-full-leave-to,.cookieControl__Bar--top-left-enter,.cookieControl__Bar--top-left-leave-to,.cookieControl__Bar--top-right-enter,.cookieControl__Bar--top-right-leave-to{transform:translateY(-100%)}.cookieControl__Bar--bottom-full-enter,.cookieControl__Bar--bottom-full-leave-to,.cookieControl__Bar--bottom-left-enter,.cookieControl__Bar--bottom-left-leave-to,.cookieControl__Bar--bottom-right-enter,.cookieControl__Bar--bottom-right-leave-to{transform:translateY(100%)}.cookieControl__Bar--center-enter,.cookieControl__Bar--center-leave-to{transform:translate(-50%,-50%) scale(.95)}.cookieControl{position:relative;z-index:100000}.cookieControl button{border:0;outline:0;font-size:16px;cursor:pointer;padding:12px 20px;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:background-color .2s,color .2s}.cookieControl__Bar{position:fixed;background-color:var(--cookie-control-barBackground);font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}.cookieControl__Bar h3,.cookieControl__Bar p{color:var(--cookie-control-barTextColor);max-width:900px}.cookieControl__Bar h3{margin:0;font-size:20px}.cookieControl__Bar p{font-size:16px;margin:5px 0 0}.cookieControl__Bar button{color:var(--cookie-control-barButtonColor);background-color:var(--cookie-control-barButtonBackground)}.cookieControl__Bar button:hover{color:var(--cookie-control-barButtonHoverColor);background-color:var(--cookie-control-barButtonHoverBackground)}.cookieControl__Bar button+button{margin-left:10px}.cookieControl__BarContainer{display:flex;padding:20px;align-items:flex-end;justify-content:space-between}.cookieControl__Bar--bottom-full,.cookieControl__Bar--top-full{left:0;right:0}.cookieControl__Bar--top-full{top:0}.cookieControl__Bar--bottom-full{bottom:0}.cookieControl__Bar--bottom-left p,.cookieControl__Bar--bottom-right p,.cookieControl__Bar--center p,.cookieControl__Bar--top-left p,.cookieControl__Bar--top-right p{max-width:400px}.cookieControl__Bar--bottom-left .cookieControl__BarContainer,.cookieControl__Bar--bottom-right .cookieControl__BarContainer,.cookieControl__Bar--center .cookieControl__BarContainer,.cookieControl__Bar--top-left .cookieControl__BarContainer,.cookieControl__Bar--top-right .cookieControl__BarContainer{flex-direction:column}.cookieControl__Bar--bottom-left .cookieControl__BarButtons,.cookieControl__Bar--bottom-right .cookieControl__BarButtons,.cookieControl__Bar--center .cookieControl__BarButtons,.cookieControl__Bar--top-left .cookieControl__BarButtons,.cookieControl__Bar--top-right .cookieControl__BarButtons{margin-top:20px}.cookieControl__Bar--top-left,.cookieControl__Bar--top-right{top:20px}.cookieControl__Bar--bottom-left,.cookieControl__Bar--bottom-right{bottom:20px}.cookieControl__Bar--bottom-left,.cookieControl__Bar--top-left{left:20px}.cookieControl__Bar--bottom-right,.cookieControl__Bar--top-right{right:20px}.cookieControl__BarButtons{display:flex}.cookieControl__Modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;font-size:0;text-align:center}.cookieControl__Modal:before{content:"";min-height:100vh;display:inline-block;vertical-align:middle}.cookieControl__Modal:after{position:absolute;content:"";top:0;left:0;right:0;bottom:0;z-index:-1;opacity:var(--cookie-control-modalOverlayOpacity);background-color:var(--cookie-control-modalOverlay)}.cookieControl__Modal>div{font-size:medium;padding-top:80px}.cookieControl__Modal button{color:var(--cookie-control-modalButtonColor);background-color:var(--cookie-control-modalButtonBackground)}.cookieControl__Modal button:hover{color:var(--cookie-control-modalButtonHoverColor);background-color:var(--cookie-control-modalButtonHoverBackground)}.cookieControl__ModalContent{position:relative;width:100%;padding:40px;max-width:550px;max-height:80vh;text-align:left;overflow-y:scroll;display:inline-block;vertical-align:middle;background-color:var(--cookie-control-modalBackground)}.cookieControl__ModalContent,.cookieControl__ModalContent :not(button){color:var(--cookie-control-modalTextColor)}.cookieControl__ModalContent h3{font-size:24px;margin:50px 0 25px}.cookieControl__ModalContent h3:first-of-type{margin-top:0}.cookieControl__ModalContent ul{padding:0;font-size:16px;list-style-type:none}.cookieControl__ModalContent ul ul{padding:5px 56px 0}.cookieControl__ModalContent ul ul li+li{margin-top:5px}.cookieControl__ModalContent li{align-items:center}.cookieControl__ModalContent li+li{margin-top:20px}.cookieControl__ModalContent input{display:none}.cookieControl__ModalContent input:checked+label{background-color:var(--cookie-control-checkboxActiveBackground)}.cookieControl__ModalContent input:checked+label:before{background-color:var(--cookie-control-checkboxActiveCircleBackground);transform:translate3d(100%,-50%,0)}.cookieControl__ModalContent input:checked:disabled+label{background-color:var(--cookie-control-checkboxDisabledBackground)}.cookieControl__ModalContent input:checked:disabled+label:before{background-color:var(--cookie-control-checkboxDisabledCircleBackground)}.cookieControl__ModalContent label{position:relative;min-width:36px;min-height:20px;font-size:0;display:block;margin-right:20px;border-radius:20px;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:background-color .2s;background-color:var(--cookie-control-checkboxInactiveBackground)}.cookieControl__ModalContent label:before{position:absolute;content:"";top:50%;left:3px;width:15px;height:15px;border-radius:50%;transition:transform .2s;transform:translate3d(0,-50%,0);background-color:var(--cookie-control-checkboxInactiveCircleBackground)}.cookieControl__ModalInputWrapper{display:flex;align-items:flex-start}.cookieControl__ModalCookieName{font-weight:700;text-transform:uppercase}.cookieControl__ModalCookieName span{font-weight:400;text-transform:none}.cookieControl__ModalClose{position:absolute;top:20px;right:20px}.cookieControl__ModalButtons{display:flex;margin-top:80px;align-items:flex-start}.cookieControl__ModalButtons button+button{margin-left:20px}.cookieControl__ModalUnsaved{position:absolute;left:50%;bottom:40px;margin:0;color:var(--cookie-control-modalUnsavedColor);font-size:14px;transform:translateX(-50%)}.cookieControl__BlockedIframe{padding:20px;border:2px solid #ddd}.cookieControl__BlockedIframe a,.cookieControl__BlockedIframe p{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}@media screen and (max-width:768px){.cookieControl__Bar{flex-direction:column;left:0;right:0}.cookieControl__Bar h3,.cookieControl__Bar p{max-width:100%}.cookieControl__Bar--top-full,.cookieControl__Bar--top-left,.cookieControl__Bar--top-right{top:0}.cookieControl__Bar--bottom-full,.cookieControl__Bar--bottom-left,.cookieControl__Bar--bottom-right{bottom:0}.cookieControl__ModalContent{position:absolute;top:0;left:0;right:0;bottom:0;max-width:none;max-height:100%;padding:80px 20px 20px}.cookieControl__BarButtons{width:100%;margin-top:20px;flex-direction:column;justify-content:center}.cookieControl__BarButtons button{width:100%}.cookieControl__BarButtons button+button{margin:10px 0 0}.cookieControl__BarContainer,.cookieControl__ModalButtons{flex-direction:column}.cookieControl__ModalButtons button{width:100%}.cookieControl__ModalButtons button+button{margin:10px 0 0}}.cookieControl__ControlButton{position:fixed;right:20px;bottom:20px;border:0;outline:0;width:40px;height:40px;cursor:pointer;min-width:40px;min-height:40px;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:background-color .2s;box-shadow:0 0 10px rgba(0,0,0,.3);background:var(--cookie-control-controlButtonBackground)}.cookieControl__ControlButton svg{position:absolute;top:50%;left:50%;min-width:24px;min-height:24px;max-width:24px;max-height:24px;transition:color .2s;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(-50%,-50%);color:var(--cookie-control-controlButtonIconColor)}.cookieControl__ControlButton:hover{background-color:var(--cookie-control-controlButtonHoverBackground)}.cookieControl__ControlButton:hover svg{color:var(--cookie-control-controlButtonIconHoverColor)}.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#39b982;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}#__layout{overflow:hidden;background-color:#091221}.v--modal-block-scroll .l-content{perspective:none!important}.cookieControl__Bar.cookieControl__Bar--bottom-left{border-radius:10px!important;outline:1px solid #fff!important}.cookieControl__BarButtons button,.cookieControl__ModalButtons button{border-radius:30px!important}.cookieControl__ModalButtons button:first-child{background:#d12360}.cookieControl__ModalButtons button:nth-child(2){background:#55bd7b}.cookieControl__ModalButtons button:last-child{background:#bababa}.cookieControl__ModalClose{border-radius:30px!important;background:#bababa!important}.l-container[data-v-0b35c198]{display:grid;height:100vh;position:relative;z-index:0;grid-template-rows:auto 1fr auto;grid-template-areas:"banner" "header" "main" "footer"}.l-banner[data-v-0b35c198]{grid-area:banner}@media screen and (max-width:39.9375em){.l-banner[data-v-0b35c198]{position:absolute}}.l-banner-invisible[data-v-0b35c198]{opacity:0}.l-dashboard[data-v-0b35c198]{grid-template-columns:auto 1fr;grid-template-rows:63px 4rem 1fr auto;grid-template-areas:"banner banner" "sidenav header" "sidenav main" "sidenav footer"}.l-dashboard .l-header[data-v-0b35c198]{height:4rem}.l-dashboard-price[data-v-0b35c198],.l-subscriber[data-v-0b35c198]{grid-template-rows:4rem 1fr auto;grid-template-areas:"sidenav header" "sidenav main" "sidenav footer"}.l-header[data-v-0b35c198]{grid-area:header;position:relative;z-index:2;height:100px}.l-header.header-sticky[data-v-0b35c198]{position:sticky;top:0;background-color:#091221}@media screen and (max-width:39.9375em){.hide-header[data-v-0b35c198]{display:none}}.l-search[data-v-0b35c198]:not(.search){grid-area:search;display:none;position:absolute;top:28px;right:2.5rem;transition:all .3s ease-in-out}@media screen and (min-width:100em){.l-search[data-v-0b35c198]:not(.search){display:block;z-index:900;right:20.5rem}}.l-footer[data-v-0b35c198]{grid-area:footer}.l-sidenav[data-v-0b35c198]{grid-area:sidenav}.l-main[data-v-0b35c198]{grid-area:main}.l-body[data-v-0b35c198]{transform-style:preserve-3d;min-height:100vh}.l-content[data-v-0b35c198]{position:relative;z-index:2;transition:padding-top .3s ease-out;height:100vh;overflow-x:hidden;overflow-y:auto;perspective:2px}@media screen and (max-width:39.9375em){.l-content-mobile-banner[data-v-0b35c198]{margin-top:60px}}.cookieControl[data-v-0b35c198]{height:0;width:0}.vuemastery-banner-wrapper[data-v-3cb8d4e4]{position:relative;top:0;left:0;right:0;z-index:61;width:100%;height:100%;max-height:70px;background:linear-gradient(45deg,#0a2b4e,#835ec2);background-size:110%;background-position:50% 50%;overflow:hidden;padding:12px;margin:0;transition:background-size .25s cubic-bezier(.39,.575,.565,1)}.vuemastery-banner-wrapper[data-v-3cb8d4e4]:hover{background-size:100%}.vuemastery-banner-wrapper[data-v-3cb8d4e4]:before{content:"";background:url(/images/free-weekend/background-bubbles-vuemastery.svg) 0 no-repeat;background-size:cover;position:absolute;top:0;bottom:0;left:0;right:0;transition:all .3s ease-out .1s;transform:scale(1.1);width:100%;height:100%}.vuemastery-banner-wrapper[data-v-3cb8d4e4]:after{content:"";background:url(/images/free-weekend/lock-vuemastery.svg) 100% no-repeat;background-size:auto 100%;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.vuemastery-banner-wrapper[data-v-3cb8d4e4]:hover:after{background-image:url(/images/free-weekend/unlock-vuemastery.svg)}#vm-free-weekend[data-v-3cb8d4e4]{position:relative;width:100%;height:100%;text-decoration:none;color:#fff;display:flex;justify-content:center;align-items:center;overflow:hidden}#vm-logo-full[data-v-3cb8d4e4]{position:absolute;left:15px;width:120px}.free-weekend-live[data-v-3cb8d4e4]{position:absolute;left:50px}.free-weekend-live-text[data-v-3cb8d4e4]{padding:0 .5em;border-radius:999em;font-weight:700;font-size:16px;color:#fff;content:"";display:block;text-align:center;background:#41b782;box-shadow:0 0 0 .25em #86d169;animation:pulse-3cb8d4e4 1s infinite}@keyframes pulse-3cb8d4e4{0%{box-shadow:0 0 0 .2em #86d169}25%{box-shadow:0 0 0 .05em #86d169}50%{box-shadow:0 0 0 .375em #86d169}75%{box-shadow:0 0 0 .2em #86d169}to{box-shadow:0 0 0 .3em #86d169}}#vm-logo-small[data-v-3cb8d4e4]{display:none}.vm-free-weekend-wrapper[data-v-3cb8d4e4]{display:flex;align-items:center}.vm-free-weekend-content[data-v-3cb8d4e4]{display:flex}.vm-free-weekend-title[data-v-3cb8d4e4]{margin:0;padding:0;font-weight:700;font-size:24px;text-align:center;background:linear-gradient(145deg,#c3ffac,#86ec87,#38a56a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.vm-free-weekend-sub[data-v-3cb8d4e4]{margin:0 2em;padding:0;font-size:20px;text-align:center;color:#fff}.vm-free-weekend-sub>span[data-v-3cb8d4e4]{font-weight:700;background:linear-gradient(145deg,#c3ffac,#86ec87,#38a56a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}#vm-banner-cta[data-v-3cb8d4e4]{position:relative;margin-left:10px;padding:10px 24px;background:linear-gradient(to top right,#41b782,#86d169);border:none;border-radius:30px;color:#fff;font-size:12px;font-weight:700;text-decoration:none;text-transform:uppercase;cursor:pointer}#vm-banner-cta[data-v-3cb8d4e4]:hover{background:linear-gradient(to bottom right,#41b782,#86d169)}#vm-banner-close[data-v-3cb8d4e4]{position:absolute;right:12px;color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center}#vm-banner-close>.close[data-v-3cb8d4e4]{width:20px;height:20px;fill:#fff;transform:rotate(45deg)}@media (max-width:1200px){#vm-banner-cta[data-v-3cb8d4e4]{display:none}.vm-free-weekend-content[data-v-3cb8d4e4]{flex-direction:column}.vm-free-weekend-sub[data-v-3cb8d4e4]{margin:0 1em}}@media (max-width:850px){.vuemastery-banner-wrapper[data-v-3cb8d4e4]:after{background:0 0}}@media (max-width:767px){.vm-free-weekend-title[data-v-3cb8d4e4]{font-size:14px}.vm-free-weekend-sub[data-v-3cb8d4e4]{font-size:12px;margin:0}.free-weekend-live[data-v-3cb8d4e4]{position:absolute;left:5px}.free-weekend-live-text[data-v-3cb8d4e4]{font-size:10px;padding:0 .25em}}.vuemastery-background-dim[data-v-3cb8d4e4]{position:absolute;width:100%;height:100%;top:0;left:0}.vuemastery-background-dim[data-v-3cb8d4e4]:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent);transition:.5s;transition-delay:.5s}.vuemastery-background-dim.show-flash[data-v-3cb8d4e4]:after{left:100%}.header[data-v-0723b23c]{position:absolute;width:100%;height:100%;top:0;z-index:900;display:flex;justify-content:center}@media screen and (min-width:78em){.header[data-v-0723b23c]{position:relative}}.header .wrapper[data-v-0723b23c]{display:flex;flex-wrap:wrap;align-items:center}.logo[data-v-0723b23c]{display:block;max-width:200px;margin-top:-5px;position:relative;z-index:1;transition:all .2s ease-in}.logo img[data-v-0723b23c]{width:100%}@media screen and (min-width:78em){.logo[data-v-0723b23c]{transform:none;max-width:240px;min-width:200px;margin:-10px 90px 0 0}}.vuemastery-logo[data-v-0723b23c]{display:none}.vuemastery-logo-white[data-v-0723b23c]{display:block}.hamburger[data-v-0723b23c]:after,.hamburger[data-v-0723b23c]:before{background-color:#fff!important}.close[data-v-0723b23c]{position:absolute;top:0;right:10px;background:0 0;border:0;color:#0a2b4e;font-size:2em}.open-nav .logo{transform:translateX(-50%);margin-left:50%}.navbar[data-v-1a6b7b26]{position:absolute;height:100vh;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;flex:1;left:0;width:100%;flex-direction:column;background-color:#0a2b4e;opacity:0;transition:opacity .2s ease-in;top:0}.navbar [data-v-1a6b7b26],.navbar[data-v-1a6b7b26]{pointer-events:none}@media screen and (min-width:78em){.navbar[data-v-1a6b7b26]{height:100%;background-color:transparent;pointer-events:none;opacity:1;justify-content:space-between;position:relative;flex-direction:row;flex-wrap:nowrap}.navbar [data-v-1a6b7b26]{pointer-events:auto}}.navbar-item[data-v-1a6b7b26]{color:#fff;font-family:"Source Sans Pro",sans-serif;font-size:16px;text-decoration:none;white-space:nowrap;opacity:0}.navbar-item.nuxt-link-active[data-v-1a6b7b26]{font-weight:700}.navbar-item[data-v-1a6b7b26]:last-child{margin-right:0}@media screen and (min-width:78em){.navbar-item[data-v-1a6b7b26]{opacity:1;margin-right:25px}}.button[data-v-1a6b7b26]{opacity:0;font-size:20px}.button+button[data-v-1a6b7b26]{margin:0}@media screen and (min-width:78em){.button[data-v-1a6b7b26]{font-size:18px;opacity:1}}.navbar-main[data-v-1a6b7b26],.navbar-secondary[data-v-1a6b7b26]{display:flex;flex-direction:column;text-align:center;justify-content:space-evenly;align-items:center;pointer-events:none}@media screen and (max-width:77.938em){.navbar-main a[data-v-1a6b7b26],.navbar-main button[data-v-1a6b7b26],.navbar-secondary a[data-v-1a6b7b26],.navbar-secondary button[data-v-1a6b7b26]{margin-bottom:40px}.navbar-main .inverted[data-v-1a6b7b26],.navbar-secondary .inverted[data-v-1a6b7b26]{height:auto;line-height:24px}}@media screen and (min-width:78em){.navbar-main[data-v-1a6b7b26],.navbar-secondary[data-v-1a6b7b26]{flex-direction:row;pointer-events:auto}.navbar-main .button[data-v-1a6b7b26],.navbar-secondary .button[data-v-1a6b7b26]{margin-left:18px}}@media screen and (min-width:78em){.navbar-secondary.mobile-nav[data-v-1a6b7b26]{display:none}}.navbar-profile[data-v-1a6b7b26]{display:flex;border-radius:50%;overflow:hidden;box-shadow:0 1px 0 0 #e4e4e4;background-color:#fff;width:40px;height:40px}.navbar-profile img[data-v-1a6b7b26]{width:100%}.signin-enter-active[data-v-1a6b7b26]{transition:opacity .5s ease-in}.signin-enter-active .appear[data-v-1a6b7b26]{transition:transform .5s ease-out}.signin-leave-active[data-v-1a6b7b26]{transition:opacity .3s ease-out}.signin-enter[data-v-1a6b7b26],.signin-leave-to[data-v-1a6b7b26]{opacity:0}.signin-enter .appear[data-v-1a6b7b26]{transform:translateX(58px)}.linkin-enter-active[data-v-1a6b7b26]{transition:margin-right .5s ease-out,opacity .3s ease-out .5s}.linkin-leave-active[data-v-1a6b7b26]{transition:margin-right .5s ease-out .2s,opacity .3s ease-out}.linkin-enter[data-v-1a6b7b26],.linkin-leave-to[data-v-1a6b7b26]{margin-right:-91px;opacity:0}.signout-enter-active[data-v-1a6b7b26],.signout-leave-active[data-v-1a6b7b26]{transition:opacity .3s ease-in}.signout-enter[data-v-1a6b7b26],.signout-leave-to[data-v-1a6b7b26]{opacity:0}@media screen and (min-width:100em){.search-link[data-v-1a6b7b26]{display:none}}.open-nav:not(.l-dashboard),.open-nav:not(.l-dashboard) .l-content,.open-nav:not(.l-dashboard) .l-main{max-height:100vh;overflow:hidden!important}.open-nav:not(.l-dashboard) .l-footer{display:none}.open-nav:not(.l-dashboard) .navbar *{pointer-events:auto}.open-nav:not(.l-dashboard) .navbar-main{padding-top:8rem}@media screen and (min-width:78em){.open-nav:not(.l-dashboard) .navbar-main{padding-top:0}}.open-nav:not(.l-dashboard) .navbar{opacity:1}.open-nav:not(.l-dashboard) .button,.open-nav:not(.l-dashboard) .navbar-item{opacity:1;transition-duration:.4s}.open-nav:not(.l-dashboard) .button:first-child,.open-nav:not(.l-dashboard) .navbar-item:first-child{transition-delay:.1s}.open-nav:not(.l-dashboard) .button:nth-child(2),.open-nav:not(.l-dashboard) .navbar-item:nth-child(2){transition-delay:.2s}.open-nav:not(.l-dashboard) .button:first-child{transition-delay:.3s}.open-nav:not(.l-dashboard) .button:nth-child(2){transition-delay:.4s}.hamburger[data-v-e40904ca]{background-color:transparent;display:flex;right:0;margin:0;padding:0;width:5rem;height:4rem;font-size:0;text-indent:-9999px;z-index:40;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border-radius:0;border:none;cursor:pointer;overflow:hidden;position:absolute;top:18px}@media screen and (min-width:78em){.hamburger[data-v-e40904ca]{display:none}}.hamburger[data-v-e40904ca]:focus{outline:0}.hamburger[data-v-e40904ca]:after,.hamburger[data-v-e40904ca]:before{content:"";display:block;height:2px;width:2rem;background-color:#222;transition:transform .1s ease-in-out,margin-top .1s ease-in-out .1s;position:absolute;right:1rem;top:50%}.hamburger[data-v-e40904ca]:before{margin-top:-.6rem}.hamburger[data-v-e40904ca]:after{margin-top:.3rem}.open-nav .hamburger[data-v-e40904ca]:after,.open-nav .hamburger[data-v-e40904ca]:before{transition:transform .1s ease-in-out .1s,margin-top .1s ease-in-out}.open-nav .hamburger[data-v-e40904ca]:before{transform:rotate(45deg);margin-top:0}.open-nav .hamburger[data-v-e40904ca]:after{transform:rotate(-45deg);margin-top:0}[class^=ais-]{font-size:1rem}.search-wrapper{position:relative;top:0;z-index:901}.ais-Hits-Img{display:none}.ais-SearchBox-form{display:block;position:relative}.ais-SearchBox-form button{color:#39b982;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border-radius:0;border:none;position:absolute;right:.8rem;top:.4rem;cursor:pointer}.ais-SearchBox-form button.reset{right:.35rem;top:.45rem}.ais-SearchBox-loadingIndicator,.ais-SearchBox-reset,.ais-SearchBox-submit{background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;z-index:1;width:25px;height:20px;top:50%;right:.3rem;transform:translateY(-50%);border:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ais-Highlight-highlighted,.ais-Snippet-highlighted{text-decoration:underline;text-underline-position:under;background-color:transparent;color:#0a2b4e;-webkit-text-decoration-color:#39b982;text-decoration-color:#39b982}.ais-Hits-Box{flex:1}.ais-Hits-Box .ais-Hits-Course-Title{margin:0;border-bottom:1px dashed #e4e4e4;padding:0 0 6px}.ais-Hits-Box .ais-Hits-Course-Title .ais-Highlight,.ais-Hits-Box .ais-Hits-Course-Title .ais-Highlight-highlighted{font-size:13px!important;font-weight:400!important;color:#888!important}.ais-Hits-Box .ais-Hits-Title{margin-top:0}.ais-Hits-Box .ais-Hits-Title .badge{font-size:.6rem}.ais-Hits-Box .badge{margin:8px 8px 8px 0}.ais-Hits-Box .ais-Highlight{margin-right:8px}.ais-background{position:fixed;top:0;left:0;width:100%;height:100%}.ais-ToggleRefinement-checkbox{display:none}.ais-ToggleRefinement-checkbox:checked+span:before{content:"free";position:absolute;top:0;left:0;background-color:#39b981;width:100%;height:100%;text-align:right;display:flex;justify-content:flex-end;align-items:center;padding-right:1.7rem;box-sizing:border-box}.ais-SearchBox-input{width:100%;height:44px;padding:0 36px 0 23px;font-size:20px;border:2px solid #bbb;border-radius:30px;transition:all .2s ease-out}.ais-SearchBox-input:focus{outline:0}.ais-SearchBox-submitIcon path{fill:#39b982}.ais-StateResults{background:#f5f5fa;padding:0 1.1rem;border-radius:0 0 10px 10px}.search-top{overflow:hidden;position:sticky;top:0;z-index:3;padding:0 1rem;border-bottom:2px solid #fff;display:flex;justify-content:space-between;align-items:center;background:#082a4e;text-transform:uppercase;color:#fff}@media screen and (max-width:39.9375em){.search-top{display:none}}.search-result{opacity:0;width:400px;max-width:100%;height:0;transition:opacity .2s ease-out,transform .2s ease-out;overflow:hidden;pointer-events:none;transform:translateY(30px)}.show .search-result{transition:opacity .2s ease-in,transform .2s ease-in;transform:translateY(2px);opacity:1;height:calc(100vh - 3rem);pointer-events:auto;overflow-y:auto}.show .search-result:before{content:"";position:absolute;height:3px;top:-3px;width:250px;background-color:#0a2b4e;-webkit-mask-image:radial-gradient(circle 3px at 249px,at 0,transparent 0,transparent 3px,#000 0);-webkit-mask-image:radial-gradient(circle 3px at 249px 0,transparent 0,transparent 3px,#000 0)}.show .ais-SearchBox-input{padding:0 36px 0 18px;border-radius:10px 10px 0 0;border-color:#f5f5fa;background:#f5f5fa}.show .ais-SearchBox-submit{opacity:0}.ais-Menu-list{display:flex;list-style-type:none;margin-left:-.5rem;padding:1rem 0;position:relative;z-index:4}.ais-Menu-item{margin-right:.5rem;margin-bottom:0}.ais-Menu-count,.ais-ToggleRefinement-count{display:none}.ais-Menu-label,.ais-ToggleRefinement-labelText{padding:4px 10px;border-radius:24px;font-size:.8rem;cursor:pointer;color:#fff;display:block;text-decoration:none}.ais-Menu-item{border-radius:24px}.ais-Menu-item--selected,.ais-Menu-item:hover,.ais-ToggleRefinement-labelText:hover{background:#835ec2;color:#fff}.ais-Menu-item--selected .ais-Menu-link,.ais-Menu-item:hover .ais-Menu-link,.ais-ToggleRefinement-labelText:hover .ais-Menu-link{text-decoration:none}.ais-ToggleRefinement{padding:1rem 0;margin-left:auto}.ais-ToggleRefinement--noRefinement{display:none}.ais-Hits-list{margin:0;padding:0;justify-content:space-between;list-style-type:none}.ais-Hits-item{cursor:pointer;padding:.7rem 1.5rem;margin:0 -1.1rem}@media screen and (min-width:40em){.ais-Hits-item{padding:.7rem 1.1rem}.ais-Hits-item:hover{margin:0 -.7rem;padding:.7rem}}.ais-Hits-item:hover{background:#fff}.ais-Hits-item:hover .ais-Highlight,.ais-Hits-item:hover a{text-decoration:none}.ais-Hits-item a{display:flex}.ais-Pagination-list{display:flex;list-style-type:none;justify-content:space-evenly;margin:0;padding:20px 0 30px}.ais-Pagination-list li{display:flex;margin-bottom:0}.ais-Pagination-item{border-radius:50%;border:none;background-color:transparent;color:#39b982;width:25px;height:25px;justify-content:center;align-items:center;cursor:pointer;transition:background-color .3s ease-out}.ais-Pagination-item:hover{transition:background-color .1s ease-in}.ais-Pagination-item .ais-Pagination-link{transition:color .3s ease-out;line-height:0;height:2px}.ais-Pagination-item .ais-Pagination-link:hover{transition:color .1s ease-out}.ais-Pagination-item--selected{background-color:#39b982}.ais-Pagination-item--selected .ais-Pagination-link{color:#fff;text-decoration:none}.ais-Pagination-itemhover{background-color:#fff}.ais-Pagination-itemhover .ais-Pagination-link{color:#666;text-decoration:none}.ais-Snippet{display:block;color:#666;font-size:1rem;line-height:1.4rem;padding-bottom:10px;max-width:365px}.no-result{padding:1rem 0}.no-result p{margin-top:0}.no-result q{font-weight:700}.no-result ul{list-style-type:none;padding:0;margin-left:0}.search{background:#0b2b4e;margin-top:-6.3rem;padding-top:6rem;top:0;transition:0s}.search .ais-Hits-Img{display:none;width:200px;padding-top:.9rem;padding-bottom:.9rem;-o-object-fit:contain;object-fit:contain;-o-object-position:top;object-position:top}@media screen and (min-width:40em){.search .ais-Hits-Img{display:block}}@media screen and (min-width:40em){.search .ais-Hits-Box{padding-left:2rem}}.search .ais-InstantSearch{opacity:1;pointer-events:auto;position:relative;transform:none;top:0;right:0;display:block;min-height:100vh}.search .search-result{margin:0 auto;width:100%;background:#f5f5fa;opacity:1;transform:none;pointer-events:auto;padding-bottom:1px;height:100%}.search .search-result:before{display:none}.search .search-top{width:100%;max-width:100%;background:#0a2b4e;color:#fff;border-radius:0;border-radius:initial;border-bottom:none;margin-bottom:1rem;display:flex;padding:0 .8rem 0 1.4rem}@media screen and (min-width:40em){.search .search-top{margin-bottom:2rem}}@media screen and (min-width:50em){.search .search-top{padding-left:calc(50% - 345px);padding-right:calc(50% - 357px)}}.search .ais-StateResults{margin:0 auto;background:0 0;max-width:100%;width:785px;min-height:300px}.search .ais-wrapper{position:relative;left:0;margin-right:0;max-width:none}.search .ais-background{display:none}.search .ais-SearchBox{background-color:#0a2b4e;display:flex;justify-content:center;align-items:center;height:5rem;max-width:100%;margin-bottom:-1rem}@media screen and (min-width:40em){.search .ais-SearchBox{height:7rem}}.search .ais-SearchBox-input{padding:0 1.4rem;height:47px;font-size:16px;border:2px solid #bbb;border-radius:30px;color:#000;color:initial}@media screen and (min-width:40em){.search .ais-SearchBox-input{padding:0 2rem;height:54px;font-size:20px}}.search .ais-SearchBox-form{width:760px;max-width:calc(100% - 1.4rem)}.search .ais-SearchBox-form button{right:1.4rem;top:.7rem}.search .ais-SearchBox-form button.reset{top:.75rem}.search .ais-Menu-list{padding:1rem 0 1.3rem}.search .ais-SearchBox-submit{right:2.2rem}.search .ais-SearchBox-reset{right:1.8rem}.search .ais-ToggleRefinement-checkbox:checked+span{background:#39b982;border-radius:24px;color:#fff}.search .ais-ToggleRefinement-checkbox:checked+span:before{content:none}.search .ais-Snippet{max-width:100%}.search .ais-Hits-Title{line-height:1.2rem}.search .ais-Pagination-list{max-width:500px;padding:0;margin:2rem auto 3rem}.search .no-result{text-align:center}.search .no-result ul{list-style-type:none;padding:0;margin-left:0}.homepage[data-v-cdd2dbec]{transform-style:preserve-3d;margin-top:-6.3rem}.homepage[data-v-cdd2dbec]:after,.homepage[data-v-cdd2dbec]:before{content:"";position:absolute;height:74%;width:100%;background-image:url(/images/homepage/hero_bg.webp);background-color:#024966;background-size:cover;pointer-events:none;transform:translateZ(-1px) scale(2);z-index:-1000}.homepage[data-v-cdd2dbec]:after{background:radial-gradient(at right bottom,#159598,transparent 70%);bottom:0;background-position:100% 100%;transform-origin:50% 93%;background-size:100% 200vh;background-repeat:no-repeat}[data-v-cdd2dbec] section.c-cheatsheet{background:0 0}.bg-wrapper[data-v-cdd2dbec]{-webkit-overflow-scrolling:touch;transform-style:preserve-3d}.bg-wrapper[data-v-cdd2dbec]:after,.bg-wrapper[data-v-cdd2dbec]:before{content:"";position:absolute;height:96%;width:100%;background-size:cover;background-position:bottom;background-repeat:no-repeat}@media screen and (max-width:39.9375em){.bg-wrapper[data-v-cdd2dbec]:after,.bg-wrapper[data-v-cdd2dbec]:before{height:100%}}.bg-wrapper[data-v-cdd2dbec]:before{transform:translateZ(-1px) scale(1.5)}@media screen and (max-width:39.9375em){.bg-wrapper[data-v-cdd2dbec]:before{transform:translateZ(-1px) scale(1)}}.experts-teachers[data-v-cdd2dbec]:before{background-image:url(/images/homepage/bg-planets.svg);pointer-events:none}.experts-teachers[data-v-cdd2dbec]:after{display:none}@supports (-moz-appearance:none){.experts-teachers[data-v-cdd2dbec]:before{transform:none}}[data-v-cdd2dbec] .bg-wrapper.experts-teachers.title .banner .title{margin-top:6rem;margin-bottom:50px}@media screen and (max-width:39.9375em){[data-v-cdd2dbec] .bg-wrapper.experts-teachers.title .banner .title{margin-top:4em;height:100%}}[data-v-cdd2dbec] .learn-from-experts .title{margin-top:1em!important}.playlist .button[data-v-cdd2dbec]{margin:3rem auto;display:flex;width:18rem}@media (max-width:700px){.playlist .button[data-v-cdd2dbec]{margin:3rem auto 0}}section.bg-wrapper[data-v-a396a1ae]{position:relative;height:80vh;pointer-events:none}@media screen and (max-width:39.9375em){section.bg-wrapper[data-v-a396a1ae]{height:77vh}}@media screen and (min-width:140em){section.bg-wrapper[data-v-a396a1ae]{max-height:80rem}}section.bg-wrapper[data-v-a396a1ae]:after,section.bg-wrapper[data-v-a396a1ae]:before{background-size:contain;background-position:50%;transform:translateY(-2vw) translateZ(-.3px) scale(1.3)}@media screen and (min-width:140em){section.bg-wrapper[data-v-a396a1ae]:after,section.bg-wrapper[data-v-a396a1ae]:before{transform:translateY(-3vw) translateZ(-.3px) scale(1.4)}}@media (orientation:portrait){section.bg-wrapper[data-v-a396a1ae]:after,section.bg-wrapper[data-v-a396a1ae]:before{transform:none;background-size:cover;background-position:50%}}section.bg-wrapper[data-v-a396a1ae]:before{background-image:url(/images/homepage/hero_courses.png)}@media screen and (max-width:39.9375em){section.bg-wrapper[data-v-a396a1ae]:before{display:none}}section.bg-wrapper[data-v-a396a1ae]:after{background-image:url(/images/homepage/hero_platform.webp)}@media screen and (max-width:39.9375em){section.bg-wrapper[data-v-a396a1ae]:after{top:-4vh;background-position:64%}}@media (orientation:portrait){section.bg-wrapper[data-v-a396a1ae]{min-height:600px}}.bg[data-v-a396a1ae]{position:absolute;width:100%;height:100%;min-height:600px;background-image:url(/images/homepage/hero_aurora.webp);background-size:cover;background-attachment:fixed;transform:translateZ(-.4px) scale(1.4);z-index:-400}.course-playlist-container[data-v-36fece9c]{position:relative;display:flex;flex-flow:row wrap;z-index:3;margin-top:-15vh}@media (max-width:900px){.course-playlist-container[data-v-36fece9c]{margin-top:-6rem}}.playlist-wrapper[data-v-36fece9c]{margin-top:3em;overflow:hidden;width:100%;position:relative}.playlist-wrapper-cards[data-v-36fece9c]{position:relative;overscroll-behavior-x:contain}.playlist-wrapper-slider[data-v-36fece9c]{display:flex;overflow-x:scroll;max-width:100vw;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:4rem;padding-left:4rem;scrollbar-width:none;grid-gap:2rem;gap:2rem}@media (max-width:400px){.playlist-wrapper-slider[data-v-36fece9c]{grid-gap:1rem;gap:1rem}}@media (max-width:1400px){.playlist-wrapper-slider[data-v-36fece9c]{scroll-padding-left:1em;padding-left:1em}}.playlist-wrapper-slider.grid[data-v-36fece9c]{display:grid;padding-right:4rem;grid-template-columns:repeat(auto-fit,minmax(352px,1fr))}.playlist-wrapper-slider.grid[data-v-36fece9c] .playlist-card{width:100%!important}.playlist-wrapper-slider.dragging[data-v-36fece9c]{scroll-snap-type:none;scroll-behavior:auto}.playlist-wrapper-slider.dragging[data-v-36fece9c] a{pointer-events:none;cursor:grabbing}.playlist-wrapper-slider[data-v-36fece9c]::-webkit-scrollbar-thumb{background:0 0}.playlist-wrapper-slider[data-v-36fece9c]::-webkit-scrollbar,.playlist-wrapper-slider[data-v-36fece9c]::-webkit-scrollbar-thumb{background:0 0}.playlist-wrapper-slider[data-v-36fece9c]::-webkit-scrollbar-track{background:0 0}@media (max-width:932px){.playlist-wrapper-slider[data-v-36fece9c]:after{content:"";width:6rem;height:calc(100% - 1.6rem);position:absolute;right:0;background:linear-gradient(-90deg,#001747,rgba(0,23,71,0))}}@media screen and (max-width:932px) and (max-width:39.9375em){.playlist-wrapper-slider[data-v-36fece9c]:after{width:2rem}}@media (max-width:932px) and (min-width:1400px){.playlist-wrapper-slider[data-v-36fece9c]:after{width:12rem}}.long[data-v-36fece9c]{width:100%}.long .playlist-wrapper-slider[data-v-36fece9c]:after{content:"";width:6rem;height:calc(100% - 1.6rem);position:absolute;right:0;background:linear-gradient(-90deg,#001747,rgba(0,23,71,0))}@media screen and (max-width:39.9375em){.long .playlist-wrapper-slider[data-v-36fece9c]:after{width:2rem}}@media (min-width:1400px){.long .playlist-wrapper-slider[data-v-36fece9c]:after{width:12rem}}@media (min-width:932px){.short[data-v-36fece9c] .playlist-card{flex-direction:row}.short[data-v-36fece9c] .coming-soon{left:-6rem}}@media (min-width:1400px){[data-v-36fece9c] .playlist-card{flex-direction:column!important;width:25rem;max-width:25rem}[data-v-36fece9c] .coming-soon{left:-6rem}}.tab-switch[data-v-36fece9c]{position:absolute;top:1.8rem;right:6rem}@media (max-width:932px){.tab-switch[data-v-36fece9c]{margin:2rem auto 1rem;position:relative;top:0;right:auto}}.list-enter-active .playlist-wrapper-cards[data-v-36fece9c],.list-enter-active .slider-title[data-v-36fece9c],.list-enter-active[data-v-36fece9c],.list-leave-active .playlist-wrapper-cards[data-v-36fece9c],.list-leave-active .slider-title[data-v-36fece9c],.list-leave-active[data-v-36fece9c]{transition:all 1s}.list-leave-active[data-v-36fece9c]{position:absolute}.list-enter .slider-title[data-v-36fece9c],.list-leave-to .slider-title[data-v-36fece9c]{opacity:0}.list-enter .playlist-wrapper-cards[data-v-36fece9c],.list-leave-to .playlist-wrapper-cards[data-v-36fece9c]{opacity:0;transform:translateX(-100%)}.front.list-leave-to .playlist-wrapper-cards[data-v-36fece9c],.list-enter .playlist-wrapper-cards[data-v-36fece9c]{transform:translateX(100%)}.front.list-enter .playlist-wrapper-cards[data-v-36fece9c]{transform:translateX(-100%)}.slider-controler[data-v-36fece9c]{display:none;position:absolute;color:#39b982;right:0;top:2.5rem}@media (min-width:933px){.slider-controler[data-v-36fece9c]{display:flex;right:1rem}}.slider-controler .fa[data-v-36fece9c]{display:flex;width:2rem;height:2rem;font-size:1.5rem;cursor:pointer}.list-indication[data-v-36fece9c],.slider-controler .fa[data-v-36fece9c]:hover{color:#fff}.list-indication svg[data-v-36fece9c]{margin-bottom:-.4rem}.slider-title[data-v-19d4f81c]{display:flex;padding:1em 4rem;flex-wrap:wrap;margin:0 auto}@media (max-width:932px){.slider-title[data-v-19d4f81c]{flex-direction:column}}@media (max-width:1400px){.slider-title[data-v-19d4f81c]{padding:1em 25px}}.slider-title h1[data-v-19d4f81c]{margin:0;padding:0;background:-webkit-linear-gradient(145deg,#c3ffac,#86ec87,#38a56a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media (max-width:1480px){.slider-title h1[data-v-19d4f81c]{font-size:2.5em}}.slider-title .h6[data-v-19d4f81c]{margin:0 0 0 .7em;padding-top:1.6rem;color:#fff;font-size:1em}@media screen and (max-width:39.9375em){.slider-title .h6[data-v-19d4f81c]{padding-top:.5rem;padding-bottom:1rem}}@media (max-width:932px){.slider-title .h6[data-v-19d4f81c]{margin:0}}.playlist-card[data-v-6144f90f]{height:100%;width:100%;max-width:48rem}.playlist-card-item-wrapper[data-v-6144f90f]{max-width:100%;scroll-snap-align:start}.playlist-card-item-wrapper[data-v-6144f90f]:last-child{z-index:3}.playlist-card-item-progress-container[data-v-6144f90f]{display:flex;height:100%;min-width:352px;flex-direction:column;overflow:hidden;cursor:grab;position:relative}@media (max-width:400px){.playlist-card-item-progress-container[data-v-6144f90f]{min-width:calc(100vw - 4rem);padding:0 .5rem}}.playlist-card-wrapper[data-v-6144f90f]{position:relative;height:100%;width:100%;flex-grow:1}.playlist-card-progress[data-v-6144f90f]{width:100%;height:16px}.progress[data-v-6144f90f]{position:relative;top:5px;width:100%;height:10px;background-color:#808081;border-radius:5px;overflow:hidden}.progress-bar[data-v-6144f90f]{height:100%;width:100%;background:#39b982}.playlist-card-item-hover[data-v-6144f90f]{position:absolute;width:100%;height:100%;top:0;left:0}.playlist-card[data-v-9f08d576]{border-radius:4px;overflow:hidden;border:none;box-shadow:0 1px 4px 0 #000;text-decoration:none;color:#000;width:100%;transition:all .2s}.playlist-card-content[data-v-9f08d576],.playlist-card[data-v-9f08d576]{position:relative;display:flex;flex-direction:column;height:100%}.playlist-card-content[data-v-9f08d576]{padding:1em;background-color:#fff;justify-content:space-between;min-width:50%;max-height:212px}.playlist-card-content-title[data-v-9f08d576]{margin:0;padding:0;background:-webkit-linear-gradient(#19aba7,#326f95,#332756);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.playlist-card-content-description[data-v-9f08d576]{margin-top:.5rem;padding:0;font-size:12px;display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical;height:65px;overflow:hidden}@media (min-width:1024px){.playlist-card-content-description[data-v-9f08d576]{font-size:14px}}@media (min-width:1400px){.playlist-card-content-description[data-v-9f08d576]{font-size:15px}}@media (max-width:600px){.playlist-card-content-description[data-v-9f08d576]{overflow:hidden}}.playlist-card-content-footer[data-v-9f08d576]{display:flex;justify-content:space-between;align-items:center}.playlist-card-content-footer-meta[data-v-9f08d576]{display:grid}.playlist-card-media[data-v-9f08d576]{min-height:170px;max-height:212px;height:100%;width:100%;min-width:50%}.playlist-card-media img[data-v-9f08d576]{height:100%}img[data-v-d60e5cbc]{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.course-badge[data-v-d60e5cbc]{z-index:1;height:100%}.coming-soon[data-v-d60e5cbc],.course-badge[data-v-d60e5cbc]{display:flex;justify-content:center;align-items:center;width:100%}.coming-soon[data-v-d60e5cbc]{position:absolute;color:#5d5606;background:#f3e43c;text-transform:uppercase;text-align:center;font-weight:700;border-top-left-radius:9px;border-top-right-radius:9px;border-bottom-right-radius:9px;border-bottom-left-radius:9px;top:6rem;transform:rotate(40deg);left:0}.badges[data-v-3e240034]{position:absolute;top:10px;left:10px}.icon-text-wrapper[data-v-ae0cc45a]{display:flex;align-items:center;height:1.2rem}.icon-text-wrapper>.label[data-v-ae0cc45a]{font-size:14px}@media (min-width:1400px){.icon-text-wrapper>.label[data-v-ae0cc45a]{font-size:16px}}.icon-wrapper[data-v-ae0cc45a]{display:flex;margin-right:.5rem;max-width:1rem}.icon[type=feather][data-v-35fb8f3c]{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.icon[type=social][data-v-35fb8f3c]{fill:currentColor}.icon[data-v-5242085a]{stroke:#39b982;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}.playlist-card-content-footer-author[data-v-3b9a6462]{display:flex;align-items:center;margin-left:auto}.playlist-card-content-footer-author-name[data-v-3b9a6462]{color:#39b982;font-size:14px;padding-top:0;margin-bottom:0;text-align:right;line-height:18px}@media (min-width:1400px){.playlist-card-content-footer-author-name[data-v-3b9a6462]{font-size:16px}}.playlist-card-content-footer-author-date[data-v-3b9a6462]{margin:0;font-size:12px}@media (min-width:1400px){.playlist-card-content-footer-author-date[data-v-3b9a6462]{font-size:16px}}.playlist-card-content-footer-author-avatar[data-v-3b9a6462]{width:50px;height:50px;border-radius:50%;margin-left:.5em;-o-object-fit:cover;object-fit:cover;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;background-color:#19aba7}.playlist-card-content-footer-author-avatar[data-v-3b9a6462]:hover{z-index:6!important}.playlist-card-content-footer-author-content[data-v-3b9a6462]{display:flex;flex-direction:column;align-items:center}.c-cheatsheet[data-v-6ba6d081]{background-color:#041831}@media screen and (max-width:39.9375em){.c-cheatsheet[data-v-6ba6d081]{margin-top:4rem}}.c-title[data-v-6ba6d081]{display:flex;align-items:center;padding:1em 4rem;flex-wrap:wrap;margin:0 auto}@media (max-width:932px){.c-title[data-v-6ba6d081]{flex-direction:column;text-align:center}}@media (max-width:1400px){.c-title[data-v-6ba6d081]{padding:1em 25px}}.c-title h1[data-v-6ba6d081]{margin:0;padding:0;background:-webkit-linear-gradient(145deg,#c3ffac,#86ec87,#38a56a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media (max-width:1416px){.c-title h1[data-v-6ba6d081]{font-size:2.5em}}.c-title h6[data-v-6ba6d081]{margin:0 0 0 .7em;padding-top:1.6rem;color:#fff;font-size:1em}@media (max-width:932px){.c-title h6[data-v-6ba6d081]{margin:0;text-align:center}}.body[data-v-6ba6d081]{text-align:center;display:flex;flex-direction:column;align-items:center;color:#fff;z-index:5;width:100%;height:664px;padding:0 30px;top:26px;justify-content:space-between;pointer-events:none}@media screen and (min-width:40em){.body[data-v-6ba6d081]{height:700px}}@media screen and (min-width:82em){.body[data-v-6ba6d081]{width:700px;max-width:50%;top:15%;left:50%;height:auto}}.lead[data-v-6ba6d081],.title[data-v-6ba6d081]{max-width:320px}@media screen and (min-width:40em){.lead[data-v-6ba6d081],.title[data-v-6ba6d081]{max-width:366px}}.title[data-v-6ba6d081]{margin-bottom:0;font-size:2rem}@media screen and (min-width:82em){.title[data-v-6ba6d081]{font-size:2.5rem}}.list-wrapper[data-v-6ba6d081]{display:block}.sub-list-1[data-v-6ba6d081]{margin-right:0}.list-cheatsheets[data-v-6ba6d081]{display:flex;justify-content:space-between;padding:0;margin:0}.body[data-v-6ba6d081]{top:40px}@media screen and (min-width:82em){.list-wrapper[data-v-6ba6d081]{text-align:left;display:flex;justify-content:space-between}.sub-list-1[data-v-6ba6d081]{margin-right:3em}.list-cheatsheets[data-v-6ba6d081]{display:flex;flex-direction:column}}.course-playlist-container[data-v-4dae7edc]{position:relative;display:flex;flex-flow:row wrap;z-index:3}.playlist-wrapper[data-v-4dae7edc]{overflow:hidden;width:100%;position:relative}.playlist-wrapper-cards[data-v-4dae7edc]{position:relative;overscroll-behavior-x:contain}.playlist-wrapper-slider[data-v-4dae7edc]{display:flex;overflow-x:scroll;max-width:100vw;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:4rem;padding-left:4rem;scrollbar-width:none;grid-gap:2rem;gap:2rem}@media (max-width:1400px){.playlist-wrapper-slider[data-v-4dae7edc]{scroll-padding-left:1em;padding-left:1em}}@media screen and (max-width:39.9375em){.playlist-wrapper-slider[data-v-4dae7edc]{scroll-padding-left:2em;padding-left:2em;grid-gap:1rem;gap:1rem}}.playlist-wrapper-slider.dragging[data-v-4dae7edc]{scroll-snap-type:none;scroll-behavior:auto}.playlist-wrapper-slider.dragging[data-v-4dae7edc] a{pointer-events:none;cursor:grabbing}.playlist-wrapper-slider[data-v-4dae7edc]::-webkit-scrollbar-thumb{background:0 0}.playlist-wrapper-slider[data-v-4dae7edc]::-webkit-scrollbar,.playlist-wrapper-slider[data-v-4dae7edc]::-webkit-scrollbar-thumb{background:0 0}.playlist-wrapper-slider[data-v-4dae7edc]::-webkit-scrollbar-track{background:0 0}@media (max-width:932px){.playlist-wrapper-slider[data-v-4dae7edc]:after{content:"";width:6rem;height:100%;position:absolute;right:0;background:linear-gradient(-90deg,#001747,rgba(0,23,71,0))}}@media (max-width:932px) and (max-width:400px){.playlist-wrapper-slider[data-v-4dae7edc]:after{width:0}}@media (max-width:932px) and (min-width:1400px){.playlist-wrapper-slider[data-v-4dae7edc]:after{width:12rem}}.long[data-v-4dae7edc]{width:100%}.long .playlist-wrapper-slider[data-v-4dae7edc]:after{content:"";width:6rem;height:100%;position:absolute;right:0;background:linear-gradient(-90deg,#001747,rgba(0,23,71,0))}@media (max-width:400px){.long .playlist-wrapper-slider[data-v-4dae7edc]:after{width:0}}@media (min-width:1400px){.long .playlist-wrapper-slider[data-v-4dae7edc]:after{width:12rem}}@media (min-width:932px){.short[data-v-4dae7edc] .playlist-card{flex-direction:row}.short[data-v-4dae7edc] .coming-soon{left:-6rem}}@media (min-width:1400px){[data-v-4dae7edc] .playlist-card{flex-direction:column!important;width:25rem;max-width:25rem}}.slider-controler[data-v-4dae7edc]{display:none;position:absolute;color:#39b982;right:0;top:-3.5rem}@media (min-width:933px){.slider-controler[data-v-4dae7edc]{display:flex;right:1rem}}.slider-controler .fa[data-v-4dae7edc]{display:flex;width:2rem;height:2rem;font-size:1.5rem;cursor:pointer}.slider-controler .fa[data-v-4dae7edc]:hover{color:#fff}.copy[data-v-4dae7edc]{position:absolute;background:hsla(0,0%,100%,.788);width:206px;padding:16px 30px;z-index:5;left:50%;transform:translateX(-50%) translateY(-100%);top:50%;-webkit-text-decoration:uppercase;text-decoration:uppercase;text-align:center;line-height:22px;box-shadow:0 1px 3px #c1c0c0;font-weight:800}.copy[data-v-4dae7edc]:after,.copy[data-v-4dae7edc]:before{content:"";position:absolute;display:block;bottom:-9px;border:4px solid hsla(0,0%,90.2%,.788);border-bottom-color:transparent;z-index:-1}.copy[data-v-4dae7edc]:before{left:0;border-right-width:4px;border-left-color:transparent}.copy[data-v-4dae7edc]:after{right:0;border-left-width:4px;border-right-color:transparent}i[data-v-4dae7edc]{font-size:28px;color:#fff}.cheatsheets-item[data-v-4dae7edc]{position:relative;display:block;width:20rem;min-width:20rem;max-width:90vw}@media screen and (max-width:39.9375em){.cheatsheets-item[data-v-4dae7edc]{min-width:15rem}}.cheatsheets-item:hover .button.secondary[data-v-4dae7edc]{opacity:1}.card-copy[data-v-4dae7edc]{font-size:1.25em;font-weight:700;padding:0;background:-webkit-linear-gradient(#19aba7,#326f95,#332756);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.card-title[data-v-4dae7edc]{background-color:#fff;width:100%;padding:1rem;position:absolute;top:0}.button.secondary[data-v-4dae7edc]{position:absolute;left:50%;width:10rem;top:50%;transform:translate(-50%,-50%);opacity:0}.banner[data-v-a6b26272]{position:relative;z-index:2;color:#fff}.wrapper[data-v-a6b26272]{padding-bottom:45px;display:flex;flex-wrap:wrap;justify-content:center;overflow:hidden}.title[data-v-a6b26272]{margin-bottom:45px;color:#fff;text-align:center}@media screen and (min-width:40em){.title[data-v-a6b26272]{margin-bottom:90px;font-size:3rem}}.instructor[data-v-a6b26272]{text-align:center;width:337px;max-width:100%;padding:30px;justify-self:center}@media screen and (min-width:40em){.instructor[data-v-a6b26272]{padding:45px}}.instructor h3[data-v-a6b26272]{padding-top:0;font-size:1.15rem}@media screen and (min-width:40em){.instructor p[data-v-a6b26272]{font-size:1rem}}.instructor img[data-v-a6b26272]{border-radius:50%;overflow:hidden;border:2px solid #fff;height:auto}.instructor .img[data-v-a6b26272]{max-width:125px;position:relative;margin:0 auto 30px}@media screen and (min-width:40em){.instructor .img[data-v-a6b26272]{max-width:145px}}.instructor .img[data-v-a6b26272]:before{content:"";position:absolute;width:64%;height:64%;background-repeat:no-repeat;background-size:100%}.instructor:nth-child(3n-1) .img[data-v-a6b26272]:before{background-image:url(/images/teachers/first.svg);bottom:-12%;left:-29%;right:auto}.instructor:nth-child(3n-2) .img[data-v-a6b26272]:befor{bottom:-16%;background-position:100% 100%;right:-19%;left:auto}.instructor:nth-child(3n-3) .img[data-v-a6b26272]:before{background-image:url(/images/teachers/last.svg);right:-15%;top:-23%;left:auto}.testimonials[data-v-89c3a42c]{overflow:hidden;position:relative;z-index:2;padding-top:2rem;margin-bottom:-1px;margin-left:auto;margin-right:auto;max-width:1400px}@media screen and (min-width:40em){.testimonials[data-v-89c3a42c]{padding-top:6rem}}.quote-box[data-v-89c3a42c]{width:29rem;max-width:calc(100% + 1rem);font-size:18px;line-height:1.6;height:100%;display:flex;flex-direction:column-reverse;justify-content:space-between;background:linear-gradient(45deg,hsla(0,0%,100%,.702),#fff);border-radius:8px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid hsla(0,0%,100%,.702);padding:1.5rem}@media screen and (max-width:39.9375em){.quote-box[data-v-89c3a42c]{align-self:flex-start;height:auto}}[data-v-89c3a42c] .agile__slides{scrollbar-color:#39b982 transparent;scrollbar-width:thin}[data-v-89c3a42c] .agile__list{max-width:calc(100vw - 4rem);margin:0 auto}.content-blockquote[data-v-89c3a42c]{overflow:auto;-webkit-user-drag:none;height:100%}@media screen and (min-width:40em){.content-blockquote[data-v-89c3a42c]{overflow:auto;height:100%}}cite[data-v-89c3a42c]{display:flex;flex-flow:row;align-items:center;justify-content:center;margin:0 0 1rem;font-style:normal}cite img[data-v-89c3a42c]{border-radius:40px;width:50px;height:auto;margin-right:1rem;border:1px solid #fff}.controls[data-v-89c3a42c]{position:absolute;width:100%;top:50%;margin-top:3rem;z-index:3;display:flex;cursor:pointer;color:#39b982;justify-content:space-between}.controls .fa[data-v-89c3a42c]{padding:1rem;outline:0}.controls .fa[data-v-89c3a42c]:hover,.title[data-v-89c3a42c]{color:#fff}.title[data-v-89c3a42c]{text-align:center;margin-bottom:45px}.agile{position:relative}.agile--ssr .agile__slides--cloned{display:none}.agile--ssr .agile__slides>*{overflow:hidden;width:0}.agile--ssr .agile__slides>:first-child{width:100%}.agile--rtl .agile__actions,.agile--rtl .agile__dots,.agile--rtl .agile__slides,.agile--rtl .agile__track{flex-direction:row-reverse}.agile :active,.agile :focus,.agile:active,.agile:focus{outline:0}.agile__list{display:block;overflow:hidden;position:relative;width:100%}.agile__track{display:flex;flex-direction:row;flex-wrap:nowrap}.agile__actions{display:flex;justify-content:space-between}.agile--no-nav-buttons .agile__actions{justify-content:center}.agile__slides{align-items:center;display:flex;flex-direction:row;flex-grow:1;flex-shrink:unset;flex-wrap:nowrap;justify-content:flex-start}.agile--disabled .agile__slides{display:block;width:100%}.agile__slide{display:block;flex-grow:1;flex-shrink:0}.agile__slide,.agile__slide *{-webkit-user-drag:none}.agile--fade .agile__slide{opacity:0;position:relative;z-index:0}.agile--fade .agile__slide--active{opacity:1;z-index:2}.agile--fade .agile__slide--expiring{opacity:1;transition-duration:0s;z-index:1}.agile__nav-button[disabled]{cursor:default}.agile__dots{align-items:center;display:flex;list-style:none;padding:0;white-space:nowrap}.agile__dot button{cursor:pointer;display:block;font-size:0;line-height:0}section.bg-wrapper[data-v-0d89f9a0]{height:500px;z-index:3;margin-bottom:1vw}@media screen and (min-width:40em){section.bg-wrapper[data-v-0d89f9a0]{margin-top:4rem}}section.bg-wrapper[data-v-0d89f9a0]:before{background-image:url(/images/pro-tips/background.svg);background-size:100% auto;bottom:-42%}section.bg-wrapper[data-v-0d89f9a0]:after{background:url(/images/pro-tips/ship.svg);background-position:15% bottom;background-repeat:no-repeat;background-size:100%}@media screen and (min-width:40em){section.bg-wrapper[data-v-0d89f9a0]:after{background-size:50%}}@media screen and (min-width:82em){section.bg-wrapper[data-v-0d89f9a0]:after{background-size:652px auto}}.body[data-v-0d89f9a0]{position:absolute;text-align:center;display:flex;flex-direction:column;align-items:center;color:#fff;z-index:3;width:100%;top:50px}@media screen and (min-width:40em){.body[data-v-0d89f9a0]{top:20px}}@media screen and (min-width:82em){.body[data-v-0d89f9a0]{width:700px;max-width:50%;top:100px;left:50%}}@media screen and (min-width:100em){.body[data-v-0d89f9a0]{transform:translateX(-50%)}}.lead[data-v-0d89f9a0],.title[data-v-0d89f9a0]{max-width:278px}@media screen and (min-width:40em){.lead[data-v-0d89f9a0],.title[data-v-0d89f9a0]{max-width:400px}}.brand[data-v-9b94ccc0]{grid-area:brand}.nav-1[data-v-9b94ccc0]{grid-area:nav-1}.nav-2[data-v-9b94ccc0]{grid-area:nav-2}.footer[data-v-9b94ccc0]{background:linear-gradient(#041830,#080117);border-bottom:40px solid #080117;color:#fff;position:relative;padding:100px 0 45px}@media screen and (min-width:40em){.footer.black-friday-2020[data-v-9b94ccc0],.footer.course-path[data-v-9b94ccc0],.footer.courses[data-v-9b94ccc0],.footer.free-weekend[data-v-9b94ccc0],.footer.index[data-v-9b94ccc0],.footer.promotion-slug[data-v-9b94ccc0]{padding-top:200px}}.footer.black-friday-2020[data-v-9b94ccc0],.footer.free-weekend[data-v-9b94ccc0],.footer.index[data-v-9b94ccc0],.footer.promotion-slug[data-v-9b94ccc0]{padding-top:100px;margin-top:-3vw;background:url(/images/footer.svg);background-position:top;background-size:cover;z-index:5}@media screen and (min-width:40em){.footer.black-friday-2020[data-v-9b94ccc0],.footer.free-weekend[data-v-9b94ccc0],.footer.index[data-v-9b94ccc0],.footer.promotion-slug[data-v-9b94ccc0]{padding-top:220px}}@media screen and (min-height:44em) and (min-width:40em){.footer[data-v-9b94ccc0]:not(.no-sticky-footer){position:sticky;bottom:0;z-index:-1}}.footer.pricing[data-v-9b94ccc0]{position:relative}.wrapper[data-v-9b94ccc0]{display:grid;text-align:center;grid-template-columns:1fr 1fr;grid-template-areas:"nav-1 nav-2" "brand brand"}.wrapper[data-v-9b94ccc0] .social{justify-content:center;margin:50px 0 -50px}@media screen and (min-width:40em){.wrapper[data-v-9b94ccc0]{text-align:left;grid-template-columns:1fr 22% 22%;grid-column-gap:4%;grid-template-areas:"brand nav-1 nav-2"}.wrapper[data-v-9b94ccc0] .social{justify-content:left;margin:0}}.brand[data-v-9b94ccc0]{margin-bottom:45px}.brand .logo[data-v-9b94ccc0]{display:block;max-width:284px;min-width:200px}@media screen and (max-width:39.9375em){.brand .logo[data-v-9b94ccc0]{margin:45px auto}}.brand .logo img[data-v-9b94ccc0]{display:block;width:100%}.brand[data-v-9b94ccc0] .button.link{color:#fff;margin-left:10px}@media screen and (min-width:40em){.brand[data-v-9b94ccc0] .button.link{margin-left:0;margin-right:10px}}.social[data-v-9b94ccc0]{display:flex;font-size:1.5em}.nav-1[data-v-9b94ccc0],.nav-2[data-v-9b94ccc0]{justify-self:center}.nav-1 .h4[data-v-9b94ccc0],.nav-2 .h4[data-v-9b94ccc0]{text-transform:uppercase}.nav-1 li[data-v-9b94ccc0],.nav-2 li[data-v-9b94ccc0]{margin:15px 0}.social[data-v-d180769e]{display:flex;font-size:2em;margin-right:1em}.social-wrapper[data-v-fa619f52]{display:flex;flex-flow:wrap;justify-content:space-evenly;padding:0 4% 20px}.body[data-v-fa619f52]{display:flex;flex-flow:column;justify-content:center;align-items:center;padding:16px 4% 0}.body[data-v-fa619f52],.media[data-v-fa619f52]{position:relative}.media[data-v-fa619f52]{overflow:hidden;width:110px;height:125px;margin:0 auto}@media screen and (min-width:40em){.media[data-v-fa619f52]{width:150px;height:165px}}.account-loading-indicator[data-v-780c5c8a]{transform:translate(-50%);left:50%;top:-110%;background-color:#fff;display:flex;padding:20px;align-items:center;grid-gap:10px;gap:10px;min-width:360px;max-width:400px;height:100px;position:fixed;z-index:1000;opacity:0!important;transition:width .5s ease,top .5s ease-in-out,opacity .7s ease-in-out;border-radius:8px;box-shadow:0 0 10px 0 rgba(0,0,0,.2);background-color:#003657;color:#fff}.account-loading-indicator.reveal[data-v-780c5c8a]{opacity:1!important;top:20px!important}.account-loading-indicator .loader-avatar[data-v-780c5c8a]{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:50%;background-repeat:no-repeat;background-color:#022840}.account-loading-indicator .spinner[data-v-780c5c8a]{height:20px;width:20px;border-radius:50%;border-color:#fff transparent transparent #fff;border-style:solid;border-width:3px;will-change:transform;animation:spin-780c5c8a .5s linear infinite}@keyframes spin-780c5c8a{0%{transform:rotate(0)}to{transform:rotate(1turn)}}</style><link rel="preload" href="/_nuxt/static/1744056795/state.js" as="script"><link rel="preload" href="/_nuxt/static/1744056795/payload.js" as="script"><link rel="preload" href="/_nuxt/static/1744056795/manifest.js" as="script"> </head> <body> <noscript data-n-head="ssr" data-hid="gtm-noscript" data-pbody="true"></noscript><div data-server-rendered="true" id="__nuxt"><div id="__layout"><div class="l-container" data-v-0b35c198><div class="l-content" data-v-0b35c198><div role="banner" class="vuemastery-banner-wrapper" data-v-3cb8d4e4 data-v-0b35c198><div class="vuemastery-background-dim" data-v-3cb8d4e4></div> <a id="vm-free-weekend" href="/pricing/?coupon=40off_2025" data-v-3cb8d4e4><div class="vm-free-weekend-wrapper" data-v-3cb8d4e4><div class="vm-free-weekend-content" data-v-3cb8d4e4><h1 class="vm-free-weekend-title" data-v-3cb8d4e4></h1> <p class="vm-free-weekend-sub" data-v-3cb8d4e4> Save 40% on a year of Vue learning </p></div> <button id="vm-banner-cta" data-v-3cb8d4e4>Get deal</button></div></a></div><div class="l-header" data-v-0b35c198><header class="header" data-v-0723b23c data-v-0b35c198><div role="banner" class="wrapper" data-v-0723b23c><a href="/" aria-current="page" class="logo nuxt-link-exact-active nuxt-link-active" data-v-0723b23c><span class="visually-hidden" data-v-0723b23c>Vue Mastery</span><div class="vue-mastery-logo" data-v-0723b23c></div><img src="/_nuxt/image/f8143e.svg" width="240" height="41" alt="Vue Mastery Logo" class="vuemastery-logo" data-v-0723b23c><img src="/_nuxt/image/d26370.svg" width="240" height="41" alt="Light Vue Mastery Logo" class="vuemastery-logo-white" data-v-0723b23c></a><nav role="navigation" aria-label="main navigation" class="navbar" data-v-1a6b7b26 data-v-0723b23c><div class="navbar-main" data-v-1a6b7b26><a href="/courses" data-test="coursesLink" class="navbar-item underline" data-v-1a6b7b26>Courses</a><a href="/learning-path/beginner" data-test="coursesLink" class="navbar-item underline" data-v-1a6b7b26>Learning Paths</a><a href="/blog" class="navbar-item underline" data-v-1a6b7b26>Blog</a><a href="/conferences" class="navbar-item underline" data-v-1a6b7b26>Conferences</a><a href="/pricing" data-test="coursesLink" class="navbar-item underline" data-v-1a6b7b26>Pricing</a><a href="/search" class="navbar-item underline search-link" data-v-1a6b7b26>Search</a></div></nav></div><button class="hamburger" data-v-e40904ca data-v-0723b23c>Toggle menu</button></header></div><div class="l-body no-sticky-footer" data-v-0b35c198><div class="homepage page l-main" data-v-cdd2dbec data-v-0b35c198><section class="bg-wrapper" data-v-a396a1ae data-v-cdd2dbec><div class="bg" data-v-a396a1ae></div></section><div class="playlist" data-v-cdd2dbec><span class="course-playlist-container" data-v-36fece9c data-v-cdd2dbec><div class="front" data-v-36fece9c><div class="playlist-wrapper" data-v-36fece9c><div carousel-ref="playListfeatured-coursesCarouselRef" class="slider-title" data-v-19d4f81c data-v-36fece9c><h1 data-list="Level up your skills with the highest quality Vue tutorials" data-v-19d4f81c>Level up your skills with the highest quality Vue tutorials</h1></div><div class="playlist-wrapper-cards" data-v-36fece9c><div class="playlist-wrapper-slider list" data-v-36fece9c><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/real-world-vue-3-composition-api/building-a-vue-3-app-composition-api" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/Real%20World%20Vue%203%20-%20Composition%20API.webp?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=n9isnNOdWtpTklsFblN%2F4bkiRlbMjif2TZwplyFbNuKaOEwtTw4hqGitJFWnm8GYisM9T6zCM64WVE3XCbM1tntbnmLqLFTQ1RTtdEEx8j04yUndR7yg4ZxMNqw6OW2SqtcmnMATY8CIKEBxPqZ6hG0vUlFI6DhXXq5eIM4%2Bx1z6vU3TJ4F%2Fkahx8RoH6vYAfKKkC2vwoibO0FOyUg%2FlrvlNvllgsZ0qKRHgdIP9l0O4Z5IgByBLR1tvobFpRYwQd69%2Fx3WGNR3ODClNRemJHafMXdgAk6fuE1GfxiteLud8LPZHzB6fygybUo9qqKDcKzW%2BEZ6Yv%2FRQlMx8BTXcyA%3D%3D" alt="Real World Vue 3 (Composition API)" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div><div class="badges" data-v-3e240034 data-v-9f08d576><div class="badge" style="background-color:#835ec2" data-v-3e240034> Vue 3 </div><div class="badge" style="background-color:#00cf79" data-v-3e240034> Composition API </div></div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Real World Vue 3 (Composition API)</h2><p class="playlist-card-content-description" data-v-9f08d576>Learn the fundamentals of building a production-level single page application with Vue 3.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-meta" data-v-9f08d576><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg name="clock" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-ae0cc45a><use xlink:href="/images/spr-feather.svg#clock" data-v-35fb8f3c></use></svg></div><div class="label" data-v-ae0cc45a>1 hr 3 min</div></div><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg viewBox="0 0 24 24" width="24" height="24" class="icon" data-v-5242085a data-v-ae0cc45a><line x1="6" y1="15" x2="6" y2="19" data-v-5242085a></line><line stroke="rgba(0, 0, 0, 0.2)" x1="12" y1="10" x2="12" y2="19" data-v-5242085a></line><line stroke="rgba(0, 0, 0, 0.2)" x1="18" y1="5" x2="18" y2="19" data-v-5242085a></line></svg></div><div class="label" data-v-ae0cc45a>beginner</div></div></div><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462>Adam Jahr</h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/adam-jahr.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=JM1VgCjOt%2B2kM0wxPRjgbbOZ0XWimAtNfWHh4F75maLhGm65L202sfKBk7MkgUlW4kopZDVgCYm7cFRjsax9oTxC7UFEoYpPVC23N7CqQ4voEVpD9nyjQFR2lCDesZhbPjN379gOPEhQBk9%2B9sbKltTh9vizVSnCy1Jp7tpOUMRUVC91JT2%2FKaL968BxuabokwFu9sYOB2qZ5LZLQQ54OxV8DrPciUJdy3zU9q9nMSB5auipH3daJaMe2k9YNI75vnIRAaGG4YJfCBB2pGOP%2FCN%2FsQVNkDDgKJvCa7tiZcCc90xZh2qo9tfLkUJXyWMgsW1UN77pG9eUawUl3NBrMA%3D%3D" alt="Adam" loading="lazy" class="playlist-card-content-footer-author-avatar" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/vue3-deep-dive-with-evan-you/vue3-overview" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue3-deep-dive-with-evan-you_WH_800x424px.webp?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=QCCO%2BjgsJ%2FxEm8X0%2FURBzDBKiuJZc2qZSVAj0a1%2F8hd5bF8INsOUfLvyO3bceqskX81nMXxrFJoFyrocovmRBybVeoexKAjuSHwhw1pLful%2FWjp1CiIhuin6BQhfAxyBOdRKIrlwonPYvptxGmlamOpxTbU1E%2Bk3mJuEQYCdDM5%2B90WS5VM9DOuxt1ttzGzLwpOKtb%2Fjurfqq7bGuPRjHfVToDqcUelSXFLlO%2FTbUQfsdGJYK2OvYGq7B3HYkJuS%2BLZ4lzoTmh8kdowTKxb2RVfXNz8gGIhBt7rYU%2FISS7GTqded1WRjfbf2xButK9MOSTg3aHUVqGlAZqUOtoHUQw%3D%3D" alt="Vue 3 Deep Dive with Evan You" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div><div class="badges" data-v-3e240034 data-v-9f08d576><div class="badge" style="background-color:#835ec2" data-v-3e240034> Vue 3 </div></div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Vue 3 Deep Dive with Evan You</h2><p class="playlist-card-content-description" data-v-9f08d576>Understand Vue 3 from the inside out through the perspective of the creator himself, Evan You.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-meta" data-v-9f08d576><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg name="clock" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-ae0cc45a><use xlink:href="/images/spr-feather.svg#clock" data-v-35fb8f3c></use></svg></div><div class="label" data-v-ae0cc45a>3 hr 7 min</div></div><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg viewBox="0 0 24 24" width="24" height="24" class="icon" data-v-5242085a data-v-ae0cc45a><line x1="6" y1="15" x2="6" y2="19" data-v-5242085a></line><line stroke="" x1="12" y1="10" x2="12" y2="19" data-v-5242085a></line><line stroke="" x1="18" y1="5" x2="18" y2="19" data-v-5242085a></line></svg></div><div class="label" data-v-ae0cc45a>advanced</div></div></div><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462>Evan You</h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/evan-you.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=FUcAb3jANamZ2h7axm38YOn4FZAAH%2BiCr4Fjnp0h1KGEmhP%2FpZ%2BT9oXCW2HJ2MXiqMf71QFVd4X1rfogjAlPQyGGUsTx1sPdIgzCkF5KeL1qqISzllJ36KrXmX3w098rHBkDLEvgJ%2BSv9PaZGR2WtZzM%2BRsgSc%2BhrNO5ybTcFQGWB9N3R1dGE0V5yUvQ33FpLu2VHGHsEvIipG5CH%2BcPEoQg9CTh0xI4nhNwQWGUMJoYGaxNRLT4Gee0rVkrV%2FJjKfFkjdk%2B49U2ivWm9VEoSjBfcqlo8TPPqvEkrKbEw9jfu8SY4e4J%2FllbkIyx1mqm2pAQHnRE3J78dEHTHU6Yiw%3D%3D" alt="Evan" loading="lazy" class="playlist-card-content-footer-author-avatar" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/lightning-fast-builds-with-vite/intro-to-vite" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/lightning-fast-builds-with-vite_WH_800x424px.webp?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=ZGrQ52eKszpfm%2FMrI60k7XNiAiSX4BEM0QUiVKhmtoSRgf5%2FGw0hCDwEY9t54Rq6it3ZrWP87ecBuPxYPkwtn5rw2JdGVbeT0r4qfizya6BSJP5S5PHXGpQv%2FF%2F3wI5ZVzQsWz1GC8wO4N7v0xn%2BdQHWTFVJ6%2BoOyi8%2FZdQ9RizyNiRrBb7MW98tex6Aa3manten9bfg4TLFtqCJOqD0L1%2F0WoSRLOJ0EmWYu7lYxqEV%2BJEFPofpEJ3TOa4Q0V2Tod6WHcWjLODQV6avBX2CeEX6MDCKzmvntz%2FenCamsV7R%2BkgFzIbj2I1G9QokKH6o3CJY26CLedj28gmNNwCyag%3D%3D" alt="Lightning Fast Builds w/ Vite" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Lightning Fast Builds w/ Vite</h2><p class="playlist-card-content-description" data-v-9f08d576>Learn about Vite, the lightning-fast and lean build tool and dev server, billed as the next generation of front end tooling. Taught by its creator, Evan You.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-meta" data-v-9f08d576><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg name="clock" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-ae0cc45a><use xlink:href="/images/spr-feather.svg#clock" data-v-35fb8f3c></use></svg></div><div class="label" data-v-ae0cc45a> 44 min</div></div><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg viewBox="0 0 24 24" width="24" height="24" class="icon" data-v-5242085a data-v-ae0cc45a><line x1="6" y1="15" x2="6" y2="19" data-v-5242085a></line><line stroke="rgba(0, 0, 0, 0.2)" x1="12" y1="10" x2="12" y2="19" data-v-5242085a></line><line stroke="rgba(0, 0, 0, 0.2)" x1="18" y1="5" x2="18" y2="19" data-v-5242085a></line></svg></div><div class="label" data-v-ae0cc45a>beginner</div></div></div><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462>Evan You</h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/evan-you.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=FUcAb3jANamZ2h7axm38YOn4FZAAH%2BiCr4Fjnp0h1KGEmhP%2FpZ%2BT9oXCW2HJ2MXiqMf71QFVd4X1rfogjAlPQyGGUsTx1sPdIgzCkF5KeL1qqISzllJ36KrXmX3w098rHBkDLEvgJ%2BSv9PaZGR2WtZzM%2BRsgSc%2BhrNO5ybTcFQGWB9N3R1dGE0V5yUvQ33FpLu2VHGHsEvIipG5CH%2BcPEoQg9CTh0xI4nhNwQWGUMJoYGaxNRLT4Gee0rVkrV%2FJjKfFkjdk%2B49U2ivWm9VEoSjBfcqlo8TPPqvEkrKbEw9jfu8SY4e4J%2FllbkIyx1mqm2pAQHnRE3J78dEHTHU6Yiw%3D%3D" alt="Evan" loading="lazy" class="playlist-card-content-footer-author-avatar" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/coding-better-composables/what-is-a-composable" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/coding-better-composables_WH_800x424px.webp?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=YbFGUWf6aaZWdf00g%2F1ok3ueqxqzz%2BywllZYKXbhfKLcqNABYRI8dfXTu9lVY%2FNwwT5oQCbZqHJSO7yPCd7MwOKhjBsyoixtsjDERUvBxYlOwlmTzV3SH84n08Jx3sgnBwNEdvQnNPXHb9Fkul0NuxelZM9olhYd2C9v2mG8fOD35xaXEAx3qLY%2FSHjEwHGEFk%2FpyHuroAYGXwHKDhmKc7L2W6%2BtGouG5COzT3ypbZTSIKTCFCHkJlcJ9qV3C4qvpCoW8iL8MUzD2s1ctCFzyljO4%2BHD5xGAhpx%2BbYDjxXDvVkTsvdt1FRMlpfvk94k6ZWWUDXl%2Ff9gK%2F%2B0wh1UxCA%3D%3D" alt="Coding Better Composables" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div><div class="badges" data-v-3e240034 data-v-9f08d576><div class="badge" style="background-color:#835ec2" data-v-3e240034> Vue 3 </div><div class="badge" style="background-color:#00cf79" data-v-3e240034> Composition API </div></div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Coding Better Composables</h2><p class="playlist-card-content-description" data-v-9f08d576>Learn how to write scalable Composables based on best practices from the popular VueUse library.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-meta" data-v-9f08d576><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg name="clock" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-ae0cc45a><use xlink:href="/images/spr-feather.svg#clock" data-v-35fb8f3c></use></svg></div><div class="label" data-v-ae0cc45a> 28 min</div></div><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg viewBox="0 0 24 24" width="24" height="24" class="icon" data-v-5242085a data-v-ae0cc45a><line x1="6" y1="15" x2="6" y2="19" data-v-5242085a></line><line stroke="" x1="12" y1="10" x2="12" y2="19" data-v-5242085a></line><line stroke="rgba(0, 0, 0, 0.2)" x1="18" y1="5" x2="18" y2="19" data-v-5242085a></line></svg></div><div class="label" data-v-ae0cc45a>intermediate</div></div></div><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462>Gregg Pollack</h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/gregg-pollack.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=QKF7a7jypwiWYQup0BY1FiYSByTAt2axAjUlhulKy%2F%2B18kHDZIg5bIPfnZwyBV9aOTQB9Y1bvI%2B71pjc0GGXFe8LR84QPiGoXiyYBJxgJVRtcA6F28QZZZ5BMurwBxQkyXmIRH4ZRvXg7e3BPwcOjEqzaOU39GGCZ3aWv5z0EzPG7Tpk%2F1XXUvJoOQPyPNXD1xfK9hCN9qGLcQokPccvAf%2BPLtmt%2BV1tyv7o%2BFj9UgE9cieqQqDGky3%2BDdQ%2B48zVBHVcxhzohTZIJwGLSvLbb%2FgZ3UEOBDVYqPTQBXLfVaPgEtSr%2BC5sx889Sknjt87UfNTKKRUYe8Oz5df92Zrpog%3D%3D" alt="Gregg" loading="lazy" class="playlist-card-content-footer-author-avatar" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/from-vuex-to-pinia/what-is-pinia" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/from-vuex-to-pinia_WH_800x424px.webp?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=R2ifrsexw2slldHD41SgqkbvCeFJNz5VOBnxuy%2B3YLET32NY3tTsKpPwIJpfmWsJnx6xnnUOcnaI2J%2F8rOtGaMw9ILk4KANS%2BoChH1IEBElcMqgDvDXnL26pViz%2B9QryXm%2F58Py0LutfJ5%2FzCBloY4JWW1rtRyzJ77kYb8BH5sOzbvxKGUmim7QhaHQXLrvFFFyqID%2B%2FqxFZ07381dLxPnmo7o%2F84TUapmSSuFDRWpgIAK47n6UeFs%2F9Tj5WQs93MD2lZPF8j%2BfRHceD2KkANY1fTaWFz%2FSD2BvkH2SungkCfxCO%2BXtZbVKmX76tiR0yB8PpWzNUQ5N2ZyptsKUoQQ%3D%3D" alt="From Vuex to Pinia" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div><div class="badges" data-v-3e240034 data-v-9f08d576><div class="badge" style="background-color:#835ec2" data-v-3e240034> Vue 3 </div><div class="badge" style="background-color:#00cf79" data-v-3e240034> Composition API </div></div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>From Vuex to Pinia</h2><p class="playlist-card-content-description" data-v-9f08d576>Transition your state management from Vuex to Pinia with the guidance of a Vue Core Team Member.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-meta" data-v-9f08d576><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg name="clock" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-ae0cc45a><use xlink:href="/images/spr-feather.svg#clock" data-v-35fb8f3c></use></svg></div><div class="label" data-v-ae0cc45a> 26 min</div></div><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg viewBox="0 0 24 24" width="24" height="24" class="icon" data-v-5242085a data-v-ae0cc45a><line x1="6" y1="15" x2="6" y2="19" data-v-5242085a></line><line stroke="" x1="12" y1="10" x2="12" y2="19" data-v-5242085a></line><line stroke="rgba(0, 0, 0, 0.2)" x1="18" y1="5" x2="18" y2="19" data-v-5242085a></line></svg></div><div class="label" data-v-ae0cc45a>intermediate</div></div></div><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462>Ben Hong</h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/ben-hong.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=slnKhELL0RBsvErX4n2EkgzFnCUWKnFn2w%2BTUWbI5E0Ciqu5Mr9NeBMolESgC98%2FifgCBcHRf8CPPg0JzDeswDgDFWPcsfpaSexoiU67NE4o3IwKNaBMSVdQl4eQjs5HUliaaEjDiNOf5MO9HO9KFxf7hcBzvdbVsujVEiumNF7PbVsSoKqet77eslEaix2egXu0m8BP3aYpfJitWpsCl1x6gwEl38I58WeBaG65qrcqvneaWrZvZ1ch1Eg%2BC0d6%2BcOR9VeWm%2FhhiAx9i0FDThWxfLmSRZs5MnLBBHr%2BtFxfQm%2BCRBW2EmNQuGn%2BsVWhMMYqeWBo3dz6op0ebFqXGg%3D%3D" alt="Ben" loading="lazy" class="playlist-card-content-footer-author-avatar" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/nuxt-3-essentials/nuxt-3-overview" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/nuxt-3-essentials_WH_800x424px.webp?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=GXI%2BKDjmBtzmfeKkLanpgW2r0fwBWHgj8%2BjprC7CNRIMXHx6q4pHzoEFJz%2FWVNmjz%2B98ya3QP9PcKWo7u4uW8yoyted1pdGb4e0wa7Wx8xNguyrPkpUiDct0QaSy4Lv%2FP5YTmvHYPzVoK0lVLeGo0gNk82U8hM5Q0GbbsipomdgCpRlv1cWOJTfVdrk262H4eNqwmSIs6u6%2BPpK9p8Je2YilJXFrs6aA9vBc3CcyFKmVxCc%2BBWmrIe2TeM0SGYmy1LyKGe6o7yXNHSPwIS2jsQDE%2F2vybHGdczL4xI64UYfbwZ3BH1D0v3wwowAe2vGiOyXYMbwrq2QSvyFvUhGWMw%3D%3D" alt="Nuxt 3 Essentials" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div><div class="badges" data-v-3e240034 data-v-9f08d576><div class="badge" style="background-color:#835ec2" data-v-3e240034> Vue 3 </div><div class="badge" style="background-color:#00cf79" data-v-3e240034> Composition API </div></div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Nuxt 3 Essentials</h2><p class="playlist-card-content-description" data-v-9f08d576>Learn this intuitive framework that includes built-in tools and structure to build Vue apps that can scale.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-meta" data-v-9f08d576><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg name="clock" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-ae0cc45a><use xlink:href="/images/spr-feather.svg#clock" data-v-35fb8f3c></use></svg></div><div class="label" data-v-ae0cc45a> 22 min</div></div><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg viewBox="0 0 24 24" width="24" height="24" class="icon" data-v-5242085a data-v-ae0cc45a><line x1="6" y1="15" x2="6" y2="19" data-v-5242085a></line><line stroke="" x1="12" y1="10" x2="12" y2="19" data-v-5242085a></line><line stroke="rgba(0, 0, 0, 0.2)" x1="18" y1="5" x2="18" y2="19" data-v-5242085a></line></svg></div><div class="label" data-v-ae0cc45a>intermediate</div></div></div><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462>Steve Edwards</h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/steve%20edwards.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=JXwutlavzV1NG%2BEueTHAjkoqnyr8OIkm0V1XgP26XfCCBcqgYYEDEv%2Fmm5CrexyUNS3S7kAhrenGqIAaGEJu5bMHgRa%2BA9ENPf6aT2upV0YFbWQwefTWQ9W04vXN0az0nuel0AYi4PK3ZVU4VT6AIDqtnH8WYleNF31uM0O2b6MEsU8kBa61%2Ft0WpiBvIO1CGokNmP89M0wWMZo%2FiT5CH8Wwh3Uwc9V9hTBBAMiUDJxFBbN2iwBBAaF43dFbrnQbRh%2FfiNpOxeTGmxl2Gaxie947aAdI2SWN3LQPGtC%2BepJsZw2GBtIitEKnOPtA4er8uWyckaRyM4a57RTkQrw5kA%3D%3D" alt="Steve" loading="lazy" class="playlist-card-content-footer-author-avatar" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/vue3-forms/forms-introduction" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue3-forms_WH_800x424px.webp?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=jZ1atf7KJRZQUZw8QpMGD5smKbMnR2mMF6ETB%2BvKVJCaa5sF6Bi%2Bz49v9IssHe10OF5rtBk5VGZ6ztiWw%2BgOIogtfDpCEj7zkzXpy2xOlngcgf9DsgC3Jify0SoCcVZqnk8hZ%2BBtXtrNTaXRVWkyYe%2Fbekwlfv6sCX1Idi248Jjw99lp9yREQWsZzOXy%2BVZLVGjuKKQwv%2FoUAA5eGimmkfLrldVvJ6GaJt1BcRwU%2BkILYuE90K6fPFzDw4URfHlcpzEGI1rbxqsdbwkTfdCI56c4sZIRYS34%2BayJD%2BkCIWe%2FQf7xs3KnIDjI%2BPtbH%2FJ2IXeZqmzKDbyJJnIkwuq6XQ%3D%3D" alt="Vue 3 Forms" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div><div class="badges" data-v-3e240034 data-v-9f08d576><div class="badge" style="background-color:#835ec2" data-v-3e240034> Vue 3 </div></div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Vue 3 Forms</h2><p class="playlist-card-content-description" data-v-9f08d576>Create simpler and more powerful reusable forms with Vue 3.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-meta" data-v-9f08d576><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg name="clock" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-ae0cc45a><use xlink:href="/images/spr-feather.svg#clock" data-v-35fb8f3c></use></svg></div><div class="label" data-v-ae0cc45a>1 hr 25 min</div></div><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg viewBox="0 0 24 24" width="24" height="24" class="icon" data-v-5242085a data-v-ae0cc45a><line x1="6" y1="15" x2="6" y2="19" data-v-5242085a></line><line stroke="" x1="12" y1="10" x2="12" y2="19" data-v-5242085a></line><line stroke="rgba(0, 0, 0, 0.2)" x1="18" y1="5" x2="18" y2="19" data-v-5242085a></line></svg></div><div class="label" data-v-ae0cc45a>intermediate</div></div></div><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462>Marina Mosti</h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/marina-mosti.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=CO2C9%2BvaY4HAphJ%2B%2FDQ6q9ZKB5TbTL875Xl%2F9KUerdicWaAJFEJHI4LNPXrrGA%2F67a4kse0%2BbZEWJ8t65sXLAfwDFwpBI3KMdcjEgzzE2AWrrJXNCrRLrbJjkWrxsTTCAZaLZkrfEJr8a%2BZ16KFYUpy2%2B6vzZKn6A%2BFH0kZs6SiomhXjP9mEP8nPmt7JqCy3s2uuY4H4kWfMyj0Od1gSbd7IXK8d98SytK71vGBPom%2Fm8e3eyJXSfTB0lht%2Blrjhk1U%2FLsbrVuT6PtxHdVsqDD2G1K4dvz6hYjUioGSLmAhuIt4zFcpYkUDFuU8OBYuMkmY3xJR7xjLyjYsAr9f%2F2g%3D%3D" alt="Marina" loading="lazy" class="playlist-card-content-footer-author-avatar" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/typescript-friendly-vue3/introduction-to-the-script-setup-syntax" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/typescript-friendly-vue3_WH_800x424px.webp?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=Sj1pH5d%2Fwn9dhbaqp9pyeeZtXT8%2B364Jvad80tJ11q%2B0js0J6MvcLrY%2BZPs6vFmsaNStIC5dbXW%2FUGz7XlVnQltzl3iNZrCM15ZxfofK%2BpIuiOYxfqkumWA5u6lpz1oUyVYNUOU%2Fl%2B5rXncjsHyUHT9MJ5yn2n4WD9vnR%2Fi8kdDhVesiw305HXIplkMsA1Roo0tD6y1MZOOQyYzCo1C9%2BtECetsJ1IJbbvzCMwaWzSonrafOSrRPGNTfW5Wc30fLDOEHDv07pbeqvS9fChhswAeRRSLzXJfBSc6QUBPgbXLPd1HUkg8K%2FCeuAMUiBgclwJFfqjAxwyRGj%2BDo8aXIfQ%3D%3D" alt="TypeScript Friendly Vue 3" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div><div class="badges" data-v-3e240034 data-v-9f08d576><div class="badge" style="background-color:#835ec2" data-v-3e240034> Vue 3 </div><div class="badge" style="background-color:#00cf79" data-v-3e240034> Composition API </div></div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>TypeScript Friendly Vue 3</h2><p class="playlist-card-content-description" data-v-9f08d576>Get a better developer experience when using TypeScript in your Vue 3 apps by leveraging the script setup syntax.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-meta" data-v-9f08d576><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg name="clock" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-ae0cc45a><use xlink:href="/images/spr-feather.svg#clock" data-v-35fb8f3c></use></svg></div><div class="label" data-v-ae0cc45a> 24 min</div></div><div class="icon-text-wrapper" data-v-ae0cc45a data-v-9f08d576><div class="icon-wrapper" data-v-ae0cc45a><svg viewBox="0 0 24 24" width="24" height="24" class="icon" data-v-5242085a data-v-ae0cc45a><line x1="6" y1="15" x2="6" y2="19" data-v-5242085a></line><line stroke="" x1="12" y1="10" x2="12" y2="19" data-v-5242085a></line><line stroke="rgba(0, 0, 0, 0.2)" x1="18" y1="5" x2="18" y2="19" data-v-5242085a></line></svg></div><div class="label" data-v-ae0cc45a>intermediate</div></div></div><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462>Andy Li</h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/andy-li.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=aGjXuQIY5JZk1wA9nKMVJT7GXjNE5vl7PeH5m3TwYkdmzYjZ3sU85QaWtNzOWxLCtJoU8OqhAPPMQcbwUFftJWKKgQwP%2FfhIhsJ92D8Dkgr4kEXx3XkH26nbjZ8KwvHnKBSLnflzyExiUl4rebRz39NUB9ZsIDir%2FklLTNAh0DzjiofwA2e0iJ3AFn0WSS9u1kN4K8mKadr3F9aLlkMMfmL00d1EAdXFzik43UnEK0c6y3sF0UioIAwcMC%2BFvxSMvtqrfJISoux0cNHxEwewq3BGeq%2FsOfyKrV%2BvTWX1g6a1ti7Z0n%2FijJqGNM5Kw3fpdhXRsHYOBahFaGQUyq2wZQ%3D%3D" alt="Andy" loading="lazy" class="playlist-card-content-footer-author-avatar" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div></div></div></div></div><div class="front" data-v-36fece9c><div class="playlist-wrapper" data-v-36fece9c><div carousel-ref="playListfeatured-lessonsCarouselRef" class="slider-title" data-v-19d4f81c data-v-36fece9c><h1 data-list="Featured Lessons" data-v-19d4f81c>Featured Lessons</h1><div class="h6" data-v-19d4f81c>Free tutorials</div></div><div class="playlist-wrapper-cards" data-v-36fece9c><div class="playlist-wrapper-slider list" data-v-36fece9c><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/from-vuex-to-pinia/what-is-pinia" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/What%20is%20Pinia%20704.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=aLxyde%2BoU0zBxWE1dgdxl7FaYUOn9G6mzxfbCIFnXVr7eFXcC5dzLI2Dl2gBdqsDSOy4pO74NP1YanuSymV5PAo19sy%2FyhhTlURnyoQiPVSfzfYyXJM1nhTP5KWk7Il9kPYHqlSbApb6rBN4hwFMcMS1YgNtebW9C9TO4C5ebl5lqwhKiGGlUkRjscLplmo1vlLfnysRsBkBILNypxu55n%2F48tGZrwMGGRcT3NPer7OyvGrlBO3rUxHfepGXDwha9VHSxIbuktad7rXKjiADYYEis7v2BpPeQgEOBzEYPEmz7OT7gyNrwnsnG49Nwg80QRm7UwfeUASM6ljroenlEw%3D%3D" alt="What is Pinia?" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>What is Pinia?</h2><p class="playlist-card-content-description" data-v-9f08d576>Learn Vue 3’s new elegant state management library built upon the composition API</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462></h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/lightning-fast-builds-with-vite/intro-to-vite" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/Intro%20to%20Vite%20704.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=xS4IymEow9FeUyJWMbNg6Ps3Osf9AUto9tQeHvUnlRQqymWOkeE401ioGr89GqQvkokFyf9zIimAQAwGQiVP1ZWwHrNSsEPpmJNniy17FQhxM0OOqQ759iQnjarLxIhvtxlpz6vLjbpHDzKcs3Kj1xMOFqnxV62rDHgkkR1KYMzmKQFqsVsVE%2FWD945wCQJC%2BWEj99%2FzCOnj0q0%2BBjS94LKLqyDoMtLidk9Hjbwrog7NOqMaKZobnpU2ZtYVs%2FSGCNq84tDpl9a%2FB7rSweDrW0p1MYEFZt4Eao2wjzlysbEaUA3Qs6KEtDThsbm3%2FjLsCAFkVcg3jLpW2WTy7nebcw%3D%3D" alt="Intro to Vite" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Intro to Vite</h2><p class="playlist-card-content-description" data-v-9f08d576>Vite Creator Evan You shares why he created this modern build tool and how it's the next generation of front-end tooling.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462></h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/coding-better-composables/what-is-a-composable" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/What%20is%20a%20composable%20704.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=bhrjPj1A1XDLNtbigS3EetX0Bz7lKN36VUmA9SDLa6v90rVfM0x%2BKkuISF63o4a7tPQje5tA7o6sAYq%2BupU5LgBgqAncLcm0GLKXFZpGK4O%2B9uacePrskujmADzh5S7e8P7VAIZEc%2FRQGXehmPy3ClaeIh6NcM%2BGUOH5Zw6SrXNCh15O6xvdbUZtMU72%2BYMdKXlmTO%2FX7LeqLzRTzadGv6qjeQmO94sjbvp4fZ2WWuGPcLeSeXOPWhzf68TseYmo9Qb39lruppWa%2BcKry6JBjXiieLuOHiunnRwpuU095ZyHhitoYVld59Yh7ANT02qMh6c%2BzsMPHSYfmI%2BKuijVCg%3D%3D" alt="What is a Composable?" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>What is a Composable?</h2><p class="playlist-card-content-description" data-v-9f08d576>Composables allow us to craft well organized, transparent, and highly reusable pieces of reactive code. They're similar to React’s Hooks.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462></h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/intro-to-vue-3/intro-to-vue3" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/Intro%20to%20Vue%203%20704.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=hCCUcy3JtZduEM0eYTiaUjZO%2Fb78AuEcxEDMcymEELqxbvAtVj4D9tzOXgYDy0LDgSQbDdRu6bnCzbdCekaAC0Nid8pQFNEf3inRqRCOYlwDznVlIVX9hrr2%2B%2BMWGLAcWDS%2FWZ9GiM2jWMzfljMiFsNuw%2FnfAmLpUJRrLOwO1lxakX9cBem%2FX4%2BO%2B5X2cQ%2Fs6fAdsNH6zOCjwh1TaU3a78EGRiNWD8O4Bh0K8TLcCnuZWLMZxRZ39Oe6EIJsA2cDesNsApnOd2ehAcbcRUC82TaKQh4Ihgoyp5%2B1Nj2UqZh0VJQ61VLxY%2B57rQ3KYsQubtf1gZfYCl9npP2uQvCKWA%3D%3D" alt="Intro to Vue 3" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Intro to Vue 3</h2><p class="playlist-card-content-description" data-v-9f08d576>Brand new to Vue? Start learning the basics in this lesson that explores the essential syntax.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462></h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/vue3-deep-dive-with-evan-you/vue3-overview" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/DD1-main.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=dhUzqcK33aIiOEj3FZJRbFFCndhjhh1PtNNQ557oy1rM%2FYFa%2Bo%2BW%2FZrG6OCkOcsHMvgoXJo4JB3a2OkHT5YzdGEU4eUqBXjI7qfsEY3xZHfNxCp%2BacSzRktcxErRGTmMkyQEnT1HXBK0bGKJuEcVzUzyhLxEmP%2FJI0ow%2BG%2BmLVpgkRW0L7GGxh%2BWdrgqxY%2BF%2FDd2N2zLs3O7fWw41mFw171bH9M96Kmycdv%2F9D5jluphRF2prgEHsuW1Hs3sysOpb7IsCyQwNzoK0y1aBFWtIsaX%2FzQhSKtUaXMq0s7sANcCv1LlHXpKYt3rPR%2FNjxpFzLfd9MTFwjQs2ZeubIH%2F6Q%3D%3D" alt="Vue 3 Overview" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Vue 3 Overview</h2><p class="playlist-card-content-description" data-v-9f08d576>Gregg Pollack introduces how Vue 3's core modules work together, to prep you to dive deep into Vue 3 concepts with Evan You.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462></h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/querying-with-graphql/intro-to-graphql" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/Intro%20to%20GraphQL%20704.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=eUpeiPgbnJL3EP%2BsyQ4kiky2mqtiB0jC29jENsqiSKrmHXhDB8aITC9RXwKA7WfegEq4oPmqc%2BJgw9XYS%2BIchZMEGtW%2Bqcm6JbMDzQcfAQ3HfrhKKQ3y%2BcPKtJQiDOEt%2BQdjB2lhd4u6qzHXlW1be9Xn0JuV%2FdU2TOwd%2Fk25uEsIWIaztucmSMSkP4ygyCwu1B%2BVEr6gXJZIFbXYiA9WHZcSEI9XiraLnbPd6F8Ku7MMyu%2BGwKs6bI7qLxMpmRWgVyCoNn8tkrSoTih61UBEsQUrVh0XKcdDOcAUtRmcR5Hs8eMEit94NFWMr6PikD2zOU4Bp8s6ydNXsi87IaGceA%3D%3D" alt="Intro to GraphQL" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Intro to GraphQL</h2><p class="playlist-card-content-description" data-v-9f08d576>Learn the problem with traditional REST APIs and how GraphQL solves it by offering a modern, flexible solution.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462></h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/vue3-typescript/why-vue-and-typescript" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/Why%20Vue%20%26%20Typescript%20704.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=THhX6VLBOqyN1sqwrFVJCdsjBwaLcw7uQQFQkaE%2BFNvIeZ%2FFn8yg1GVB3CQjTsUchPXZBb%2F5COqHTRWeGS8vDv%2FFc0rtKTXWLhLfIUk%2FhXgexq%2FcRDenTXE4xUgwkkAw64Qo%2BMLSWcyVtJCIQwYcVPGeIidlSJ2LRRPnWha6XCPUgno%2F8gfHsE7chcTowGyxweClxXNB8H8rKS%2B3DJAAhKTuW1u3py2pnZ92T%2Fw0mCBMkw3A1zudQ74H5KFAfgTqJrEgd6Cl%2FD1bbZdisiD3hZJtTqFW9KOUX7gyP6j%2F%2BkpfkIBldILVByrwx6XzsHeJ6V8bz7GKdWxgx2Hvk20dCA%3D%3D" alt="Why Vue & TypeScript" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Why Vue & TypeScript</h2><p class="playlist-card-content-description" data-v-9f08d576>Considering adding TypeScript to your Vue project? Explore the considerations to take in this lesson.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462></h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div><div class="playlist-card-item-wrapper playlist-card-agile" data-v-6144f90f data-v-36fece9c><div class="playlist-card-item-progress-container" data-v-6144f90f><div class="playlist-card-wrapper" data-v-6144f90f><a href="/courses/real-world-vue3/rwv3-orientation" class="playlist-card" data-v-9f08d576 data-v-6144f90f><div class="playlist-card-media" data-v-9f08d576><div class="course-badge" style="background-color:#17244c" data-v-d60e5cbc data-v-9f08d576><img src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/Building%20a%20Vue%203%20App%20704.jpg?GoogleAccessId=firebase-adminsdk-jyioc%40vue-mastery.iam.gserviceaccount.com&Expires=16725225600&Signature=csG4OAfACmu7%2BhjwQgo%2FPgzrqix0%2B8pMXV1GvRQ6W0bEYRtr%2BQmBU2czkKEvElIPT%2Fhb%2FMMjVBr8nNCEFuv6s7FErgry5SKrT1VX4baTot0rbroEoSSUJi5meWWsuDbeyppXWdR8hbiMNoNbnkDZFlYHs0ATSZJHofxFN%2F9SchPWukbtkRuURhNqL58cPmuiWbRIJTnaGVeeT6lnCOavfGCLUfwQGQgRmuLZy0YGAWskZcKKFr6y%2F8eczQhC1WuP9bg5s4uKtqIJHXDGe%2FUnrFEt8cZhjjtklv4ALIQ5I%2BhVo9K7UQn03nu%2Foi9oWKB6VDRRCvaTqtMi2ctiXcAogw%3D%3D" alt="Building a Vue 3 app" width="400" height="212" loading="lazy" data-v-d60e5cbc> </div></div><div class="playlist-card-content" data-v-9f08d576><div data-v-9f08d576><h2 class="h4 playlist-card-content-title" data-v-9f08d576>Building a Vue 3 app</h2><p class="playlist-card-content-description" data-v-9f08d576>Starting building a production-level app using Vue 3.</p></div><div class="playlist-card-content-footer" data-v-9f08d576><div class="playlist-card-content-footer-author" data-v-3b9a6462 data-v-9f08d576><div class="playlist-card-content-footer-author-content" data-v-3b9a6462><h3 class="h4 playlist-card-content-footer-author-name" style="width:min-content" data-v-3b9a6462></h3><div class="playlist-card-content-footer-author-date" data-v-3b9a6462></div></div><div style="display:flex" data-v-3b9a6462></div></div></div></div></a></div><div class="playlist-card-progress" data-v-6144f90f></div></div></div></div></div></div></div></span><a href="/courses" class="button modern border -small -plain" data-v-cdd2dbec>Explore more courses</a></div><section class="c-cheatsheet index" data-v-6ba6d081 data-v-cdd2dbec><div carousel-ref="playListCheatSheetCarouselRef" class="slider-title" data-v-19d4f81c data-v-6ba6d081><h1 data-list="Download the cheatsheets" data-v-19d4f81c>Download the cheatsheets</h1><div class="h6" data-v-19d4f81c>Save time and energy with our cheat sheets.</div></div><div button-class="inverted" class="course-playlist-container" data-v-4dae7edc data-v-6ba6d081><div class="playlist-wrapper" data-v-4dae7edc><div class="playlist-wrapper-cards" data-v-4dae7edc><div class="playlist-wrapper-slider" data-v-4dae7edc><a index="0" href="#createAccount" download class="panel cheatsheets-item" data-v-4dae7edc><img src="/_nuxt/image/1b187b.webp" width="320" height="448" alt="Vue 3 Essentials" loading="lazy" data-v-4dae7edc><div class="card-title" data-v-4dae7edc><div class="card-copy" data-v-4dae7edc>Vue 3 Essentials</div></div><button class="button secondary -full" data-v-4dae7edc><svg name="download-cloud" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-4dae7edc><use xlink:href="/images/spr-feather.svg#download-cloud" data-v-35fb8f3c></use></svg>Download</button></a><a index="1" href="#createAccount" download class="panel cheatsheets-item" data-v-4dae7edc><img src="/_nuxt/image/23f999.webp" width="320" height="448" alt="Nuxt" loading="lazy" data-v-4dae7edc><div class="card-title" data-v-4dae7edc><div class="card-copy" data-v-4dae7edc>Nuxt</div></div><button class="button secondary -full" data-v-4dae7edc><svg name="download-cloud" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-4dae7edc><use xlink:href="/images/spr-feather.svg#download-cloud" data-v-35fb8f3c></use></svg>Download</button></a><a index="2" href="#createAccount" download class="panel cheatsheets-item" data-v-4dae7edc><img src="/_nuxt/image/ada328.webp" width="320" height="448" alt="Vue 3 Migration Guide" loading="lazy" data-v-4dae7edc><div class="card-title" data-v-4dae7edc><div class="card-copy" data-v-4dae7edc>Vue 3 Migration Guide</div></div><button class="button secondary -full" data-v-4dae7edc><svg name="download-cloud" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-4dae7edc><use xlink:href="/images/spr-feather.svg#download-cloud" data-v-35fb8f3c></use></svg>Download</button></a><a index="3" href="#createAccount" download class="panel cheatsheets-item" data-v-4dae7edc><img src="/_nuxt/image/ebb7d7.webp" width="320" height="448" alt="Vue 3 Composition API" loading="lazy" data-v-4dae7edc><div class="card-title" data-v-4dae7edc><div class="card-copy" data-v-4dae7edc>Vue 3 Composition API</div></div><button class="button secondary -full" data-v-4dae7edc><svg name="download-cloud" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-4dae7edc><use xlink:href="/images/spr-feather.svg#download-cloud" data-v-35fb8f3c></use></svg>Download</button></a><a index="4" href="#createAccount" download class="panel cheatsheets-item" data-v-4dae7edc><img src="/_nuxt/image/98dbc0.webp" width="320" height="448" alt="Vue Router" loading="lazy" data-v-4dae7edc><div class="card-title" data-v-4dae7edc><div class="card-copy" data-v-4dae7edc>Vue Router</div></div><button class="button secondary -full" data-v-4dae7edc><svg name="download-cloud" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-4dae7edc><use xlink:href="/images/spr-feather.svg#download-cloud" data-v-35fb8f3c></use></svg>Download</button></a><a index="5" href="#createAccount" download class="panel cheatsheets-item" data-v-4dae7edc><img src="/_nuxt/image/26336a.webp" width="320" height="448" alt="Pinia" loading="lazy" data-v-4dae7edc><div class="card-title" data-v-4dae7edc><div class="card-copy" data-v-4dae7edc>Pinia</div></div><button class="button secondary -full" data-v-4dae7edc><svg name="download-cloud" type="feather" width="24" height="24" class="icon" data-v-35fb8f3c data-v-4dae7edc><use xlink:href="/images/spr-feather.svg#download-cloud" data-v-35fb8f3c></use></svg>Download</button></a></div></div></div></div></section><div class="bg-wrapper experts-teachers title" data-v-cdd2dbec><div class="banner" data-v-a6b26272 data-v-cdd2dbec><h2 class="title" data-v-a6b26272>Learn from Industry Experts<br data-v-a6b26272>and Core Team Members</h2><div class="wrapper" data-v-a6b26272><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/221083.webp" width="141" height="141" alt="Evan You" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Evan You</h3><p data-v-a6b26272>Creator of the Vue.js Framework and Vite.js.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/6c9d8e.webp" width="141" height="141" alt="Gregg Pollack" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Gregg Pollack</h3><p data-v-a6b26272>Founder of Vue Mastery and the former founder of CodeSchool.com.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/3aefb7.webp" width="141" height="141" alt="Eduardo San Martin Morote" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Eduardo San Martin Morote</h3><p data-v-a6b26272>Creator of Vue Router and Pinia, Vue.js Core Team Member.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/5d9cb6.webp" width="141" height="141" alt="Ben Hong" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Ben Hong</h3><p data-v-a6b26272>Vue.js Core Team Member, Nuxt.js Ambassador, Senior Staff DevEx Engineer at Netlify, and Google Developer Expert in Web Technologies.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/36ea7d.webp" width="141" height="141" alt="Marina Mosti" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Marina Mosti</h3><p data-v-a6b26272>Author of the book Building Forms with Vue, a Vuelidate core-team member, and author of FormVueLate.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/6678bc.webp" width="141" height="141" alt="Natalia Tepluhina" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Natalia Tepluhina</h3><p data-v-a6b26272>Vue.js Core Team Member, Frontend Engineer at GitLab, Google Developer Expert in Web Technologies, blog author, and conference speaker.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/7e4755.webp" width="141" height="141" alt="Jessica Sachs" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Jessica Sachs</h3><p data-v-a6b26272>Architect of the Component Test Framework, Vue Land Discord Admin, maintainer of Vue's Test Utils, and conference presenter.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/4337c0.webp" width="141" height="141" alt="Adam Jahr" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Adam Jahr</h3><p data-v-a6b26272>Co-founder of Vue Mastery, Vue.js Community Partner, and conference presenter.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/096fbf.webp" width="141" height="141" alt="Damian Dulisz" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Damian Dulisz</h3><p data-v-a6b26272>Vue.js Core Team Member and tech lead at Coursedog. Author of popular open source libraries: vue-multiselect, vuelidate, vue-global-events.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/b754da.webp" width="141" height="141" alt="Andy Li" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Andy Li</h3><p data-v-a6b26272>Frontend Expert and tutorial creator.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/592b30.webp" width="141" height="141" alt="Michael Thiessen" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Michael Thiessen</h3><p data-v-a6b26272>Vue author, speaker, and educator of thousands of devs to write more maintainable and reusable components.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/90428e.webp" width="141" height="141" alt="Sandra Rodgers" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Sandra Rodgers</h3><p data-v-a6b26272>Developer Experience Engineer at Deepgram. Former high school teacher turned frontend engineer.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/400d08.webp" width="141" height="141" alt="David Nwadiogbu" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>David Nwadiogbu</h3><p data-v-a6b26272>Software aficionado, technical Writer, co-host of Inside the Techosystem podcast.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/54e70e.webp" width="141" height="141" alt="Thorsten Lünborg" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Thorsten Lünborg</h3><p data-v-a6b26272>Vue.js Core Team Member and conference presenter.</p></div><div class="instructor" data-v-a6b26272><div class="img" data-v-a6b26272><img src="/_nuxt/image/8c4eae.webp" width="141" height="141" alt="Chris Fritz" loading="lazy" data-v-a6b26272></div><h3 data-v-a6b26272>Chris Fritz</h3><p data-v-a6b26272>Vue.js Consultant for enterprise.</p></div></div></div><div class="testimonials" data-v-89c3a42c data-v-cdd2dbec><h2 class="title" data-v-89c3a42c>What our subscribers are saying</h2><div class="agile wrapper agile--ssr agile--no-nav-buttons" data-v-89c3a42c><div class="agile__list"><div class="agile__track" style="transform:translate(0);transition:transform ease 0s"><div class="agile__slides agile__slides--cloned"><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>Vue Mastery has been a monumental resource for my journey into Vue.js. The videos get you building something right away that’s a useable real-world project. Due to that, I’ve got a firm grasp on Vue concepts after just a few courses and builds. I am super glad I subscribed.</div><cite data-v-89c3a42c><img src="/_nuxt/image/6e4c07.webp" width="50" height="50" alt="Tom" data-v-89c3a42c>Tom</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>They take what can seem complicated and break it down into easy-to-understand chunks of knowledge. This is one of the best investments in my coding education I've ever made.</div><cite data-v-89c3a42c><img src="/_nuxt/image/1f26fd.webp" width="50" height="50" alt="Jim Strother" data-v-89c3a42c>Jim Strother</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>I can gladly say that Vue Mastery took a great part in me finding a job using Vue today.</div><cite data-v-89c3a42c><img src="/_nuxt/image/b06591.webp" width="50" height="50" alt="Nicolás Jeremías" data-v-89c3a42c>Nicolás Jeremías</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>Vue Mastery is absolutely the best place to learn Vue, from your first version to advanced techniques. Instructors are brilliant, material is laid out perfectly for easy comprehension, and videos are high quality. I've purchased a handful of other courses and they don't even come close to Vue Mastery. Thank you guys for putting together these awesome courses!</div><cite data-v-89c3a42c><img src="/_nuxt/image/468a2d.webp" width="50" height="50" alt="William C." data-v-89c3a42c>William C.</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>Vue Mastery has given me a better understanding of how Vue.js works under the hood. I've been able to take the lessons I've learned and apply them to my everyday development. Not just the best practices, but why things work the way they do. And how to adapt my applications for future use cases. Vue Mastery is a must to any developer who is interested in learning more about Vue.js.</div><cite data-v-89c3a42c><img src="/_nuxt/image/b1afeb.webp" width="50" height="50" alt="J.D.H" data-v-89c3a42c>J.D.H</cite></div></div></div> <div class="agile__slides agile__slides--regular"><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>Vue Mastery has been a monumental resource for my journey into Vue.js. The videos get you building something right away that’s a useable real-world project. Due to that, I’ve got a firm grasp on Vue concepts after just a few courses and builds. I am super glad I subscribed.</div><cite data-v-89c3a42c><img src="/_nuxt/image/6e4c07.webp" width="50" height="50" alt="Tom" data-v-89c3a42c>Tom</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>They take what can seem complicated and break it down into easy-to-understand chunks of knowledge. This is one of the best investments in my coding education I've ever made.</div><cite data-v-89c3a42c><img src="/_nuxt/image/1f26fd.webp" width="50" height="50" alt="Jim Strother" data-v-89c3a42c>Jim Strother</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>I can gladly say that Vue Mastery took a great part in me finding a job using Vue today.</div><cite data-v-89c3a42c><img src="/_nuxt/image/b06591.webp" width="50" height="50" alt="Nicolás Jeremías" data-v-89c3a42c>Nicolás Jeremías</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>Vue Mastery is absolutely the best place to learn Vue, from your first version to advanced techniques. Instructors are brilliant, material is laid out perfectly for easy comprehension, and videos are high quality. I've purchased a handful of other courses and they don't even come close to Vue Mastery. Thank you guys for putting together these awesome courses!</div><cite data-v-89c3a42c><img src="/_nuxt/image/468a2d.webp" width="50" height="50" alt="William C." data-v-89c3a42c>William C.</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>Vue Mastery has given me a better understanding of how Vue.js works under the hood. I've been able to take the lessons I've learned and apply them to my everyday development. Not just the best practices, but why things work the way they do. And how to adapt my applications for future use cases. Vue Mastery is a must to any developer who is interested in learning more about Vue.js.</div><cite data-v-89c3a42c><img src="/_nuxt/image/b1afeb.webp" width="50" height="50" alt="J.D.H" data-v-89c3a42c>J.D.H</cite></div></div></div> <div class="agile__slides agile__slides--cloned"><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>Vue Mastery has been a monumental resource for my journey into Vue.js. The videos get you building something right away that’s a useable real-world project. Due to that, I’ve got a firm grasp on Vue concepts after just a few courses and builds. I am super glad I subscribed.</div><cite data-v-89c3a42c><img src="/_nuxt/image/6e4c07.webp" width="50" height="50" alt="Tom" data-v-89c3a42c>Tom</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>They take what can seem complicated and break it down into easy-to-understand chunks of knowledge. This is one of the best investments in my coding education I've ever made.</div><cite data-v-89c3a42c><img src="/_nuxt/image/1f26fd.webp" width="50" height="50" alt="Jim Strother" data-v-89c3a42c>Jim Strother</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>I can gladly say that Vue Mastery took a great part in me finding a job using Vue today.</div><cite data-v-89c3a42c><img src="/_nuxt/image/b06591.webp" width="50" height="50" alt="Nicolás Jeremías" data-v-89c3a42c>Nicolás Jeremías</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>Vue Mastery is absolutely the best place to learn Vue, from your first version to advanced techniques. Instructors are brilliant, material is laid out perfectly for easy comprehension, and videos are high quality. I've purchased a handful of other courses and they don't even come close to Vue Mastery. Thank you guys for putting together these awesome courses!</div><cite data-v-89c3a42c><img src="/_nuxt/image/468a2d.webp" width="50" height="50" alt="William C." data-v-89c3a42c>William C.</cite></div></div><div style="padding:0 20px;height:100%" data-v-89c3a42c><div class="quote-box" data-v-89c3a42c><div class="content-blockquote" data-v-89c3a42c>Vue Mastery has given me a better understanding of how Vue.js works under the hood. I've been able to take the lessons I've learned and apply them to my everyday development. Not just the best practices, but why things work the way they do. And how to adapt my applications for future use cases. Vue Mastery is a must to any developer who is interested in learning more about Vue.js.</div><cite data-v-89c3a42c><img src="/_nuxt/image/b1afeb.webp" width="50" height="50" alt="J.D.H" data-v-89c3a42c>J.D.H</cite></div></div></div></div></div>  </div><div class="controls" data-v-89c3a42c><div class="fa fa-chevron-left" data-v-89c3a42c></div><div class="fa fa-chevron-right" data-v-89c3a42c></div></div></div><section class="bg-wrapper" data-v-0d89f9a0 data-v-cdd2dbec><div class="body" data-v-0d89f9a0><h2 class="title" data-v-0d89f9a0>Want Vue Pro Tips?</h2><p class="lead" data-v-0d89f9a0>Get important Vue knowledge and occasional special offers delivered to your inbox.</p><button class="button inverted" data-v-0d89f9a0>Create a free account</button></div></section></div></div></div><footer class="footer l-footer index no-sticky-footer" data-v-9b94ccc0 data-v-0b35c198><div class="wrapper" data-v-9b94ccc0><div role="banner" class="brand" data-v-9b94ccc0><a href="/" aria-current="page" class="logo nuxt-link-exact-active nuxt-link-active" data-v-9b94ccc0><span class="visually-hidden" data-v-9b94ccc0>Vue Mastery</span><img src="/_nuxt/image/1ce72d.webp" width="284" height="50" alt="Vue Mastery logo" loading="lazy" data-v-9b94ccc0></a><p data-v-9b94ccc0>As the ultimate resource for Vue.js developers, Vue Mastery produces weekly lessons so you can learn what you need to succeed as a Vue.js Developer.</p><div class="social" data-v-d180769e data-v-9b94ccc0><a href="https://www.facebook.com/vuemastery" target="_blank" alt="Facebook" class="button primary link -only-icon" data-v-d180769e><i class="fab fa-facebook" data-v-d180769e><div class="visually-hidden" data-v-d180769e>Facebook</div></i></a><a href="https://twitter.com/vuemastery" target="_blank" alt="Twitter" class="button primary link -only-icon" data-v-d180769e><i class="fab fa-twitter" data-v-d180769e><div class="visually-hidden" data-v-d180769e>Twitter</div></i></a><a href="https://medium.com/vue-mastery" target="_blank" alt="Medium" class="button primary link -only-icon" data-v-d180769e><i class="fab fa-medium" data-v-d180769e><div class="visually-hidden" data-v-d180769e>Medium</div></i></a><a href="https://www.youtube.com/vue-mastery" target="_blank" alt="Youtube" class="button primary link -only-icon" data-v-d180769e><i class="fab fa-youtube" data-v-d180769e><div class="visually-hidden" data-v-d180769e>Youtube</div></i></a></div></div><div class="nav-1" data-v-9b94ccc0><h3 class="h4" data-v-9b94ccc0>Vue Mastery</h3><ul class="list-unstyled" data-v-9b94ccc0><li data-v-9b94ccc0><a href="/courses" class="-inverted" data-v-9b94ccc0>Courses</a></li><li data-v-9b94ccc0><a href="/conferences" class="-inverted" data-v-9b94ccc0>Conferences</a></li><li data-v-9b94ccc0><a href="/blog" class="-inverted" data-v-9b94ccc0>Blog</a></li><li data-v-9b94ccc0><a href="/learning-path" class="-inverted" data-v-9b94ccc0>Learning Path</a></li><li data-v-9b94ccc0><a href="/live-training" class="-inverted" data-v-9b94ccc0>Live Training</a></li><li data-v-9b94ccc0><a href="/pricing" class="-inverted" data-v-9b94ccc0>Pricing</a></li><li data-v-9b94ccc0><a href="/vue-jobs" class="-inverted" data-v-9b94ccc0>Vue Jobs</a></li><li data-v-9b94ccc0><a href="/vue-cheat-sheet" class="-inverted" data-v-9b94ccc0>Vue Cheat Sheet</a></li><li data-v-9b94ccc0><a href="/nuxt-cheat-sheet" class="-inverted" data-v-9b94ccc0>Nuxt Cheat Sheet</a></li><li data-v-9b94ccc0><a href="/vue-3-cheat-sheet" class="-inverted" data-v-9b94ccc0>Vue 3 Cheat Sheet</a></li><li data-v-9b94ccc0><a href="/migration-guide-cheat-sheet" class="-inverted" data-v-9b94ccc0>Migration Guide Cheat Sheet</a></li></ul></div><div class="nav-2" data-v-9b94ccc0><h3 class="h4" data-v-9b94ccc0>About Us</h3><ul class="list-unstyled" data-v-9b94ccc0><li data-v-9b94ccc0><a href="/contact" class="-inverted" data-v-9b94ccc0>Contact</a></li><li data-v-9b94ccc0><a href="/privacy" class="-inverted" data-v-9b94ccc0>Privacy Policy</a></li><li data-v-9b94ccc0><a href="/terms" class="-inverted" data-v-9b94ccc0>Terms of Service</a></li></ul></div></div></footer></div></div></div></div><script defer src="/_nuxt/static/1744056795/state.js"></script><script src="/_nuxt/a310a5a.js" defer></script><script src="/_nuxt/c9daebf.js" defer></script><script src="/_nuxt/ac6e4d3.js" defer></script><script src="/_nuxt/a5c9d5b.js" defer></script><script src="/_nuxt/8bc7b07.js" defer></script><script src="/_nuxt/6a91120.js" defer></script><script src="/_nuxt/9f4f187.js" defer></script><script src="/_nuxt/f2810c0.js" defer></script> </body> </html>