Example ready with Vue 2.4

examples/async-component-injection/assets/css/common.css

@@ -0,0 +1,69 @@
+body {
+  font-family: "Roboto", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, serif;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 16px;
+  word-spacing: 1px;
+  color: #666;
+  margin: 0;
+}
+img {
+  border: none;
+}
+a {
+  color: #666;
+  text-decoration: none;
+  transition: color 0.2s ease, border-color 0.2s ease;
+}
+.header {
+  letter-spacing: 5px;
+  margin: 50px auto 15px;
+  text-align: center;
+}
+.header a {
+  font-size: 15px;
+  color: #444;
+}
+.links {
+  text-align: center;
+  font-family: "Roboto", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, serif;
+  color: #999;
+  font-size: 24px;
+  margin: 0;
+}
+.links a {
+  cursor: pointer;
+  padding: 2px;
+  margin: 0 3px;
+}
+.links img {
+  width: 15px;
+  height: 15px;
+}
+.header,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
+  font-weight: 400;
+  color: #444;
+}
+.main {
+  max-width: 600px;
+  margin: 50px auto;
+  padding: 0 30px 50px;
+  position: relative;
+}
+@media screen and (max-width: 420px) {
+  .header {
+    margin: 40px auto 10px;
+  }
+  .header a {
+    font-size: 14px;
+  }
+}

examples/async-component-injection/assets/css/index.css

@@ -0,0 +1,57 @@
+.main > ul {
+  list-style-type: none;
+  padding: 0;
+  padding-top: 4px;
+}
+.main > ul > li {
+  position: relative;
+  padding: 30px 0 30px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.main > ul > li:first-child {
+  margin-top: -30px;
+}
+.main h2,
+.main h3 {
+  letter-spacing: 1px;
+  margin: 0;
+  text-transform: uppercase;
+}
+.main h2 {
+  font-size: 20px;
+  letter-spacing: 1px;
+  margin-left: 120px;
+}
+.main h2 a {
+  color: #444;
+}
+.main h2 a:hover {
+  color: #f33;
+}
+.main h3 {
+  font-size: 13px;
+  color: #999;
+  position: absolute;
+  left: 0;
+  top: 33px;
+}
+@media screen and (max-width: 420px) {
+  .main h2 {
+    font-size: 16px;
+    margin-left: 0;
+  }
+  .main h2 a:hover {
+    color: #f66;
+  }
+  .main h3 {
+    font-size: 11px;
+    position: static;
+    margin-bottom: 10px;
+  }
+  .main ul li {
+    padding: 18px 0 20px;
+  }
+  .main ul li:first-child {
+    margin-top: -35px;
+  }
+}

examples/async-component-injection/assets/css/post.css

@@ -0,0 +1,307 @@
+.gutter pre {
+  color: #999;
+}
+pre {
+  color: #525252;
+}
+pre .function .keyword,
+pre .constant {
+  color: #0092db;
+}
+pre .keyword,
+pre .attribute {
+  color: #e96900;
+}
+pre .number,
+pre .literal {
+  color: #ae81ff;
+}
+pre .tag,
+pre .tag .title,
+pre .change,
+pre .winutils,
+pre .flow,
+pre .lisp .title,
+pre .clojure .built_in,
+pre .nginx .title,
+pre .tex .special {
+  color: #2973b7;
+}
+pre .class .title {
+  color: #fff;
+}
+pre .symbol,
+pre .symbol .string,
+pre .value,
+pre .regexp {
+  color: #42b983;
+}
+pre .title {
+  color: #a6e22e;
+}
+pre .tag .value,
+pre .string,
+pre .subst,
+pre .haskell .type,
+pre .preprocessor,
+pre .ruby .class .parent,
+pre .built_in,
+pre .sql .aggregate,
+pre .django .template_tag,
+pre .django .variable,
+pre .smalltalk .class,
+pre .javadoc,
+pre .django .filter .argument,
+pre .smalltalk .localvars,
+pre .smalltalk .array,
+pre .attr_selector,
+pre .pseudo,
+pre .addition,
+pre .stream,
+pre .envvar,
+pre .apache .tag,
+pre .apache .cbracket,
+pre .tex .command,
+pre .prompt {
+  color: #42b983;
+}
+pre .comment,
+pre .java .annotation,
+pre .python .decorator,
+pre .template_comment,
+pre .pi,
+pre .doctype,
+pre .deletion,
+pre .shebang,
+pre .apache .sqbracket,
+pre .tex .formula {
+  color: #b3b3b3;
+}
+pre .coffeescript .javascript,
+pre .javascript .xml,
+pre .tex .formula,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .xml .css,
+pre .xml .cdata {
+  opacity: 0.5;
+}
+.main .post {
+  position: relative;
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.main .post h1,
+.main .post h2 {
+  text-transform: uppercase;
+  letter-spacing: 0px;
+}
+.main .post h1 a:hover,
+.main .post h2 a:hover {
+  border-bottom: 3px solid #666;
+}
+.main .post h1 {
+  font-size: 32px;
+  margin: 0 0 45px;
+  letter-spacing: 1px;
+}
+.main .post h2 {
+  font-size: 24px;
+  margin: 60px 0 30px;
+  position: relative;
+}
+.main .post h2:before {
+  content: '';
+  border-left: 5px solid #41b883;
+  position: absolute;
+  left: -15px;
+  height: 75%;
+  top: 12%;
+}
+.main .post h3 {
+  margin: 30px 0 15px;
+}
+.main .post .date {
+  font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
+  font-size: 13px;
+  color: #999;
+  margin: 0 0 30px;
+  letter-spacing: 1px;
+  position: initial;
+  text-transform: none;
+}
+.main .post .content {
+  text-align: left;
+  line-height: 1.8em;
+}
+.main .post .content p,
+.main .post .content ul,
+.main .post .content ol {
+  margin: 1em 0 1.5em;
+}
+.main .post .content strong {
+  font-weight: 600;
+  color: #444;
+}
+.main .post .content ol {
+  padding-left: 1.6em;
+}
+.main .post .content ul {
+  padding-left: 15px;
+  list-style-type: none;
+}
+.main .post .content ul li:before {
+  position: absolute;
+  font-weight: 600;
+  content: " · ";
+  margin: 0;
+  left: 0;
+}
+.main .post .content a {
+  color: #41b883;
+  border-bottom: 2px solid transparent;
+}
+.main .post .content a:hover {
+  color: #41b883;
+  border-bottom-color: #41b883;
+}
+.main .post .content .highlight,
+.main .post .content .highlight table {
+  margin: 0;
+  width: 100%;
+}
+.main .post .content .highlight {
+  overflow-x: auto;
+}
+.main .post .content .highlight table,
+.main .post .content .highlight tr,
+.main .post .content .highlight td {
+  padding: 0;
+  border-collapse: collapse;
+}
+.main .post .content code {
+  font-family: "Roboto Mono", "Menlo", "Consolas", monospace;
+  font-size: 13px;
+  background-color: #f6f6f6;
+  padding: 3px 10px;
+  margin: 0 5px;
+  border-radius: 2px;
+}
+.main .post .content pre {
+  font-family: "Roboto Mono", "Menlo", "Consolas", monospace;
+  font-size: 13px;
+  overflow-x: auto;
+  text-align: left;
+  padding: 15px 25px;
+  background-color: #f6f6f6;
+  line-height: 1.5em;
+}
+.main .post .content .code pre {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.main .post .content .gutter pre {
+  padding: 15px 0 15px 15px;
+  color: #75715e;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.main .post .content blockquote {
+  margin: 2em 0;
+  padding-left: 30px;
+  border-left: 5px solid #e6e6e6;
+}
+.main .post .content blockquote p {
+  font-size: 17px;
+  font-style: italic;
+  line-height: 1.8em;
+  color: #999;
+}
+.main .post img {
+  display: block;
+  max-width: 100%;
+}
+.blog-nav {
+  position: fixed;
+  bottom: 20px;
+  height: 20px;
+  line-height: 20px;
+  font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
+  font-size: 15px;
+  color: #999;
+  text-decoration: none;
+  cursor: pointer;
+  letter-spacing: 1px;
+  border-bottom: 3px solid transparent;
+}
+.blog-nav:hover {
+  color: #333;
+  border-bottom-color: #333;
+}
+#newer {
+  left: 40px;
+}
+#older {
+  right: 40px;
+}
+.show-comments {
+  font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
+  text-align: center;
+}
+.show-comments a {
+  color: #999;
+  cursor: pointer;
+}
+.show-comments a:hover {
+  color: #666;
+}
+@media screen and (max-width: 900px) {
+  .main .post {
+    padding-bottom: 80px;
+  }
+  .blog-nav {
+    position: absolute;
+    bottom: 30px;
+  }
+  #newer {
+    left: 0;
+  }
+  #older {
+    right: 0;
+  }
+}
+@media screen and (max-width: 420px) {
+  .main {
+    margin-top: 32px;
+  }
+  .main .post h1 {
+    font-size: 24px;
+    margin: 0 0 30px;
+  }
+  .main .post h2 {
+    font-size: 20px;
+    margin: 30px 0 15px;
+  }
+  .main .post h3 {
+    font-size: 16px;
+    line-height: 1.3em;
+  }
+  .main .post .date {
+    font-size: 12px;
+    margin: 0 0 20px;
+  }
+  .main .post .content {
+    font-size: 15px;
+  }
+  .main .post .content pre {
+    font-size: 12px;
+  }
+  .main .post .content blockquote p {
+    font-size: 16px;
+  }
+  .blog-nav {
+    font-size: 14px;
+    color: #444;
+  }
+}

examples/async-component-injection/layouts/default.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="wrapper">
+    <div class="header">
+      <nuxt-link to="/">NUXT BLOG</nuxt-link>
+    </div>
+    <p class="links">
+      <a href="https://twitter.com/nuxt_js" target="_blank"><img src="~assets/img/twitter.png"></a>
+      <a href="https://github.com/nuxt/nuxt.js" target="_blank"><img src="~assets/img/github.png"></a>
+    </p>
+    <div class="main">
+      <nuxt/>
+    </div>
+  </div>
+</template>
+

examples/async-component-injection/nuxt.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  head: {
+    title: 'Nuxt Blog',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
+    ],
+    link: [
+      { rel: 'icon', href: '/favicon.ico', type: 'image/x-icon' },
+      { rel: 'stylesheet', href: 'http://fonts.googleapis.com/css?family=Montserrat|Roboto:400,400italic,600|Roboto+Mono', type: 'text/css' }
+    ]
+  },
+  css: [
+    '@/assets/css/common.css'
+  ],
+  generate: {
+    routes: [
+      '/deep-dive-into-ocean',
+      '/welcome-to-my-blog'
+    ]
+  }
+}

examples/async-component-injection/pages/_slug.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="post">
+    <component :is="component"/>
+  </div>
+</template>
+
+<script>
+// See https://vuejs.org/v2/guide/components.html#Advanced-Async-Components
+const getPost = (slug) => ({
+  component: import(`@/posts/${slug}`),
+  error: require('@/posts/404')
+})
+
+export default {
+  beforeCreate () {
+    this.component = () => getPost(this.$route.params.slug)
+  }
+}
+</script>
+
+<style src="@/assets/css/post.css"/>

examples/async-component-injection/pages/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <ul>
+    <li v-for="(post, index) in posts" :key="index">
+        <h3>{{ post.date }}</h3>
+        <h2><nuxt-link :to="post.link">{{ post.title }}</nuxt-link></h2>
+    </li>
+    <li style="border:none;text-align: center;font-size: 14px;">Design from <a href="http://blog.evanyou.me" target="_blank">EvanYou.me</a></li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    posts: [
+      { date: 'Jul 10, 2017', title: 'Deep dive into the Ocean', link: '/deep-dive-into-ocean' },
+      { date: 'Jul 08, 2017', title: 'Welcome to my blog', link: '/welcome-to-my-blog' }
+    ]
+  })
+}
+</script>
+
+<style src="@/assets/css/index.css"/>

examples/async-component-injection/posts/404.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1 style="text-align: center;">Article not found</h1>
+</template>

examples/async-component-injection/posts/deep-dive-into-ocean.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3 class="date">Jul 10, 2017</h3>
+    <h1>Deep dive into the Ocean</h1>
+    <div class="content">
+      <img src="~assets/img/swimmer.jpg">
+      <h2>Subtitle #1</h2>
+      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
+      <h2>Another subtitle</h2>
+      <ul>
+        <li>Vue.js</li>
+        <li>Nuxt.js</li>
+        <li>= <3</li>
+      </ul>
+    </div>
+  </div>
+</template>

examples/async-component-injection/posts/welcome-to-my-blog.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <h3 class="date">Jul 08, 2017</h3>
+    <h1>Welcome to my blog</h1>
+    <div class="content">
+      <h2>What is Lorem Ipsum?</h2>
+      <p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+    </div>
+  </div>
+</template>

examples/component-injection/articles/article-1.vue

@@ -1,7 +0,0 @@
-<template>
-  <div>
-    <h1>Article 1</h1>
-    <p>Hello I am the first article :)</p>
-    <nuxt-link to="/">Home</nuxt-link>
-  </div>
-</template>

examples/component-injection/articles/article-2.vue

@@ -1,7 +0,0 @@
-<template>
-  <div>
-    <h1>Article 2</h1>
-    <p>Hello I am the second article!</p>
-    <nuxt-link to="/">Home</nuxt-link>
-  </div>
-</template>

examples/component-injection/pages/_slug.vue

@@ -1,19 +0,0 @@
-<template>
-  <component :is="comp"/>
-</template>
-
-<script>
-const components = {}
-const files = require.context('@/articles', false, /\.vue$/)
-files.keys().forEach((filename) => {
-  const name = filename.replace('./', '').replace('.vue', '')
-  components[name] = () => import('@/articles/' + name + '.vue').then((m) => m.default || m)
-})
-
-export default {
-  async asyncData({ params, error }) {
-    return { comp: params.slug }
-  },
-  components
-}
-</script>

examples/component-injection/pages/index.vue

@@ -1,9 +0,0 @@
-<template>
-  <div>
-    <h1>Articles</h1>
-    <ul>
-      <li><nuxt-link to="/article-1">Article #1</nuxt-link></li>
-      <li><nuxt-link to="/article-2">Article #2</nuxt-link></li>
-    </ul>
-  </div>
-</template>