diff --git a/docs/.vuepress/components/HomeSponsors.vue b/docs/.vuepress/components/HomeSponsors.vue
index 8790be802..8e3ce0721 100644
--- a/docs/.vuepress/components/HomeSponsors.vue
+++ b/docs/.vuepress/components/HomeSponsors.vue
@@ -27,11 +27,17 @@ export default {
 <style>
 #sponsors {
   text-align: center;
-  padding: 35px 40px 45px;
-  margin: 0 -2rem;
+  padding: 35px 30px 45px;
   background-color: #f6f6f6;
 }
 
+@media (min-width: 768px) {
+  #sponsors {
+    padding: 35px 40px 45px;
+    margin: 0 -2rem;
+  }
+}
+
 #sponsors h3 {
   color: #999;
   margin: 0 0 10px;
diff --git a/docs/.vuepress/public/images/vueschool/close.svg b/docs/.vuepress/public/images/vueschool/close.svg
new file mode 100644
index 000000000..a9d51d1d8
--- /dev/null
+++ b/docs/.vuepress/public/images/vueschool/close.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#FFF" fill-rule="nonzero">
+            <path d="M1569.69 33.321c-.415-.414-1.084-.414-1.498 0L1563 38.503l-5.192-5.192c-.414-.415-1.083-.415-1.497 0-.415.414-.415 1.083 0 1.497l5.192 5.192-5.192 5.192c-.415.414-.415 1.083 0 1.497.414.415 1.083.415 1.497 0l5.192-5.192 5.192 5.192c.414.415 1.083.415 1.497 0 .415-.414.415-1.083 0-1.497L1564.497 40l5.192-5.192c.404-.404.404-1.083 0-1.487z" transform="translate(-1556.000000, -33.000000)"/>
+        </g>
+    </g>
+</svg>
diff --git a/docs/.vuepress/public/images/vueschool/vs-backpack.png b/docs/.vuepress/public/images/vueschool/vs-backpack.png
new file mode 100644
index 000000000..43807ff60
Binary files /dev/null and b/docs/.vuepress/public/images/vueschool/vs-backpack.png differ
diff --git a/docs/.vuepress/public/images/vueschool/vs-iso.svg b/docs/.vuepress/public/images/vueschool/vs-iso.svg
new file mode 100644
index 000000000..873f0bcdc
--- /dev/null
+++ b/docs/.vuepress/public/images/vueschool/vs-iso.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="42" viewBox="0 0 37 42">
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g>
+                    <path fill="#364FDE" d="M10.648 25.558C7.883 11.884 10.503 2.91 10.503 2.91s-.701 5.463 4.81 14.267c-.07 10.915 2.078 16.609 2.078 16.609l.442-.325-.442.385s-3.267-2.667-6.743-8.288zM23.674 23.622c1.322 1.332 2.555 2.254 3.447 2.692l-.016-.008s1 .36 1.177.12c1.22-1.292 1.519-3.699.705-8.223-4.65-2.656-5.238-6.796-5.238-6.796s-.838 5.748-.075 12.215z" transform="translate(-20 -19) translate(20 19)"/>
+                    <path fill="#56D8FF" d="M10.503 2.91s-3.827 13.104 2.65 31.773c.176.539 0 1.137-.472 1.496l-6.829 4.787c-.648.479-1.59.18-1.884-.598C2.143 35.4-2.86 18.946 2.202.935c.235-.718 1-1.137 1.707-.837l6.594 2.812z" transform="translate(-20 -19) translate(20 19)"/>
+                    <path fill="#667DFF" d="M23.573 29.238l-6.182 4.548s-3.297-8.736-1.59-25.311c.118-.958 1.119-1.436 1.943-.958l6.005 3.89s-1.177 8.078.53 15.857c.177.777-.118 1.555-.706 1.974zM34.994 19.126l-5.711-3.77c-.353-.24-.883.12-.765.539 1.354 6.043 1.177 9.035-.236 10.53-.176.24-1.177-.119-1.177-.119.942.479 1.177.24 1.177.24.942-.719 4.474-3.292 6.712-4.847.883-.658.883-1.975 0-2.573z" transform="translate(-20 -19) translate(20 19)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/docs/.vuepress/public/images/vueschool/vs-logo.svg b/docs/.vuepress/public/images/vueschool/vs-logo.svg
new file mode 100644
index 000000000..01f7ae050
--- /dev/null
+++ b/docs/.vuepress/public/images/vueschool/vs-logo.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40">
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g opacity=".9">
+                    <g>
+                        <path fill="#364FDE" d="M9.936 24.365C7.355 11.329 9.8 2.775 9.8 2.775s-.654 5.207 4.488 13.6c-.066 10.405 1.939 15.833 1.939 15.833l.412-.31-.412.367s-3.049-2.543-6.291-7.9zM22.09 22.519c1.233 1.27 2.384 2.148 3.215 2.566l-.014-.007s.933.342 1.098.114c1.139-1.232 1.417-3.526.658-7.84-4.34-2.531-4.887-6.478-4.887-6.478s-.782 5.48-.07 11.645z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                        <path fill="#56D8FF" d="M9.8 2.774s-3.57 12.492 2.472 30.29c.165.513 0 1.083-.44 1.426L5.46 39.053c-.604.456-1.483.171-1.757-.57C2 33.748-2.67 18.06 2.055.892c.22-.685.933-1.084 1.593-.799L9.8 2.774z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                        <path fill="#667DFF" d="M21.995 27.873l-5.768 4.335S13.15 23.88 14.744 8.079c.11-.913 1.043-1.369 1.813-.913l5.602 3.708s-1.098 7.7.495 15.116c.165.742-.11 1.483-.66 1.883zM32.651 18.233l-5.328-3.594c-.33-.228-.824.114-.714.513 1.263 5.762 1.099 8.614-.22 10.04-.165.228-1.098-.114-1.098-.114.878.456 1.098.228 1.098.228.88-.685 4.175-3.138 6.262-4.62.824-.628.824-1.883 0-2.453z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                    </g>
+                </g>
+                <path fill="#FFF" d="M54.753 13.93l-3.028-8.623h-2.47l4.287 11.602h2.323L60.17 5.307H57.78l-3.027 8.624zm11.29 2.98h2.079l-.016-.148c-.028-.276-.06-.697-.065-1.167l-.001-6.737h-2.176v4.68c0 .933-.557 1.587-1.522 1.587-1.015 0-1.473-.72-1.473-1.62V8.858h-2.176v5.09c0 1.75 1.112 3.174 3.06 3.174.85 0 1.783-.327 2.225-1.08 0 .327.033.703.066.867zm5.875-4.943c.05-.736.671-1.587 1.8-1.587 1.244 0 1.767.785 1.8 1.587h-3.6zm3.813 2.095c-.262.72-.818 1.227-1.833 1.227-1.08 0-1.98-.769-2.029-1.833h5.76l.024-.366c.005-.095.009-.2.009-.305 0-2.585-1.49-4.172-3.977-4.172-2.061 0-3.96 1.669-3.96 4.238 0 2.716 1.948 4.304 4.157 4.304 1.98 0 3.256-1.162 3.665-2.553l-1.816-.54zM58.22 25.255c-.261-1.31-1.341-3.011-4.156-3.011-2.192 0-4.041 1.57-4.041 3.632 0 1.751 1.194 2.946 3.043 3.322l1.62.327c.9.18 1.408.704 1.408 1.375 0 .818-.671 1.424-1.882 1.424-1.637 0-2.438-1.031-2.537-2.177l-2.094.557c.18 1.652 1.538 3.632 4.614 3.632 2.7 0 4.19-1.8 4.19-3.583 0-1.637-1.13-3.011-3.24-3.42l-1.62-.311c-.851-.164-1.26-.671-1.26-1.31 0-.768.72-1.472 1.816-1.472 1.473 0 1.996.998 2.11 1.636l2.03-.621zm5.466 2.552c1.08 0 1.588.688 1.784 1.358l1.947-.654c-.343-1.358-1.587-2.716-3.78-2.716-2.34 0-4.173 1.783-4.173 4.27 0 2.471 1.866 4.271 4.239 4.271 2.143 0 3.403-1.374 3.763-2.716l-1.914-.638c-.18.622-.737 1.358-1.85 1.358-1.112 0-2.061-.818-2.061-2.275 0-1.456.933-2.258 2.045-2.258zm7.56 1.555c.05-.884.59-1.571 1.506-1.571 1.047 0 1.489.704 1.489 1.604v4.696h2.176v-5.073c0-1.767-.949-3.19-2.994-3.19-.77 0-1.653.261-2.177.883v-4.467h-2.176V34.09h2.176v-4.73zm10.997 2.994c-1.064 0-2.046-.785-2.046-2.29 0-1.522.982-2.291 2.046-2.291 1.063 0 2.045.769 2.045 2.29 0 1.522-.982 2.291-2.045 2.291zm0-6.561c-2.406 0-4.222 1.783-4.222 4.27 0 2.471 1.816 4.271 4.222 4.271 2.405 0 4.221-1.8 4.221-4.27 0-2.488-1.816-4.271-4.221-4.271zm9.556 6.561c-1.064 0-2.045-.785-2.045-2.29 0-1.522.981-2.291 2.045-2.291s2.045.769 2.045 2.29c0 1.522-.981 2.291-2.045 2.291zm0-6.561c-2.405 0-4.222 1.783-4.222 4.27 0 2.471 1.817 4.271 4.222 4.271 2.405 0 4.222-1.8 4.222-4.27 0-2.488-1.817-4.271-4.222-4.271zm8.116 8.296V22.244H97.74V34.09h2.176zm15.339-1.735c-1.064 0-2.046-.785-2.046-2.29 0-1.522.982-2.291 2.046-2.291 1.063 0 2.045.769 2.045 2.29 0 1.522-.982 2.291-2.045 2.291zm0-6.561c-2.406 0-4.222 1.783-4.222 4.27 0 2.471 1.816 4.271 4.222 4.271 2.405 0 4.221-1.8 4.221-4.27 0-2.488-1.816-4.271-4.221-4.271zm-6.066 8.296v-8.182h-2.176v8.182h2.176zm-2.28-10.386c0-.599.489-1.09 1.085-1.09.608 0 1.097.491 1.097 1.09 0 .6-.489 1.091-1.097 1.091-.596 0-1.085-.491-1.085-1.09zm-4.882 9.011c0-.818.671-1.489 1.49-1.489.834 0 1.505.671 1.505 1.49 0 .818-.671 1.488-1.506 1.488-.818 0-1.489-.67-1.489-1.489z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/Layout.vue
index 8ce01a230..a3aeecce2 100644
--- a/docs/.vuepress/theme/Layout.vue
+++ b/docs/.vuepress/theme/Layout.vue
@@ -1,42 +1,51 @@
 <template>
-  <ParentLayout>
-    <template #page-top>
-      <CarbonAds
-        v-if="$site.themeConfig.carbonAds"
-        :key="'ca:' + $page.path"
-        :code="$site.themeConfig.carbonAds.carbon"
-        :placement="$site.themeConfig.carbonAds.placement"
-      />
-    </template>
-    <template #page-bottom>
-      <BuySellAds
-        v-if="$site.themeConfig.carbonAds"
-        :key="'bsa:' + $page.path"
-        :code="$site.themeConfig.carbonAds.custom"
-        :placement="$site.themeConfig.carbonAds.placement"
-      />
-    </template>
-    <template #sidebar-bottom>
-      <div class="sponsors">
-        <a
-          href="https://github.com/sponsors/posva"
-          target="_blank"
-          rel="noopener"
-          >Sponsors</a
-        >
+  <div
+    class="main-container"
+    :class="{ 'has-top-banner': showTopBanner }"
+  >
+    <BannerTop
+      v-if="showTopBanner"
+      @close="closeBannerTop"
+    />
+    <ParentLayout>
+      <template #page-top>
+        <CarbonAds
+          v-if="$site.themeConfig.carbonAds"
+          :key="'ca:' + $page.path"
+          :code="$site.themeConfig.carbonAds.carbon"
+          :placement="$site.themeConfig.carbonAds.placement"
+        />
+      </template>
+      <template #page-bottom>
+        <BuySellAds
+          v-if="$site.themeConfig.carbonAds"
+          :key="'bsa:' + $page.path"
+          :code="$site.themeConfig.carbonAds.custom"
+          :placement="$site.themeConfig.carbonAds.placement"
+        />
+      </template>
+      <template #sidebar-bottom>
+        <div class="sponsors">
+          <a
+            href="https://github.com/sponsors/posva"
+            target="_blank"
+            rel="noopener"
+            >Sponsors</a
+          >
 
-        <a
-          v-for="sponsor in sponsors.gold"
-          :href="sponsor.href"
-          :key="sponsor.href"
-          target="_blank"
-          rel="noopener"
-        >
-          <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
-        </a>
-      </div>
-    </template>
-  </ParentLayout>
+          <a
+            v-for="sponsor in sponsors.gold"
+            :href="sponsor.href"
+            :key="sponsor.href"
+            target="_blank"
+            rel="noopener"
+          >
+            <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
+          </a>
+        </div>
+      </template>
+    </ParentLayout>
+  </div>
 </template>
 
 <script>
@@ -47,15 +56,26 @@ import sponsors from '../components/sponsors.json'
 
 export default {
   name: 'Layout',
-
   components: {
     ParentLayout,
     CarbonAds,
-    BuySellAds
+    BuySellAds,
+    BannerTop: () => import('./components/BannerTop.vue')
   },
-
-  created() {
-    this.sponsors = sponsors
+  data () {
+    return {
+      sponsors,
+      showTopBanner: false
+    }
+  },
+  mounted () {
+    this.showTopBanner = !localStorage.getItem('VS_SUMMER_BANNER_CLOSED')
+  },
+  methods: {
+    closeBannerTop () {
+      this.showTopBanner = false
+      localStorage.setItem('VS_SUMMER_BANNER_CLOSED', 1)
+    }
   }
 }
 </script>
diff --git a/docs/.vuepress/theme/components/BannerTop.vue b/docs/.vuepress/theme/components/BannerTop.vue
new file mode 100644
index 000000000..b9ec330fa
--- /dev/null
+++ b/docs/.vuepress/theme/components/BannerTop.vue
@@ -0,0 +1,170 @@
+<template>
+  <a id="vs" href="https://vueschool.io/sales/summer-vue?friend=vuerouter" target="_blank" rel="noreferrer">
+    <div class="vs-iso">
+      <img src="/images/vueschool/vs-iso.svg" alt="Vue School Logo">
+    </div>
+    <div class="vs-logo">
+      <img src="/images/vueschool/vs-logo.svg" alt="Vue School Logo">
+    </div>
+    <div class="vs-core">
+      <div class="vs-backpack">
+        <img src="/images/vueschool/vs-backpack.png" alt="Backpack">
+      </div>
+      <div class="vs-slogan">
+        3-months Vue School for only $49 <span style="text-decoration: line-through">$75</span>!
+        <span class="vs-slogan-light">
+          Limited Time Offer
+        </span>
+      </div>
+      <div class="vs-button">
+        GET ACCESS
+      </div>
+    </div>
+    <div
+      id="vs-close"
+      class="vs-close"
+      @click.stop.prevent="$emit('close')">
+      <img src="/images/vueschool/close.svg" alt="Close">
+    </div>
+  </a>
+</template>
+
+<style lang="stylus">
+$topBannerHeight ?= 5rem
+$topBannerHeightMobile ?= 3.125rem
+$navbarHeight ?= 3.6rem
+$contentClass = '.theme-default-content'
+
+@import url('https://fonts.googleapis.com/css?family=Roboto')
+
+// Banner
+#vs
+  align-items: center
+  background-color: #202A5A
+  box-sizing: border-box
+  color: #fff
+  display: none
+  font-family 'Roboto', Oxygen, Fira Sans, Helvetica Neue, sans-serif
+  justify-content: center
+  position: fixed
+  padding: 0 10px
+  left: 0
+  right: 0
+  top: 0
+  z-index: 100
+  height: $topBannerHeightMobile
+  @media (min-width: 680px)
+    height: $topBannerHeight
+  &:hover
+    .vs-core
+      .vs-button
+        background: #f22606
+
+  .vs-iso
+    position: absolute
+    left: 20px
+    height: 26px
+    display: none
+    img
+      height: 26px
+    @media (min-width: 680px)
+      display: block
+      left: 40px
+      height: 40px
+      img
+        height: 40px
+    @media (min-width: 900px)
+      display: none
+
+  .vs-logo
+    position: absolute
+    display: none
+    left: 40px
+    @media (min-width: 900px)
+      display: block
+
+  .vs-core
+    display: flex
+    align-items: center
+    margin-right: 20px
+    @media (min-width: 680px)
+      margin-right: 0
+
+    .vs-backpack
+      margin-right: 6px
+      @media (min-width: 680px)
+        margin-right: 14px
+      img
+        height: 50px
+        @media (min-width: 680px)
+          height: 74px
+
+    .vs-slogan
+      color: #FFF
+      font-weight: bold
+      font-size: 14px
+      @media (min-width: 680px)
+        font-size: 18px
+      > .vs-slogan-light
+        color: #ff5338
+        display: block
+        text-align: left
+        @media (min-width: 900px)
+          text-align: center
+          display: inline
+
+    .vs-button
+      margin-left: 43px
+      color: #FFF
+      padding: 13px 24px
+      border-radius: 40px
+      display: none
+      background: #ff5338
+      font-weight: bold
+      @media (min-width: 680px)
+        display: inline-block
+
+  .vs-close
+    right: 10px
+    position: absolute
+    padding: 10px
+    @media (min-width: 680px)
+      right: 20px
+    &:hover
+      color: #56D8FF
+
+/************************************/
+
+// Show banner only if the container has class "has-top-banner"
+.main-container.has-top-banner
+  #vs
+    display: flex
+
+// Add margin top to body, navbar and sidebar
+.main-container.has-top-banner
+  margin-top: $topBannerHeightMobile
+  .navbar
+    margin-top: $topBannerHeightMobile
+  .sidebar
+    margin-top: $topBannerHeightMobile
+@media (min-width: 680px)
+  .main-container.has-top-banner
+    margin-top: $topBannerHeight
+    .navbar
+      margin-top: $topBannerHeight
+    .sidebar
+      margin-top: $topBannerHeight
+
+// Adjust titles margin and padding for anchor links
+.main-container.has-top-banner
+  {$contentClass}:not(.custom)
+    h1, h2, h3, h4, h5, h6
+      margin-top (2.5rem - $topBannerHeightMobile - $navbarHeight)
+      padding-top ($navbarHeight + $topBannerHeightMobile + 1rem)
+@media (min-width: 680px)
+  .main-container.has-top-banner
+    {$contentClass}:not(.custom)
+      h1, h2, h3, h4, h5, h6
+        margin-top (2.5rem - $topBannerHeight - $navbarHeight)
+        padding-top ($navbarHeight + $topBannerHeight + 1rem)
+</style>