diff --git a/components/global/AppModal.vue b/components/global/AppModal.vue
index d280343855..4b07a78730 100644
--- a/components/global/AppModal.vue
+++ b/components/global/AppModal.vue
@@ -64,11 +64,6 @@ export default {
       showModal: false
     }
   },
-  computed: {
-    open() {
-      return this.showModal
-    }
-  },
   head() {
     return this.open
       ? {
@@ -77,6 +72,11 @@ export default {
           }
         }
       : undefined
+  },
+  computed: {
+    open() {
+      return this.showModal
+    }
   }
 }
 </script>
diff --git a/components/global/CodeGroup.vue b/components/global/CodeGroup.vue
index 7e451f04db..b797f5fd0e 100644
--- a/components/global/CodeGroup.vue
+++ b/components/global/CodeGroup.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="code-group">
     <div
-      class="rounded-t border-b-2 border-dark-border px-2 bg-dark-elevatedSurface text-sm text-white relative"
+      class="relative px-2 text-sm text-white border-b-2 rounded-t border-dark-border bg-dark-elevatedSurface"
     >
       <button
         v-for="({ label }, i) in tabs"
         ref="tabs"
         :key="label"
-        class="px-4 py-3 text-gray-400 font-bold font-mono"
+        class="px-4 py-3 font-mono font-bold text-gray-400"
         :class="[activeTabIndex === i && 'active']"
         @click="updateTabs(i)"
       >
@@ -45,7 +45,7 @@ export default {
   },
   methods: {
     switchTab(i) {
-      this.tabs.map(tab => {
+      this.tabs.forEach(tab => {
         tab.elm.classList.remove('active')
       })
       this.tabs[i].elm.classList.add('active')
diff --git a/components/molecules/AppLangSelect.vue b/components/molecules/AppLangSelect.vue
index 7968ee149f..ed9031f2d9 100644
--- a/components/molecules/AppLangSelect.vue
+++ b/components/molecules/AppLangSelect.vue
@@ -1,29 +1,27 @@
 <template>
   <div
-    class="nui-select text-nuxt-gray bg-gray-200 dark:bg-dark-surface dark:text-dark-onSurfaceSecondary inline-block rounded-full transition-colors duration-300 ease-linear"
+    class="inline-block transition-colors duration-300 ease-linear bg-gray-200 rounded-full nui-select text-nuxt-gray dark:bg-dark-surface dark:text-dark-onSurfaceSecondary"
   >
     <div class="flex items-center content-center px-4">
       <div class="-mr-4">
         <slot name="icon" />
       </div>
-      <template>
-        <select
-          :value="$i18n.locale"
-          class="bg-transparent cursor-pointer font-medium h-10 appearance-none focus:outline-none pl-6 pr-8 z-10"
-          :aria-label="label"
-          @change="onChange"
+      <select
+        :value="$i18n.locale"
+        class="z-10 h-10 pl-6 pr-8 font-medium bg-transparent appearance-none cursor-pointer focus:outline-none"
+        :aria-label="label"
+        @change="onChange"
+      >
+        <option
+          v-for="(locale, i) in $i18n.locales"
+          :key="i"
+          :value="locale.code"
+          class="dark:text-dark-surface"
         >
-          <option
-            v-for="(locale, i) in $i18n.locales"
-            :key="i"
-            :value="locale.code"
-            class="dark:text-dark-surface"
-          >
-            {{ getLocaleDescription(locale) }}
-          </option>
-        </select>
-        <CaretDownIcon class="-ml-4" />
-      </template>
+          {{ getLocaleDescription(locale) }}
+        </option>
+      </select>
+      <CaretDownIcon class="-ml-4" />
     </div>
   </div>
 </template>
diff --git a/components/organisms/NewsletterForm.vue b/components/organisms/NewsletterForm.vue
index af9e45707a..c226310c1a 100644
--- a/components/organisms/NewsletterForm.vue
+++ b/components/organisms/NewsletterForm.vue
@@ -10,7 +10,7 @@
         tag="h2"
         class="text-3xl font-medium text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary mb-2 transition-colors duration-300 ease-linear"
       >
-        <template v-slot:nuxt>
+        <template #nuxt>
           <AppTitle />
         </template>
       </i18n>
diff --git a/components/organisms/ReleaseNotes.vue b/components/organisms/ReleaseNotes.vue
index fdfda00715..0bb6df7eb1 100644
--- a/components/organisms/ReleaseNotes.vue
+++ b/components/organisms/ReleaseNotes.vue
@@ -47,13 +47,13 @@ export default {
       return s
     }
   },
-  async fetch() {
-    this.releases = await this.$http.$get('/_releases')
-  },
   data() {
     return {
       releases: []
     }
+  },
+  async fetch() {
+    this.releases = await this.$http.$get('/_releases')
   }
 }
 </script>
diff --git a/components/organisms/ads/CarbonAds.vue b/components/organisms/ads/CarbonAds.vue
index 6f86465d2b..e187dc53e4 100644
--- a/components/organisms/ads/CarbonAds.vue
+++ b/components/organisms/ads/CarbonAds.vue
@@ -54,6 +54,7 @@ export default {
 
   @screen lg {
     @apply mt-0 mx-auto;
+
     max-width: 160px;
   }
 
@@ -62,6 +63,7 @@ export default {
 
     .carbon-wrap {
       @apply flex flex-col;
+
       flex: 1;
 
       @media (min-width: 320px) {
diff --git a/components/templates/TheMobileAsideNav.vue b/components/templates/TheMobileAsideNav.vue
index cf2713c4db..1620f769a7 100644
--- a/components/templates/TheMobileAsideNav.vue
+++ b/components/templates/TheMobileAsideNav.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     v-click-outside="clickOutsideHandler"
-    class="header_mobile_aside shadow-nuxt block lg:hidden fixed left-0 z-20 w-full sm:w-1/2"
+    class="fixed left-0 z-20 block w-full header_mobile_aside shadow-nuxt lg:hidden sm:w-1/2"
     :class="{ 'header_mobile_aside--open': show }"
   >
     <div
-      class="mx-auto h-full light:bg-light-surface dark:bg-dark-surface transition-colors duration-300 ease-linear"
+      class="h-full mx-auto transition-colors duration-300 ease-linear light:bg-light-surface dark:bg-dark-surface"
     >
-      <div class="content-wrapper h-full relative">
-        <div class="overflow-y-auto h-full pt-4">
+      <div class="relative h-full content-wrapper">
+        <div class="h-full pt-4 overflow-y-auto">
           <transition-group
             v-for="(sublinks, group) in sortedLinks"
             :key="group"
@@ -16,13 +16,13 @@
             name="list"
             class="header_mobile_aside_group"
           >
-            <h3 :key="`title-${group}`" class="uppercase text-gray-500 pb-2">
+            <h3 :key="`title-${group}`" class="pb-2 text-gray-500 uppercase">
               {{ $t(`content.${section}.${group}`) }}
             </h3>
             <ul :key="`list-${group}`" class="pb-6">
               <li v-for="(link, index) in sublinks" :key="index" class="py-2">
                 <NuxtLink
-                  class="block dark:text-dark-onSurfacePrimary hover:text-nuxt-lightgreen transition-colors duration-300 ease-linear"
+                  class="block transition-colors duration-300 ease-linear dark:text-dark-onSurfacePrimary hover:text-nuxt-lightgreen"
                   active-class
                   exact
                   exact-active-class="text-nuxt-lightgreen"
@@ -36,26 +36,26 @@
           </transition-group>
         </div>
         <button
-          class="inner-button sm:hidden absolute h-10 w-10 flex items-center justify-center text-nuxt-gray bg-gray-200 dark:bg-dark-elevatedSurface dark:text-dark-onSurfaceSecondary transition-colors duration-300 ease-linear"
+          class="absolute flex items-center justify-center w-10 h-10 transition-colors duration-300 ease-linear bg-gray-200 inner-button sm:hidden text-nuxt-gray dark:bg-dark-elevatedSurface dark:text-dark-onSurfaceSecondary"
           @click="show = false"
         >
           <TimesIcon
-            class="block h-5 fill-current transition-colors duration-300 ease-linear"
+            class="block h-5 transition-colors duration-300 ease-linear fill-current"
           />
         </button>
       </div>
 
       <button
-        class="bookmark-button absolute h-10 w-10 flex items-center justify-center text-nuxt-gray bg-gray-200 dark:bg-dark-surface dark:text-dark-onSurfaceSecondary transition-colors duration-300 ease-linear"
+        class="absolute flex items-center justify-center w-10 h-10 transition-colors duration-300 ease-linear bg-gray-200 bookmark-button text-nuxt-gray dark:bg-dark-surface dark:text-dark-onSurfaceSecondary"
         @click="show = !show"
       >
         <ListIcon
           v-if="!show"
-          class="block text-nuxt-gray dark:text-dark-onSurfaceSecondary stroke-current transition-colors duration-300 ease-linear"
+          class="block transition-colors duration-300 ease-linear stroke-current text-nuxt-gray dark:text-dark-onSurfaceSecondary"
         />
         <TimesIcon
           v-else
-          class="block h-5 fill-current transition-colors duration-300 ease-linear"
+          class="block h-5 transition-colors duration-300 ease-linear fill-current"
         />
       </button>
     </div>
@@ -76,7 +76,7 @@ export default {
   props: {
     links: {
       type: Object,
-      default: () => []
+      default: () => {}
     },
     section: {
       type: String,
diff --git a/components/templates/TheMobileAsideNavNewDocs.vue b/components/templates/TheMobileAsideNavNewDocs.vue
index 1dd773bf3f..d04fbe0622 100644
--- a/components/templates/TheMobileAsideNavNewDocs.vue
+++ b/components/templates/TheMobileAsideNavNewDocs.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     v-click-outside="clickOutsideHandler"
-    class="header_mobile_aside shadow-nuxt block lg:hidden fixed left-0 z-20 w-full sm:w-1/2"
+    class="fixed left-0 z-20 block w-full header_mobile_aside shadow-nuxt lg:hidden sm:w-1/2"
     :class="{ 'header_mobile_aside--open': show }"
   >
     <div
-      class="mx-auto h-full light:bg-light-surface dark:bg-dark-surface transition-colors duration-300 ease-linear"
+      class="h-full mx-auto transition-colors duration-300 ease-linear light:bg-light-surface dark:bg-dark-surface"
     >
-      <div class="content-wrapper h-full relative">
-        <div class="overflow-y-auto h-full pt-4">
+      <div class="relative h-full content-wrapper">
+        <div class="h-full pt-4 overflow-y-auto">
           <transition-group
             v-for="(sublinks, group) in sortedLinks"
             :key="group"
@@ -23,7 +23,7 @@
                 name: 'docs-2.x-book-slug',
                 params: { book: group, slug: sublinks[0].slug }
               }"
-              class="flex items-center uppercase text-gray-600 pb-2"
+              class="flex items-center pb-2 text-gray-600 uppercase"
               :class="{
                 'hover:text-nuxt-lightgreen mb-4 block':
                   $route.params.book !== group,
@@ -44,7 +44,7 @@
             >
               <li v-for="(link, index) in sublinks" :key="index" class="py-2">
                 <NuxtLink
-                  class="block dark:text-dark-onSurfacePrimary hover:text-nuxt-lightgreen transition-colors duration-300 ease-linear"
+                  class="block transition-colors duration-300 ease-linear dark:text-dark-onSurfacePrimary hover:text-nuxt-lightgreen"
                   exact-active-class="text-nuxt-lightgreen"
                   :to="toLink(group, link)"
                   @click.native="show = false"
@@ -56,26 +56,26 @@
           </transition-group>
         </div>
         <button
-          class="inner-button sm:hidden absolute h-10 w-10 flex items-center justify-center text-nuxt-gray bg-gray-200 dark:bg-dark-elevatedSurface dark:text-dark-onSurfaceSecondary transition-colors duration-300 ease-linear"
+          class="absolute flex items-center justify-center w-10 h-10 transition-colors duration-300 ease-linear bg-gray-200 inner-button sm:hidden text-nuxt-gray dark:bg-dark-elevatedSurface dark:text-dark-onSurfaceSecondary"
           @click="show = false"
         >
           <TimesIcon
-            class="block h-5 fill-current transition-colors duration-300 ease-linear"
+            class="block h-5 transition-colors duration-300 ease-linear fill-current"
           />
         </button>
       </div>
 
       <button
-        class="bookmark-button absolute h-10 w-10 flex items-center justify-center text-nuxt-gray bg-gray-200 dark:bg-dark-surface dark:text-dark-onSurfaceSecondary transition-colors duration-300 ease-linear"
+        class="absolute flex items-center justify-center w-10 h-10 transition-colors duration-300 ease-linear bg-gray-200 bookmark-button text-nuxt-gray dark:bg-dark-surface dark:text-dark-onSurfaceSecondary"
         @click="show = !show"
       >
         <ListIcon
           v-if="!show"
-          class="block text-nuxt-gray dark:text-dark-onSurfaceSecondary stroke-current transition-colors duration-300 ease-linear"
+          class="block transition-colors duration-300 ease-linear stroke-current text-nuxt-gray dark:text-dark-onSurfaceSecondary"
         />
         <TimesIcon
           v-else
-          class="block h-5 fill-current transition-colors duration-300 ease-linear"
+          class="block h-5 transition-colors duration-300 ease-linear fill-current"
         />
       </button>
     </div>
@@ -100,7 +100,7 @@ export default {
   props: {
     links: {
       type: Object,
-      default: () => []
+      default: () => {}
     }
   },
   data() {
diff --git a/components/templates/home/HomeModes.vue b/components/templates/home/HomeModes.vue
index 9d18f72b56..05ce090d86 100644
--- a/components/templates/home/HomeModes.vue
+++ b/components/templates/home/HomeModes.vue
@@ -8,7 +8,7 @@
           tag="h2"
           class="text-3xl text-center pt-10 font-medium"
         >
-          <template v-slot:nuxt>
+          <template #nuxt>
             <AppTitle />
           </template>
         </i18n>
@@ -27,7 +27,7 @@
               tag="p"
               class="leading-loose text-left text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
             >
-              <template v-slot:break>
+              <template #break>
                 <br />
                 <br />
               </template>
@@ -45,7 +45,7 @@
               tag="p"
               class="leading-loose text-left text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
             >
-              <template v-slot:proverbial>
+              <template #proverbial>
                 <span class="text-gray-600">
                   ({{ $t('homepage.modes.ssg.proverbial') }} 🐦🐦)
                 </span>
diff --git a/components/templates/home/HomeTargets.vue b/components/templates/home/HomeTargets.vue
index 9873b31a66..c3a02cd57f 100644
--- a/components/templates/home/HomeTargets.vue
+++ b/components/templates/home/HomeTargets.vue
@@ -1,10 +1,10 @@
 <template>
   <AppContainer class="py-12">
     <section>
-      <h1 class="text-3xl uppercase text-center pb-8">
+      <h1 class="pb-8 text-3xl text-center uppercase">
         Nuxt<span class="text-nuxt-lightgreen">JS</span> targets
       </h1>
-      <div class="flex items-end lg:items-center justify-between">
+      <div class="flex items-end justify-between lg:items-center">
         <div class="Home__Modes__Section">
           <h4 class="Home__Modes__Section__Title">
 Server
diff --git a/components/templates/home/HomeWhy.vue b/components/templates/home/HomeWhy.vue
index d1d83c578d..a9a2f4a95e 100644
--- a/components/templates/home/HomeWhy.vue
+++ b/components/templates/home/HomeWhy.vue
@@ -8,7 +8,7 @@
           tag="h2"
           class="text-3xl font-medium pt-10 pb-8 text-center"
         >
-          <template v-slot:nuxt>
+          <template #nuxt>
             <AppTitle />
           </template>
         </i18n>
@@ -25,7 +25,7 @@
               tag="p"
               class="leading-loose text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
             >
-              <template v-slot:break>
+              <template #break>
                 <br />
               </template>
             </i18n>
@@ -42,7 +42,7 @@
               tag="p"
               class="leading-loose text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
             >
-              <template v-slot:break>
+              <template #break>
                 <br />
               </template>
             </i18n>
@@ -59,7 +59,7 @@
               tag="p"
               class="leading-loose text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
             >
-              <template v-slot:break>
+              <template #break>
                 💚
                 <br />
               </template>
diff --git a/pages/blog/_slug.vue b/pages/blog/_slug.vue
index b6feec5b83..0739d3d04d 100644
--- a/pages/blog/_slug.vue
+++ b/pages/blog/_slug.vue
@@ -1,6 +1,6 @@
 <template>
   <div class>
-    <div class="container lg:max-w-4xl mx-auto p-4 pb-8">
+    <div class="container p-4 pb-8 mx-auto lg:max-w-4xl">
       <NuxtLink
         :to="localePath({ name: 'blog' })"
         class="inline-flex items-center dark:hover:text-nuxt-lightgreen light:hover:text-nuxt-lightgreen dark:text-dark-onSurfaceSecondary light:text-light-onSurfaceSecondary"
@@ -22,17 +22,17 @@ import copyCodeBlock from '~/mixins/copyCodeBlock'
 
 export default {
   name: 'PageSlug',
-  scrollToTop: true,
   components: {
     ArrowLeftIcon
   },
   mixins: [copyCodeBlock],
-  middleware({ params, redirect }) {
+  middleware ({ params, redirect }) {
     if (params.slug === 'index') {
       redirect('/')
     }
   },
-  async asyncData({
+  scrollToTop: true,
+  async asyncData ({
     $content,
     $contributors,
     store,
@@ -68,7 +68,7 @@ export default {
         .sortBy('date', 'desc')
         .surround(slug, { before: 1, after: 1 })
         .fetch()
-    } catch (e) {}
+    } catch (e) { }
 
     return {
       post,
@@ -79,26 +79,8 @@ export default {
       path
     }
   },
-  computed: {
-    docLink() {
-      return `https://github.com/nuxt/nuxtjs.org/blob/master/content${this.path}/${this.slug}.md`
-    },
-    ...mapState({
-      host: state => state.host,
-      isDev: state => state.isDev,
-      isTest: state => state.isTest,
-      isProd: state => state.isProd
-    }),
-    socialImage() {
-      const image = this.post.imgUrl ? this.post.imgUrl : 'nuxt-card.png'
-      if (this.isTest || this.isDev) {
-        return `${this.host}/${image}`
-      } else {
-        return `https://res.cloudinary.com/nuxt/image/upload/w_1200,h_628,c_fill,f_auto/remote/nuxt-org/${this.post.imgUrl}`
-      }
-    }
-  },
-  head() {
+
+  head () {
     return {
       title: this.post.title,
       titleTemplate: '%s - NuxtJS',
@@ -145,6 +127,25 @@ export default {
         }
       ]
     }
+  },
+  computed: {
+    docLink () {
+      return `https://github.com/nuxt/nuxtjs.org/blob/master/content${this.path}/${this.slug}.md`
+    },
+    ...mapState({
+      host: state => state.host,
+      isDev: state => state.isDev,
+      isTest: state => state.isTest,
+      isProd: state => state.isProd
+    }),
+    socialImage () {
+      const image = this.post.imgUrl ? this.post.imgUrl : 'nuxt-card.png'
+      if (this.isTest || this.isDev) {
+        return `${this.host}/${image}`
+      } else {
+        return `https://res.cloudinary.com/nuxt/image/upload/w_1200,h_628,c_fill,f_auto/remote/nuxt-org/${this.post.imgUrl}`
+      }
+    }
   }
 }
 </script>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index 2bbcadc2bb..0575dc1048 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -9,7 +9,7 @@
             class="text-3xl xl:text-4xl text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary font-medium leading-normal mb-6 lg:pt-4"
           >
             {{ $t('blog.title') }}
-            <template v-slot:nuxt>
+            <template #nuxt>
               <AppTitle />
             </template>
           </i18n>
@@ -20,7 +20,7 @@
             tag="h3"
             class="xl:text-lg light:text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary font-medium leading-relaxed mb-6"
           >
-            <template v-slot:nuxtTeam>
+            <template #nuxtTeam>
               <NuxtLink
                 class="text-nuxt-green underline"
                 to="/team#nuxtCompany"
@@ -28,7 +28,7 @@
                 {{ $t('blog.nuxt_team') }}
               </NuxtLink>
             </template>
-            <template v-slot:nuxtCommunity>
+            <template #nuxtCommunity>
               <NuxtLink
                 class="text-nuxt-green underline"
                 to="/team#nuxtCommunity"
diff --git a/pages/design.vue b/pages/design.vue
index 0710c44f0e..2b2a58ac1e 100644
--- a/pages/design.vue
+++ b/pages/design.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="shadow-nuxt">
-    <div class="container mx-auto px-4 pt-16 pb-12">
+    <div class="container px-4 pt-16 pb-12 mx-auto">
       <div class="flex flex-wrap justify-between mb-8">
-        <div class="lg:w-6/12 lg:text-left text-center p-4 sm:p-0">
+        <div class="p-4 text-center lg:w-6/12 lg:text-left sm:p-0">
           <i18n
             path="design.title"
             tag="h1"
-            class="text-3xl xl:text-4xl text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary font-medium leading-normal mb-6 lg:pt-4"
+            class="mb-6 text-3xl font-medium leading-normal xl:text-4xl text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary lg:pt-4"
           >
             {{ $t('design.title') }}
-            <template v-slot:nuxt>
+            <template #nuxt>
               <AppTitle />
             </template>
           </i18n>
           <i18n
             path="design.description"
             tag="h3"
-            class="xl:text-lg text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary font-medium leading-relaxed mb-6"
+            class="mb-6 font-medium leading-relaxed xl:text-lg text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary"
           >
-            <template v-slot:break>
+            <template #break>
               <br />
             </template>
           </i18n>
@@ -28,9 +28,9 @@
         />
       </div>
       <div class="flex flex-wrap -mx-4">
-        <div class="w-full lg:w-1/2 p-4">
-          <section class="bg-gray-100 rounded p-6">
-            <h2 class="text-2xl text-nuxt-gray font-medium leading-normal mb-6">
+        <div class="w-full p-4 lg:w-1/2">
+          <section class="p-6 bg-gray-100 rounded">
+            <h2 class="mb-6 text-2xl font-medium leading-normal text-nuxt-gray">
               Light theme
             </h2>
             <figure class="rounded hover:bg-gray-200">
@@ -45,7 +45,7 @@
                 </a>
               </figcaption>
             </figure>
-            <figure class="rounded hover:bg-gray-200 mt-6">
+            <figure class="mt-6 rounded hover:bg-gray-200">
               <img
                 src="/logos/nuxt-icon.png"
                 srcset="/logos/nuxt-icon@2x.png 2x"
@@ -58,7 +58,7 @@
               </figcaption>
               <span class="dimensions">512 x 512</span>
             </figure>
-            <figure class="rounded hover:bg-gray-200 mt-6">
+            <figure class="mt-6 rounded hover:bg-gray-200">
               <img
                 src="/logos/nuxt-emoji.png"
                 srcset="/logos/nuxt-emoji@2x.png 2x"
@@ -71,7 +71,7 @@
               </figcaption>
               <span class="dimensions">128 x 128</span>
             </figure>
-            <figure class="rounded hover:bg-gray-200 mt-6">
+            <figure class="mt-6 rounded hover:bg-gray-200">
               <img src="/logos/nuxtjs-typo.svg" alt="nuxt-logo" />
               <figcaption>
                 <a href="/logos/nuxtjs-typo.svg" target="_blank" rel="noopener">
@@ -79,7 +79,7 @@
                 </a>
               </figcaption>
             </figure>
-            <figure class="rounded hover:bg-gray-200 mt-6">
+            <figure class="mt-6 rounded hover:bg-gray-200">
               <img
                 src="/logos/built-with-nuxt.svg"
                 alt="built-with-nuxt-logo"
@@ -96,9 +96,9 @@
             </figure>
           </section>
         </div>
-        <div class="w-full lg:w-1/2 p-4">
-          <section class="bg-nuxt-gray rounded p-6">
-            <h2 class="text-2xl text-white font-medium leading-normal mb-6">
+        <div class="w-full p-4 lg:w-1/2">
+          <section class="p-6 rounded bg-nuxt-gray">
+            <h2 class="mb-6 text-2xl font-medium leading-normal text-white">
               Dark theme
             </h2>
             <figure class="rounded hover:bg-gray-800">
@@ -117,7 +117,7 @@
                 </a>
               </figcaption>
             </figure>
-            <figure class="rounded hover:bg-gray-800 mt-6">
+            <figure class="mt-6 rounded hover:bg-gray-800">
               <img
                 src="/logos/nuxt-icon-white.png"
                 srcset="/logos/nuxt-icon-white@2x.png 2x"
@@ -134,7 +134,7 @@
               </figcaption>
               <span class="dimensions">512 x 512</span>
             </figure>
-            <figure class="rounded hover:bg-gray-800 mt-6">
+            <figure class="mt-6 rounded hover:bg-gray-800">
               <img
                 src="/logos/nuxt-emoji-white.png"
                 srcset="/logos/nuxt-emoji-white@2x.png 2x"
@@ -151,7 +151,7 @@
               </figcaption>
               <span class="dimensions">128 x 128</span>
             </figure>
-            <figure class="rounded hover:bg-gray-800 mt-6">
+            <figure class="mt-6 rounded hover:bg-gray-800">
               <img src="/logos/nuxtjs-typo-white.svg" alt="nuxt-logo" />
               <figcaption>
                 <a
@@ -163,7 +163,7 @@
                 </a>
               </figcaption>
             </figure>
-            <figure class="rounded hover:bg-gray-800 mt-6">
+            <figure class="mt-6 rounded hover:bg-gray-800">
               <img
                 src="/logos/built-with-nuxt-white.svg"
                 alt="built-with-nuxt-logo"
@@ -184,12 +184,12 @@
       <i18n
         path="design.other_download_message"
         tag="p"
-        class="text-center mt-8 text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary transition-colors duration-300 ease-linear"
+        class="mt-8 text-center transition-colors duration-300 ease-linear text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary"
       >
-        <template v-slot:favicon>
+        <template #favicon>
           <a href="/favicon.ico" target="_blank" rel="noopener">favicon</a>
         </template>
-        <template v-slot:sketch>
+        <template #sketch>
           <a href="/logos/nuxt-logos.sketch" target="_blank" rel="noopener">
             Sketch
           </a>
@@ -203,10 +203,10 @@
 import DesignIllustration from '~/assets/illustrations/design.svg?inline'
 
 export default {
-  transition: 'logos',
   components: {
     DesignIllustration
   },
+  transition: 'logos',
   head() {
     const title = this.$t('design.meta.title')
     const description = this.$t('design.meta.description')
@@ -235,7 +235,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="postcss" scoped>
 figure {
   @apply relative p-4 text-center text-gray-500 table w-full;
 
diff --git a/pages/docs/release-notes.vue b/pages/docs/release-notes.vue
index 90f26ec6aa..23ebe2b9dd 100644
--- a/pages/docs/release-notes.vue
+++ b/pages/docs/release-notes.vue
@@ -35,6 +35,7 @@
 import groupBy from 'lodash.groupby'
 
 export default {
+  scrollToTop: true,
   async asyncData({ $content, params, store, error, app }) {
     let pages = []
 
@@ -60,30 +61,6 @@ export default {
       links: groupBy(pages, 'category')
     }
   },
-  computed: {
-    docLink() {
-      return `https://github.com/nuxt/nuxtjs.org/blob/master/content${this.path}.md`
-    },
-    codeSandBox() {
-      return 'https://codesandbox.io'
-    },
-    codeSandBoxLink() {
-      if (!this.page.github) {
-        return ''
-      }
-      return `${this.codeSandBox}/embed/github/nuxt/nuxt.js/tree/dev/examples/${this.page.github}?autoresize=1&view=editor`
-    },
-    liveEditLink() {
-      return `${this.codeSandBox}/s/github/nuxt/nuxt.js/tree/dev/examples/${this.page.github}?from-embed`
-    },
-    downloadLink() {
-      return (
-        'https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nuxt/nuxt.js/tree/dev/examples/' +
-        this.page.github
-      )
-    }
-  },
-  scrollToTop: true,
   head() {
     return {
       title: this.page.title,
@@ -114,6 +91,29 @@ export default {
         }
       ]
     }
+  },
+  computed: {
+    docLink() {
+      return `https://github.com/nuxt/nuxtjs.org/blob/master/content${this.path}.md`
+    },
+    codeSandBox() {
+      return 'https://codesandbox.io'
+    },
+    codeSandBoxLink() {
+      if (!this.page.github) {
+        return ''
+      }
+      return `${this.codeSandBox}/embed/github/nuxt/nuxt.js/tree/dev/examples/${this.page.github}?autoresize=1&view=editor`
+    },
+    liveEditLink() {
+      return `${this.codeSandBox}/s/github/nuxt/nuxt.js/tree/dev/examples/${this.page.github}?from-embed`
+    },
+    downloadLink() {
+      return (
+        'https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nuxt/nuxt.js/tree/dev/examples/' +
+        this.page.github
+      )
+    }
   }
 }
 </script>
diff --git a/pages/support.vue b/pages/support.vue
index 81d4f6e33a..f39fdf630d 100644
--- a/pages/support.vue
+++ b/pages/support.vue
@@ -9,7 +9,7 @@
             class="text-3xl xl:text-4xl text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary font-medium leading-normal mb-6 lg:pt-4"
           >
             {{ $t('support.title') }}
-            <template v-slot:nuxt>
+            <template #nuxt>
               <AppTitle />
             </template>
           </i18n>
@@ -18,10 +18,10 @@
             tag="h3"
             class="xl:text-lg text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary font-medium leading-relaxed mb-6"
           >
-            <template v-slot:break>
+            <template #break>
               <br />
             </template>
-            <template v-slot:team>
+            <template #team>
               <NuxtLink to="/team" class="text-nuxt-green underline">
                 NuxtJS team
               </NuxtLink>
@@ -105,7 +105,7 @@
         tag="p"
         class="text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary mb-8 transition-colors duration-300 ease-linear"
       >
-        <template v-slot:break>
+        <template #break>
           <br />
         </template>
       </i18n>