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

examples/nuxt-prefetch/README.md

@@ -0,0 +1,3 @@
+# Example of Nuxt.js prefetching
+
+Learn more at https://github.com/nuxt/nuxt.js/pull/4574

examples/nuxt-prefetch/layouts/default.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div v-if="$nuxt.isOffline" class="offline">
+      You are offline
+    </div>
+    <div class="container">
+      <h1>{{ $route.name }}</h1>
+      <Nuxt />
+    </div>
+  </div>
+</template>
+
+<style>
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+.container {
+  padding: 10px 20px;
+  padding-bottom: 40px;
+}
+.offline {
+  background: #3B8070;
+  color: white;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px;
+}
+a {
+  display: block;
+  padding: 10px 10px 10px 0px;
+  margin: 20px 0;
+  font-size: 20px;
+  border-bottom: 2px #ddd solid;
+  color: #3B8070;
+  text-decoration: none;
+  transition: border-bottom-color 0.3s linear;
+}
+a:hover,
+a.nuxt-link-exact-active {
+  background-color: rgb(245, 245, 245);
+}
+a.nuxt-link-prefetched:after {
+  content: '';
+  display: inline-block;
+  background: url('../assets/check.svg') no-repeat;
+  background-size: 14px;
+  width: 14px;
+  height: 14px;
+  position: relative;
+  right: -3px;
+  top: 1px;
+}
+</style>

examples/nuxt-prefetch/nuxt.config.js

@@ -0,0 +1,12 @@
+export default {
+  head: {
+    titleTemplate: '%s - NuxtJS Prefetching'
+  },
+  router: {
+    // To disable prefetching, uncomment the line
+    // prefetchLinks: false
+
+    // Activate prefetched class (default: false)
+    linkPrefetchedClass: 'nuxt-link-prefetched'
+  }
+}

examples/nuxt-prefetch/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "example-hello-world",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}

examples/nuxt-prefetch/pages/accelerated.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/active.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/agile.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/brisk.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/dashing.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/electric.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/flashing.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/fleet.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/fleeting.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/flying.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/hot.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/hurried.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/nimble.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/quick.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/racing.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>

examples/nuxt-prefetch/pages/rapid.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <NuxtLink v-for="link of $store.state.links" :key="link" :to="{ name: link }">
+      /{{ link }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: this.$route.name
+    }
+  }
+}
+</script>