feat(nuxt-link): Smart prefetching and $nuxt.isOffline

packages/config/src/config/router.js

@@ -10,5 +10,6 @@ export default () => ({
   scrollBehavior: null,
   parseQuery: false,
   stringifyQuery: false,
-  fallback: false
+  fallback: false,
+  prefetchLinks: true
 })

packages/server/src/middleware/modern.js

@@ -48,7 +48,7 @@ const setModernMode = (req, options) => {
     req.modernMode = isModernBrowser
   }
   if (options.dev) {
-    req.devModernMode = isModernBrowser
+    req.devModernMode = options.modern && isModernBrowser
   }
 }
 

packages/vue-app/src/index.js

@@ -17,7 +17,8 @@ export const templatesFiles = [
   'components/nuxt-error.vue',
   'components/nuxt-loading.vue',
   'components/nuxt-child.js',
-  'components/nuxt-link.js',
+  'components/nuxt-link.server.js',
+  'components/nuxt-link.client.js',
   'components/nuxt.js',
   'components/no-ssr.js',
   'views/app.template.html',

packages/vue-app/template/App.js

@@ -55,6 +55,7 @@ export default {
     ])
   },
   data: () => ({
+    isOnline: true,
     layout: null,
     layoutName: ''
   }),
@@ -65,8 +66,12 @@ export default {
     // Add this.$nuxt in child instances
     Vue.prototype.<%= globals.nuxt %> = this
     // add to window so we can listen when ready
-    if (typeof window !== 'undefined') {
+    if (process.client) {
       window.<%= globals.nuxt %> = <%= (globals.nuxt !== '$nuxt' ? 'window.$nuxt = ' : '') %>this
+      this.refreshOnlineStatus()
+      // Setup the listeners
+      window.addEventListener('online', this.refreshOnlineStatus)
+      window.addEventListener('offline', this.refreshOnlineStatus)
     }
     // Add $nuxt.error()
     this.error = this.nuxt.error
@@ -79,7 +84,24 @@ export default {
     'nuxt.err': 'errorChanged'
   },
   <% } %>
+  computed: {
+    isOffline() {
+      return !this.isOnline
+    }
+  },
   methods: {
+    refreshOnlineStatus() {
+      if (process.client) {
+        if (typeof window.navigator.onLine === 'undefined') {
+          // If the browser doesn't support connection status reports
+          // assume that we are online because most apps' only react
+          // when they now that the connection has been interrupted
+          this.isOnline = true
+        } else {
+          this.isOnline = window.navigator.onLine
+        }
+      }
+    },
     <% if (loading) { %>
     errorChanged() {
       if (this.nuxt.err && this.$loading) {

packages/vue-app/template/client.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import middleware from './middleware'
+import middleware from './middleware.js'
 import {
   applyAsyncData,
   sanitizeComponent,
@@ -14,8 +14,13 @@ import {
   compile,
   getQueryDiff,
   globalHandleError
-} from './utils'
-import { createApp, NuxtError } from './index'
+} from './utils.js'
+import { createApp, NuxtError } from './index.js'
+import NuxtLink from './components/nuxt-link.<%= router.prefetchLinks ? "client" : "server" %>.js' // should be included after ./index.js
+
+// Component: <NuxtLink>
+Vue.component(NuxtLink.name, NuxtLink)
+Vue.component('NLink', NuxtLink)
 
 const noopData = () => { return {} }
 const noopFetch = () => {}

packages/vue-app/template/components/nuxt-link.client.js

@@ -0,0 +1,89 @@
+<%= isTest ? '// @vue/component' : '' %>
+import Vue from 'vue'
+
+const requestIdleCallback = window.requestIdleCallback ||
+  function (cb) {
+    const start = Date.now()
+    return setTimeout(function () {
+      cb({
+        didTimeout: false,
+        timeRemaining: function () {
+          return Math.max(0, 50 - (Date.now() - start))
+        },
+      })
+    }, 1)
+  }
+const observer = window.IntersectionObserver && new window.IntersectionObserver(entries => {
+  entries.forEach(({ isIntersecting, target: link }) => {
+    if (!isIntersecting) {
+      return
+    }
+    link.__prefetch()
+  })
+})
+
+export default {
+  extends: Vue.component('RouterLink'),
+  name: 'NuxtLink',
+  props: {
+    noPrefetch: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {
+    if (!this.noPrefetch) {
+      requestIdleCallback(this.observe, { timeout: 2e3 })
+    }
+  },
+  beforeDestroy() {
+    if (this.__observed) {
+      observer.unobserve(this.$el)
+      delete this.$el.__prefetch
+    }
+  },
+  methods: {
+    observe() {
+      // If no IntersectionObserver, avoid prefetching
+      if (!observer) {
+        return
+      }
+      // Add to observer
+      if (this.shouldPrefetch()) {
+        this.$el.__prefetch = this.prefetch.bind(this)
+        observer.observe(this.$el)
+        this.__observed = true
+      }
+    },
+    shouldPrefetch() {
+      return this.getPrefetchComponents().length > 0
+    },
+    canPrefetch() {
+      const conn = navigator.connection
+      const hasBadConnection = this.$nuxt.isOffline || (conn && ((conn.effectiveType || '').includes('2g') || conn.saveData))
+
+      return !hasBadConnection
+    },
+    getPrefetchComponents() {
+      const ref = this.$router.resolve(this.to, this.$route, this.append)
+      const Components = ref.resolved.matched.map((r) => r.components.default)
+
+      return Components.filter((Component) => typeof Component === 'function' && !Component.options && !Component.__prefetched)
+    },
+    prefetch() {
+      if (!this.canPrefetch()) {
+        return
+      }
+      // Stop obersing this link (in case of internet connection changes)
+      observer.unobserve(this.$el)
+      const Components = this.getPrefetchComponents()
+
+      for (const Component of Components) {
+        try {
+          Component()
+          Component.__prefetched = true
+        } catch (e) {}
+      }
+    }
+  }
+}

packages/vue-app/template/components/nuxt-link.server.js

@@ -0,0 +1,13 @@
+<%= isTest ? '// @vue/component' : '' %>
+import Vue from 'vue'
+
+export default {
+  extends: Vue.component('RouterLink'),
+  name: 'NuxtLink',
+  props: {
+    noPrefetch: {
+      type: Boolean,
+      default: false
+    }
+  }
+}

packages/vue-app/template/index.js

@@ -3,7 +3,6 @@ import Meta from 'vue-meta'
 import { createRouter } from './router.js'
 import NoSsr from './components/no-ssr.js'
 import NuxtChild from './components/nuxt-child.js'
-import NuxtLink from './components/nuxt-link.js'
 import NuxtError from '<%= components.ErrorPage ? components.ErrorPage : "./components/nuxt-error.vue" %>'
 import Nuxt from './components/nuxt.js'
 import App from '<%= appPath %>'
@@ -23,9 +22,7 @@ Vue.component(NoSsr.name, NoSsr)
 Vue.component(NuxtChild.name, NuxtChild)
 Vue.component('NChild', NuxtChild)
 
-// Component: <NuxtLink
-Vue.component(NuxtLink.name, NuxtLink)
-Vue.component('NLink', NuxtLink)
+// Component NuxtLink is imported in server.js or client.js
 
 // Component: <Nuxt>`
 Vue.component(Nuxt.name, Nuxt)

packages/vue-app/template/server.js

@@ -1,9 +1,14 @@
 import { stringify } from 'querystring'
 import Vue from 'vue'
 import omit from 'lodash/omit'
-import middleware from './middleware'
-import { applyAsyncData, sanitizeComponent, getMatchedComponents, getContext, middlewareSeries, promisify, urlJoin } from './utils'
-import { createApp, NuxtError } from './index'
+import middleware from './middleware.js'
+import { applyAsyncData, sanitizeComponent, getMatchedComponents, getContext, middlewareSeries, promisify, urlJoin } from './utils.js'
+import { createApp, NuxtError } from './index.js'
+import NuxtLink from './components/nuxt-link.server.js'
+
+// Component: <NuxtLink>
+Vue.component(NuxtLink.name, NuxtLink)
+Vue.component('NLink', NuxtLink)
 
 const debug = require('debug')('nuxt:render')
 debug.color = 4 // force blue color

packages/vue-app/template/utils.js

@@ -566,4 +566,3 @@ function formatQuery(query) {
     return key + '=' + val
   }).filter(Boolean).join('&')
 }
-

packages/vue-app/types/index.d.ts

@@ -63,3 +63,12 @@ export interface LoadingObject {
   start(): void;
   finish(): void;
 }
+
+export interface NuxtApp extends Vue {
+  isOffline: boolean;
+  isOnline: boolean;
+  $loading: {
+    start(): void;
+    finish(): void;
+  };
+}

packages/vue-app/types/vue.d.ts

@@ -5,7 +5,7 @@
 import Vue, { ComponentOptions } from "vue";
 import { Route } from "vue-router";
 import { MetaInfo } from "vue-meta";
-import { Context, Middleware, Transition, LoadingObject } from "./index";
+import { Context, Middleware, Transition, LoadingObject, NuxtApp } from "./index";
 
 declare module "vue/types/options" {
   interface ComponentOptions<V extends Vue> {
@@ -24,8 +24,6 @@ declare module "vue/types/options" {
 
 declare module "vue/types/vue" {
   interface Vue {
-    $nuxt: {
-      $loading: LoadingObject;
-    };
+    $nuxt: NuxtApp
   }
 }

test/unit/async-config.size-limit.test.js

@@ -34,6 +34,6 @@ describe('size-limit test', () => {
     const responseSizeBytes = responseSizes.reduce((bytes, responseLength) => bytes + responseLength, 0)
     const responseSizeKilobytes = Math.ceil(responseSizeBytes / 1024)
     // Without gzip!
-    expect(responseSizeKilobytes).toBeLessThanOrEqual(171)
+    expect(responseSizeKilobytes).toBeLessThanOrEqual(180)
   })
 })