style: lint code

packages/@vuepress/core/lib/client/app.js

@@ -38,6 +38,7 @@ Vue.use(VuePress)
 Vue.mixin(dataMixin(ClientComputedMixin, siteData))
 // component for rendering markdown content and setting title etc.
 
+/* eslint-disable vue/match-component-file-name */
 Vue.component('Content', Content)
 Vue.component('ContentSlotsDistributor', ContentSlotsDistributor)
 Vue.component('OutboundLink', OutboundLink)
@@ -46,6 +47,7 @@ Vue.component('ClientOnly', ClientOnly)
 // core components
 Vue.component('Layout', getLayoutAsyncComponent('Layout'))
 Vue.component('NotFound', getLayoutAsyncComponent('NotFound'))
+/* eslint-disable-next-line vue/match-component-file-name */
 
 // global helper for adding base path to absolute urls
 Vue.prototype.$withBase = function (path) {
@@ -102,7 +104,7 @@ export function createApp (isServer) {
       router,
       render (h) {
         return h('div', { attrs: { id: 'app' }}, [
-          h('router-view', { ref: 'layout' }),
+          h('RouterView', { ref: 'layout' }),
           h('div', { class: 'global-ui' }, globalUIComponents.map(component => h(component)))
         ])
       }

packages/@vuepress/core/lib/client/components/GlobalLayout.vue

 <template>
-  <component :is="layout"/>
+  <component :is="layout" />
 </template>
 
 <script>
@@ -7,6 +7,16 @@ import Vue from 'vue'
 import { setGlobalInfo } from '@app/util'
 
 export default {
+  name: 'GlobalLayout',
+
+  computed: {
+    layout () {
+      const layout = this.getLayout()
+      setGlobalInfo('layout', layout)
+      return Vue.component(layout)
+    }
+  },
+
   methods: {
     getLayout () {
       if (this.$page.path) {
@@ -19,14 +29,6 @@ export default {
       }
       return 'NotFound'
     }
-  },
-
-  computed: {
-    layout () {
-      const layout = this.getLayout()
-      setGlobalInfo('layout', layout)
-      return Vue.component(layout)
-    }
   }
 }
 </script>

packages/@vuepress/core/lib/client/components/NotFound.vue

@@ -2,8 +2,12 @@
   <div class="theme-container">
     <div class="content">
       <h1>404</h1>
+
       <blockquote>{{ getMsg() }}</blockquote>
-      <router-link to="/">Take me home.</router-link>
+
+      <RouterLink to="/">
+        Take me home.
+      </RouterLink>
     </div>
   </div>
 </template>

packages/@vuepress/core/lib/client/components/OutboundLink.vue

 <template functional>
-  <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
-    <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
-    <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
+  <svg
+    class="icon outbound"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    x="0px"
+    y="0px"
+    viewBox="0 0 100 100"
+    width="15"
+    height="15"
+  >
+    <path
+      fill="currentColor"
+      d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
+    />
+    <polygon
+      fill="currentColor"
+      points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
+    />
   </svg>
 </template>
 

packages/@vuepress/core/lib/node/docs.fallback/.vuepress/theme/Layout.vue

 <template>
-  <Content/>
+  <Content />
 </template>

packages/@vuepress/core/lib/node/theme-api/Layout.fallback.vue

 <template>
-  <Content/>
+  <Content />
 </template>

packages/@vuepress/markdown/lib/link.js

@@ -67,14 +67,14 @@ module.exports = (md, externalAttrs) => {
     routerLinks.push(to)
 
     return Object.create(token, {
-      tag: { value: 'router-link' }
+      tag: { value: 'RouterLink' }
     })
   }
 
   md.renderer.rules.link_close = (tokens, idx, options, env, self) => {
     const token = tokens[idx]
     if (hasOpenRouterLink) {
-      token.tag = 'router-link'
+      token.tag = 'RouterLink'
       hasOpenRouterLink = false
     }
     if (hasOpenExternalLink) {

packages/@vuepress/plugin-back-to-top/BackToTop.vue

@@ -3,12 +3,25 @@
     <svg
       v-if="show"
       class="go-to-top"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 49.484 28.284"
       @click="scrollToTop"
-      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284"
     >
       <g transform="translate(-229 -126.358)">
-        <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(229 151.107) rotate(-45)"/>
-        <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(274.949 154.642) rotate(-135)"/>
+        <rect
+          fill="currentColor"
+          width="35"
+          height="5"
+          rx="2"
+          transform="translate(229 151.107) rotate(-45)"
+        />
+        <rect
+          fill="currentColor"
+          width="35"
+          height="5"
+          rx="2"
+          transform="translate(274.949 154.642) rotate(-135)"
+        />
       </g>
     </svg>
   </transition>
@@ -18,6 +31,8 @@
 import debounce from 'lodash.debounce'
 
 export default {
+  name: 'BackToTop',
+
   props: {
     threshold: {
       type: Number,
@@ -31,6 +46,12 @@ export default {
     }
   },
 
+  computed: {
+    show () {
+      return this.scrollTop > this.threshold
+    }
+  },
+
   mounted () {
     this.scrollTop = this.getScrollTop()
     window.addEventListener('scroll', debounce(() => {
@@ -49,12 +70,6 @@ export default {
       window.scrollTo({ top: 0, behavior: 'smooth' })
       this.scrollTop = 0
     }
-  },
-
-  computed: {
-    show () {
-      return this.scrollTop > this.threshold
-    }
   }
 }
 </script>

packages/@vuepress/plugin-back-to-top/enhanceAppFile.js

 import BackToTop from './BackToTop.vue'
 
 export default ({ Vue }) => {
+  // eslint-disable-next-line vue/match-component-file-name
   Vue.component('BackToTop', BackToTop)
 }

packages/@vuepress/plugin-pwa/lib/SWUpdatePopup.vue

@@ -10,8 +10,13 @@
         v-if="enabled"
         class="sw-update-popup"
       >
-        {{ message }}<br>
-        <button @click="reload">{{ buttonText }}</button>
+        {{ message }}
+
+        <br>
+
+        <button @click="reload">
+          {{ buttonText }}
+        </button>
       </div>
     </slot>
   </transition>
@@ -24,6 +29,8 @@ import { normalizeConfig } from '@app/util'
 import { popupConfig as defaultPopupConfig } from './i18n'
 
 export default {
+  name: 'SWUpdatePopup',
+
   data () {
     return {
       rawPopupConfig: SW_UPDATE_POPUP,
@@ -31,13 +38,6 @@ export default {
     }
   },
 
-  created () {
-    event.$on('sw-updated', this.onSWUpdated)
-    if (SW_UPDATE_POPUP === true) {
-      this.rawPopupConfig = defaultPopupConfig
-    }
-  },
-
   computed: {
     popupConfig () {
       return normalizeConfig(this, this.rawPopupConfig)
@@ -58,6 +58,13 @@ export default {
     }
   },
 
+  created () {
+    event.$on('sw-updated', this.onSWUpdated)
+    if (SW_UPDATE_POPUP === true) {
+      this.rawPopupConfig = defaultPopupConfig
+    }
+  },
+
   methods: {
     onSWUpdated (e) {
       this.updateEvent = e

packages/@vuepress/plugin-pwa/lib/enhanceAppFile.js

@@ -6,6 +6,7 @@ import SWUpdateEvent from './SWUpdateEvent'
 import event from './event'
 
 if (SW_UPDATE_POPUP) {
+  // eslint-disable-next-line vue/match-component-file-name
   Vue.component('SWUpdatePopup', () => import('./SWUpdatePopup.vue'))
 }
 

packages/@vuepress/plugin-search/SearchBox.vue

 <template>
   <div class="search-box">
     <input
-      @input="query = $event.target.value"
+      ref="input"
       aria-label="Search"
       :value="query"
       :class="{ 'focused': focused }"
       :placeholder="placeholder"
       autocomplete="off"
       spellcheck="false"
+      @input="query = $event.target.value"
       @focus="focused = true"
       @blur="focused = false"
       @keyup.enter="go(focusIndex)"
       @keyup.up="onUp"
       @keyup.down="onDown"
-      ref="input"
     >
     <ul
-      class="suggestions"
       v-if="showSuggestions"
+      class="suggestions"
       :class="{ 'align-right': alignRight }"
       @mouseleave="unfocus"
     >
       <li
-        class="suggestion"
         v-for="(s, i) in suggestions"
+        :key="i"
+        class="suggestion"
         :class="{ focused: i === focusIndex }"
         @mousedown="go(i)"
         @mouseenter="focus(i)"
       >
-        <a :href="s.path" @click.prevent>
+        <a
+          :href="s.path"
+          @click.prevent
+        >
           <span class="page-title">{{ s.title || s.path }}</span>
-          <span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
+          <span
+            v-if="s.header"
+            class="header"
+          >&gt; {{ s.header.title }}</span>
         </a>
       </li>
     </ul>
@@ -40,6 +47,8 @@
 <script>
 /* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
 export default {
+  name: 'SearchBox',
+
   data () {
     return {
       query: '',
@@ -49,15 +58,6 @@ export default {
     }
   },
 
-  mounted () {
-    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
-    document.addEventListener('keydown', this.onHotkey)
-  },
-
-  beforeDestroy () {
-    document.removeEventListener('keydown', this.onHotkey)
-  },
-
   computed: {
     showSuggestions () {
       return (
@@ -121,6 +121,15 @@ export default {
     }
   },
 
+  mounted () {
+    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
+    document.addEventListener('keydown', this.onHotkey)
+  },
+
+  beforeDestroy () {
+    document.removeEventListener('keydown', this.onHotkey)
+  },
+
   methods: {
     getPageLocalePath (page) {
       for (const localePath in this.$site.locales || {}) {

packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js

@@ -21,7 +21,7 @@ describe('DropdownLink', () => {
     const wrapper = mount(DropdownLink, {
       localVue: createLocalVue(),
       stubs: {
-        'router-link': RouterLinkStub
+        'RouterLink': RouterLinkStub
       },
       propsData: { item }
     })

packages/@vuepress/theme-default/__tests__/components/NavLink.spec.js

@@ -11,7 +11,7 @@ describe('NavLink', () => {
     const wrapper = mount(NavLink, {
       localVue: createLocalVue(),
       stubs: {
-        'router-link': RouterLinkStub
+        'RouterLink': RouterLinkStub
       },
       propsData: { item }
     })

packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue

@@ -14,6 +14,8 @@
 
 <script>
 export default {
+  name: 'AlgoliaSearchBox',
+
   props: ['options'],
 
   data () {
@@ -22,6 +24,16 @@ export default {
     }
   },
 
+  watch: {
+    $lang (newValue) {
+      this.update(this.options, newValue)
+    },
+
+    options (newValue) {
+      this.update(newValue, this.$lang)
+    }
+  },
+
   mounted () {
     this.initialize(this.options, this.$lang)
     this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
@@ -58,16 +70,6 @@ export default {
       this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
       this.initialize(options, lang)
     }
-  },
-
-  watch: {
-    $lang (newValue) {
-      this.update(this.options, newValue)
-    },
-
-    options (newValue) {
-      this.update(newValue, this.$lang)
-    }
   }
 }
 </script>

packages/@vuepress/theme-default/components/DropdownLink.vue

@@ -13,44 +13,47 @@
       <span
         class="arrow"
         :class="open ? 'down' : 'right'"
-      ></span>
+      />
     </button>
 
     <DropdownTransition>
       <ul
-        class="nav-dropdown"
         v-show="open"
+        class="nav-dropdown"
       >
         <li
-          class="dropdown-item"
-          :key="subItem.link || index"
           v-for="(subItem, index) in item.items"
+          :key="subItem.link || index"
+          class="dropdown-item"
         >
-          <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
+          <h4 v-if="subItem.type === 'links'">
+            {{ subItem.text }}
+          </h4>
 
           <ul
-            class="dropdown-subitem-wrapper"
             v-if="subItem.type === 'links'"
+            class="dropdown-subitem-wrapper"
           >
             <li
-              class="dropdown-subitem"
-              :key="childSubItem.link"
               v-for="childSubItem in subItem.items"
+              :key="childSubItem.link"
+              class="dropdown-subitem"
             >
               <NavLink
+                :item="childSubItem"
                 @focusout="
                   isLastItemOfArray(childSubItem, subItem.items) &&
-                  isLastItemOfArray(subItem, item.items) &&
-                  setOpen(false)
+                    isLastItemOfArray(subItem, item.items) &&
+                    setOpen(false)
                 "
-                :item="childSubItem"/>
+              />
             </li>
           </ul>
 
           <NavLink
             v-else
-            @focusout="isLastItemOfArray(subItem, item.items) && setOpen(false)"
             :item="subItem"
+            @focusout="isLastItemOfArray(subItem, item.items) && setOpen(false)"
           />
         </li>
       </ul>
@@ -64,12 +67,11 @@ import DropdownTransition from '@theme/components/DropdownTransition.vue'
 import last from 'lodash/last'
 
 export default {
-  components: { NavLink, DropdownTransition },
+  name: 'DropdownLink',
 
-  data () {
-    return {
-      open: false
-    }
+  components: {
+    NavLink,
+    DropdownTransition
   },
 
   props: {
@@ -78,13 +80,24 @@ export default {
     }
   },
 
-  computed: {
+  data () {
+    return {
+      open: false
+    }
+  },
 
+  computed: {
     dropdownAriaLabel () {
       return this.item.ariaLabel || this.item.text
     }
   },
 
+  watch: {
+    $route () {
+      this.open = false
+    }
+  },
+
   methods: {
     setOpen (value) {
       this.open = value
@@ -93,12 +106,6 @@ export default {
     isLastItemOfArray (item, array) {
       return last(array) === item
     }
-  },
-
-  watch: {
-    $route () {
-      this.open = false
-    }
   }
 }
 </script>

packages/@vuepress/theme-default/components/DropdownTransition.vue

@@ -5,7 +5,7 @@
     @after-enter="unsetHeight"
     @before-leave="setHeight"
   >
-    <slot/>
+    <slot />
   </transition>
 </template>
 

packages/@vuepress/theme-default/components/Home.vue

 <template>
-  <main class="home" aria-labelledby="main-title">
+  <main
+    class="home"
+    aria-labelledby="main-title"
+  >
     <header class="hero">
       <img
         v-if="data.heroImage"
@@ -7,15 +10,23 @@
         :alt="data.heroAlt || 'hero'"
       >
 
-      <h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>
+      <h1
+        v-if="data.heroText !== null"
+        id="main-title"
+      >
+        {{ data.heroText || $title || 'Hello' }}
+      </h1>
 
-      <p v-if="data.tagline !== null" class="description">
+      <p
+        v-if="data.tagline !== null"
+        class="description"
+      >
         {{ data.tagline || $description || 'Welcome to your VuePress site' }}
       </p>
 
       <p
-        class="action"
         v-if="data.actionText && data.actionLink"
+        class="action"
       >
         <NavLink
           class="action-button"
@@ -25,24 +36,24 @@
     </header>
 
     <div
-      class="features"
       v-if="data.features && data.features.length"
+      class="features"
     >
       <div
-        class="feature"
         v-for="(feature, index) in data.features"
         :key="index"
+        class="feature"
       >
         <h2>{{ feature.title }}</h2>
         <p>{{ feature.details }}</p>
       </div>
     </div>
 
-    <Content class="theme-default-content custom"/>
+    <Content class="theme-default-content custom" />
 
     <div
-      class="footer"
       v-if="data.footer"
+      class="footer"
     >
       {{ data.footer }}
     </div>
@@ -53,6 +64,8 @@
 import NavLink from '@theme/components/NavLink.vue'
 
 export default {
+  name: 'Home',
+
   components: { NavLink },
 
   computed: {

packages/@vuepress/theme-default/components/NavLink.vue

 <template>
-  <router-link
+  <RouterLink
+    v-if="isInternal"
     class="nav-link"
     :to="link"
-    @focusout.native="focusoutAction"
-    v-if="isInternal"
     :exact="exact"
-  >{{ item.text }}</router-link>
+    @focusout.native="focusoutAction"
+  >
+    {{ item.text }}
+  </RouterLink>
   <a
     v-else
     :href="link"
-    @focusout="focusoutAction"
     class="nav-link external"
     :target="target"
     :rel="rel"
+    @focusout="focusoutAction"
   >
     {{ item.text }}
-    <OutboundLink v-if="isBlankTarget"/>
+    <OutboundLink v-if="isBlankTarget" />
   </a>
 </template>
 
@@ -23,6 +25,8 @@
 import { isExternal, isMailto, isTel, ensureExt } from '../util'
 
 export default {
+  name: 'NavLink',
+
   props: {
     item: {
       required: true

packages/@vuepress/theme-default/components/NavLinks.vue

 <template>
   <nav
-    class="nav-links"
     v-if="userLinks.length || repoLink"
+    class="nav-links"
   >
     <!-- user links -->
     <div
-      class="nav-item"
       v-for="item in userLinks"
       :key="item.link"
+      class="nav-item"
     >
       <DropdownLink
         v-if="item.type === 'links'"
@@ -28,7 +28,7 @@
       rel="noopener noreferrer"
     >
       {{ repoLabel }}
-      <OutboundLink/>
+      <OutboundLink />
     </a>
   </nav>
 </template>
@@ -39,7 +39,12 @@ import { resolveNavLinkItem } from '../util'
 import NavLink from '@theme/components/NavLink.vue'
 
 export default {
-  components: { NavLink, DropdownLink },
+  name: 'NavLinks',
+
+  components: {
+    NavLink,
+    DropdownLink
+  },
 
   computed: {
     userNav () {

packages/@vuepress/theme-default/components/Navbar.vue

 <template>
   <header class="navbar">
-    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
+    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
 
-    <router-link
+    <RouterLink
       :to="$localePath"
       class="home-link"
     >
       <img
-        class="logo"
         v-if="$site.themeConfig.logo"
+        class="logo"
         :src="$withBase($site.themeConfig.logo)"
         :alt="$siteTitle"
       >
       <span
+        v-if="$siteTitle"
         ref="siteName"
         class="site-name"
-        v-if="$siteTitle"
         :class="{ 'can-hide': $site.themeConfig.logo }"
       >{{ $siteTitle }}</span>
-    </router-link>
+    </RouterLink>
 
     <div
       class="links"
@@ -30,8 +30,8 @@
         v-if="isAlgoliaSearch"
         :options="algolia"
       />
-      <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
-      <NavLinks class="can-hide"/>
+      <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
+      <NavLinks class="can-hide" />
     </div>
   </header>
 </template>
@@ -43,7 +43,14 @@ import SidebarButton from '@theme/components/SidebarButton.vue'
 import NavLinks from '@theme/components/NavLinks.vue'
 
 export default {
-  components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
+  name: 'Navbar',
+
+  components: {
+    SidebarButton,
+    NavLinks,
+    SearchBox,
+    AlgoliaSearchBox
+  },
 
   data () {
     return {
@@ -51,6 +58,16 @@ export default {
     }
   },
 
+  computed: {
+    algolia () {
+      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
+    },
+
+    isAlgoliaSearch () {
+      return this.algolia && this.algolia.apiKey && this.algolia.indexName
+    }
+  },
+
   mounted () {
     const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
     const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
@@ -64,16 +81,6 @@ export default {
     }
     handleLinksWrapWidth()
     window.addEventListener('resize', handleLinksWrapWidth, false)
-  },
-
-  computed: {
-    algolia () {
-      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
-    },
-
-    isAlgoliaSearch () {
-      return this.algolia && this.algolia.apiKey && this.algolia.indexName
-    }
   }
 }
 

packages/@vuepress/theme-default/components/PageEdit.vue

 <template>
   <footer class="page-edit">
-    <div class="edit-link" v-if="editLink">
-      <a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
+    <div
+      v-if="editLink"
+      class="edit-link"
+    >
+      <a
+        :href="editLink"
+        target="_blank"
+        rel="noopener noreferrer"
+      >{{ editLinkText }}</a>
       <OutboundLink />
     </div>
 
-    <div class="last-updated" v-if="lastUpdated">
+    <div
+      v-if="lastUpdated"
+      class="last-updated"
+    >
       <span class="prefix">{{ lastUpdatedText }}:</span>
       <span class="time">{{ lastUpdated }}</span>
     </div>
   </footer>
 </template>
+
 <script>
 import isNil from 'lodash/isNil'
 import { endingSlashRE, outboundRE } from '../util'
 
 export default {
   name: 'PageEdit',
+
   computed: {
     lastUpdated () {
       return this.$page.lastUpdated
@@ -94,6 +106,7 @@ export default {
   }
 }
 </script>
+
 <style lang="stylus">
 @require '../styles/wrapper.styl'
 

packages/@vuepress/theme-default/components/PageNav.vue

 <template>
-  <div class="page-nav" v-if="prev || next">
+  <div
+    v-if="prev || next"
+    class="page-nav"
+  >
     <p class="inner">
-      <span v-if="prev" class="prev">
+      <span
+        v-if="prev"
+        class="prev"
+      >
         ←
-        <a v-if="prev.type === 'external'" class="prev" :href="prev.path" target="_blank" rel='noopener noreferrer'>{{ prev.title || prev.path }}<OutboundLink /></a>
-        <router-link v-else class="prev" :to="prev.path">{{ prev.title || prev.path }}</router-link>
+        <a
+          v-if="prev.type === 'external'"
+          class="prev"
+          :href="prev.path"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ prev.title || prev.path }}
+
+          <OutboundLink />
+        </a>
+
+        <RouterLink
+          v-else
+          class="prev"
+          :to="prev.path"
+        >
+          {{ prev.title || prev.path }}
+        </RouterLink>
       </span>
 
-      <span v-if="next" class="next">
-        <a v-if="next.type === 'external'" :href="next.path" target="_blank" rel='noopener noreferrer'>{{ next.title || next.path }}<OutboundLink /></a>
-        <router-link v-else :to="next.path">{{ next.title || next.path }}</router-link>
+      <span
+        v-if="next"
+        class="next"
+      >
+        <a
+          v-if="next.type === 'external'"
+          :href="next.path"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ next.title || next.path }}
+
+          <OutboundLink />
+        </a>
+
+        <RouterLink
+          v-else
+          :to="next.path"
+        >
+          {{ next.title || next.path }}
+        </RouterLink>
         →
       </span>
     </p>
   </div>
 </template>
+
 <script>
 import { resolvePage } from '../util'
 import isString from 'lodash/isString'
@@ -22,7 +64,9 @@ import isNil from 'lodash/isNil'
 
 export default {
   name: 'PageNav',
+
   props: ['sidebarItems'],
+
   computed: {
     prev () {
       return resolvePageLink(LINK_TYPES.PREV, this)
@@ -116,5 +160,4 @@ function flatten (items, res) {
     overflow auto // clear float
   .next
     float right
-
 </style>

packages/@vuepress/theme-default/components/Sidebar.vue

 <template>
   <aside class="sidebar">
-    <NavLinks/>
-    <slot name="top"/>
-    <SidebarLinks :depth="0" :items="items"/>
-    <slot name="bottom"/>
+    <NavLinks />
+
+    <slot name="top" />
+
+    <SidebarLinks
+      :depth="0"
+      :items="items"
+    />
+    <slot name="bottom" />
   </aside>
 </template>
 

packages/@vuepress/theme-default/components/SidebarButton.vue

 <template>
-  <div class="sidebar-button" @click="$emit('toggle-sidebar')">
-    <svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512">
-      <path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path>
+  <div
+    class="sidebar-button"
+    @click="$emit('toggle-sidebar')"
+  >
+    <svg
+      class="icon"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      role="img"
+      viewBox="0 0 448 512"
+    >
+      <path
+        fill="currentColor"
+        d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
+        class=""
+      />
     </svg>
   </div>
 </template>

packages/@vuepress/theme-default/components/SidebarGroup.vue

@@ -9,7 +9,7 @@
       `depth-${depth}`
     ]"
   >
-    <router-link
+    <RouterLink
       v-if="item.path"
       class="sidebar-heading clickable"
       :class="{
@@ -21,11 +21,11 @@
     >
       <span>{{ item.title }}</span>
       <span
-        class="arrow"
         v-if="collapsable"
-        :class="open ? 'down' : 'right'">
-      </span>
-    </router-link>
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      />
+    </RouterLink>
 
     <p
       v-else
@@ -35,18 +35,18 @@
     >
       <span>{{ item.title }}</span>
       <span
-        class="arrow"
         v-if="collapsable"
-        :class="open ? 'down' : 'right'">
-      </span>
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      />
     </p>
 
     <DropdownTransition>
       <SidebarLinks
+        v-if="open || !collapsable"
         class="sidebar-group-items"
         :items="item.children"
-        v-if="open || !collapsable"
-        :sidebarDepth="item.sidebarDepth"
+        :sidebar-depth="item.sidebarDepth"
         :depth="depth + 1"
       />
     </DropdownTransition>
@@ -59,12 +59,23 @@ import DropdownTransition from '@theme/components/DropdownTransition.vue'
 
 export default {
   name: 'SidebarGroup',
-  props: ['item', 'open', 'collapsable', 'depth'],
-  components: { DropdownTransition },
+
+  components: {
+    DropdownTransition
+  },
+
+  props: [
+    'item',
+    'open',
+    'collapsable',
+    'depth'
+  ],
+
   // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
   beforeCreate () {
     this.$options.components.SidebarLinks = require('@theme/components/SidebarLinks.vue').default
   },
+
   methods: { isActive }
 }
 </script>

packages/@vuepress/theme-default/components/SidebarLink.vue

@@ -73,7 +73,7 @@ function renderLink (h, to, text, active, level) {
     }
   }
 
-  return h('router-link', component, text)
+  return h('RouterLink', component, text)
 }
 
 function renderChildren (h, children, path, route, maxDepth, depth = 1) {

packages/@vuepress/theme-default/components/SidebarLinks.vue

 <template>
   <ul
-    class="sidebar-links"
     v-if="items.length"
+    class="sidebar-links"
   >
-    <li v-for="(item, i) in items" :key="i">
+    <li
+      v-for="(item, i) in items"
+      :key="i"
+    >
       <SidebarGroup
         v-if="item.type === 'group'"
         :item="item"
@@ -14,7 +17,7 @@
       />
       <SidebarLink
         v-else
-        :sidebarDepth="sidebarDepth"
+        :sidebar-depth="sidebarDepth"
         :item="item"
       />
     </li>
@@ -43,16 +46,16 @@ export default {
     }
   },
 
-  created () {
-    this.refreshIndex()
-  },
-
   watch: {
     '$route' () {
       this.refreshIndex()
     }
   },
 
+  created () {
+    this.refreshIndex()
+  },
+
   methods: {
     refreshIndex () {
       const index = resolveOpenGroupIndex(

packages/@vuepress/theme-default/layouts/404.vue

@@ -2,8 +2,12 @@
   <div class="theme-container">
     <div class="theme-default-content">
       <h1>404</h1>
+
       <blockquote>{{ getMsg() }}</blockquote>
-      <router-link to="/">Take me home.</router-link>
+
+      <RouterLink to="/">
+        Take me home.
+      </RouterLink>
     </div>
   </div>
 </template>

packages/@vuepress/theme-default/layouts/Layout.vue

@@ -13,7 +13,7 @@
     <div
       class="sidebar-mask"
       @click="toggleSidebar(false)"
-    ></div>
+    />
 
     <Sidebar
       :items="sidebarItems"
@@ -23,21 +23,21 @@
         <slot name="sidebar-top" />
       </template>
       <template #bottom>
-        <slot name="sidebar-bottom"/>
+        <slot name="sidebar-bottom" />
       </template>
     </Sidebar>
 
-    <Home v-if="$page.frontmatter.home"/>
+    <Home v-if="$page.frontmatter.home" />
 
     <Page
       v-else
       :sidebar-items="sidebarItems"
     >
       <template #top>
-        <slot name="page-top"/>
+        <slot name="page-top" />
       </template>
       <template #bottom>
-        <slot name="page-bottom"/>
+        <slot name="page-bottom" />
       </template>
     </Page>
   </div>
@@ -51,7 +51,14 @@ import Sidebar from '@theme/components/Sidebar.vue'
 import { resolveSidebarItems } from '../util'
 
 export default {
-  components: { Home, Page, Sidebar, Navbar },
+  name: 'Layout',
+
+  components: {
+    Home,
+    Page,
+    Sidebar,
+    Navbar
+  },
 
   data () {
     return {

packages/@vuepress/theme-vue/components/BuySellAds.vue

@@ -3,11 +3,17 @@
 const ID = 'bsa-cpc-script'
 
 export default {
-  render (h) {
-    return h('div', { class: 'bsa-cpc-wrapper' }, [
-      h('div', { ref: 'ads', class: 'bsa-cpc' })
-    ])
+  name: 'BuySellAds',
+
+  watch: {
+    '$route' (to, from) {
+      if (to.path !== from.path) {
+        this.$refs.ads.innerHTML = ''
+        this.load()
+      }
+    }
   },
+
   mounted () {
     if (!document.getElementById(ID)) {
       const s = document.createElement('script')
@@ -21,14 +27,7 @@ export default {
       this.load()
     }
   },
-  watch: {
-    '$route' (to, from) {
-      if (to.path !== from.path) {
-        this.$refs.ads.innerHTML = ''
-        this.load()
-      }
-    }
-  },
+
   methods: {
     load () {
       if (typeof _bsa !== 'undefined' && _bsa) {
@@ -39,6 +38,12 @@ export default {
         })
       }
     }
+  },
+
+  render (h) {
+    return h('div', { class: 'bsa-cpc-wrapper' }, [
+      h('div', { ref: 'ads', class: 'bsa-cpc' })
+    ])
   }
 }
 </script>

packages/@vuepress/theme-vue/components/CarbonAds.vue

 <script>
 export default {
-  render (h) {
-    return h('div', { class: 'carbon-ads' })
-  },
-  mounted () {
-    this.load()
-  },
+  name: 'CarbonAds',
+
   watch: {
     '$route' (to, from) {
       if (
@@ -20,6 +16,11 @@ export default {
       }
     }
   },
+
+  mounted () {
+    this.load()
+  },
+
   methods: {
     load () {
       const s = document.createElement('script')
@@ -27,6 +28,10 @@ export default {
       s.src = `//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg`
       this.$el.appendChild(s)
     }
+  },
+
+  render (h) {
+    return h('div', { class: 'carbon-ads' })
   }
 }
 </script>

packages/@vuepress/theme-vue/layouts/Layout.vue

 <template>
   <ParentLayout>
     <template #sidebar-top>
-      <CarbonAds/>
+      <CarbonAds />
     </template>
     <template #page-bottom>
-      <BuySellAds/>
+      <BuySellAds />
     </template>
   </ParentLayout>
 </template>
@@ -15,6 +15,8 @@ import CarbonAds from '@theme/components/CarbonAds.vue'
 import BuySellAds from '@theme/components/BuySellAds.vue'
 
 export default {
+  name: 'Layout',
+
   components: {
     ParentLayout,
     CarbonAds,

packages/docs/docs/.vuepress/components/Bit.vue

 <template>
   <p class="bit-sponsor">
-    <a href="https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue" target="_blank">
+    <a
+      href="https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue"
+      target="_blank"
+    >
       <span>This project is sponsored by</span>
-      <img alt="bit" src="https://raw.githubusercontent.com/vuejs/vuejs.org/master/themes/vue/source/images/bit.png">
+      <img
+        alt="bit"
+        src="https://raw.githubusercontent.com/vuejs/vuejs.org/master/themes/vue/source/images/bit.png"
+      >
     </a>
   </p>
 </template>

packages/docs/docs/.vuepress/components/OtherComponent.vue

 <template>
-  <p class="demo">This is another component</p>
+  <p class="demo">
+    This is another component
+  </p>
 </template>

packages/docs/docs/.vuepress/components/svg-container.vue

 <template>
   <div class="svg-container">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
 <style lang="stylus">
-  .svg-container
-    margin 30px auto
-    text-align center
-    & > svg
-      max-width 100%
+.svg-container
+  margin 30px auto
+  text-align center
+  & > svg
+    max-width 100%
 </style>

scripts/test.js

@@ -29,4 +29,3 @@ createApp({
     console.error(err)
     process.exit(1)
   })
-