Fix progress bar on different layouts (#113)

lib/app/App.vue

@@ -1,10 +1,13 @@
 <template>
   <div id="__nuxt">
+    <% if (loading) { %><nuxt-loading ref="loading"></nuxt-loading><% } %>
     <component v-if="layout" :is="layout"></component>
   </div>
 </template>
 
 <script>
+<% if (loading) { %>import NuxtLoading from '<%= (typeof loading === "string" ? loading : "./components/nuxt-loading.vue") %>'<% } %>
+
 let layouts = {
 <%
 var layoutsKeys = Object.keys(layouts);
@@ -19,6 +22,12 @@ export default {
     layout: null,
     layoutName: ''
   }),
+  <% if (loading) { %>
+  mounted () {
+    this.$loading = this.$refs.loading
+    this.$nuxt.$loading = this.$loading
+  },
+  <% } %>
   methods: {
     setLayout (layout) {
       if (!layout || !layouts['_' + layout]) layout = 'default'
@@ -44,6 +53,9 @@ export default {
         console.error(e)
       })
     }
+  },
+  components: {
+    <%= (loading ? 'NuxtLoading' : '') %>
   }
 }
 </script>

lib/app/client.js

@@ -320,10 +320,6 @@ Promise.all(resolveComponents)
 .then(({ _app, Components }) => {
   const mountApp = () => {
     _app.$mount('#__nuxt')
-    <% if (loading) { %>
-    // Special loading bar
-    _app.$loading = _app.$nuxt.$loading
-    <% } %>
     // Hot reloading
     hotReloadAPI(_app)
     // Call window.onNuxtReady callbacks

lib/app/components/nuxt.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <% if (loading) { %><nuxt-loading ref="loading"></nuxt-loading><% } %>
     <nuxt-child v-if="!nuxt.err"></nuxt-child>
     <nuxt-error v-if="nuxt.err" :error="nuxt.err"></nuxt-error>
   </div>
@@ -10,7 +9,6 @@
 import Vue from 'vue'
 import NuxtChild from './nuxt-child'
 import NuxtError from '<%= components.ErrorPage %>'
-<% if (loading) { %>import NuxtLoading from '<%= (typeof loading === "string" ? loading : "./nuxt-loading.vue") %>'<% } %>
 
 export default {
   name: 'nuxt',
@@ -33,7 +31,9 @@ export default {
   },
   <% if (loading) { %>
   mounted () {
-    this.$loading = this.$refs.loading
+    if (this.$root.$loading && this.$root.$loading.start) {
+      this.$loading = this.$root.$loading
+    }
   },
   watch: {
     'nuxt.err': 'errorChanged'
@@ -49,7 +49,7 @@ export default {
   <% } %>
   components: {
     NuxtChild,
-    NuxtError<%= (loading ? ',\n    NuxtLoading' : '') %>
+    NuxtError
   }
 }
 </script>