@nuxt/vue-app - npm Package Compare versions

Comparing version 2.8.1 to 2.9.0

dist/vue-app.js

 /*!
- * @nuxt/vue-app v2.8.1 (c) 2016-2019
+ * @nuxt/vue-app v2.9.0 (c) 2016-2019
 
@@ -20,5 +20,6 @@ * - All the amazing contributors
 	vue: "^2.6.10",
-	"vue-meta": "^1.6.0",
+	"vue-client-only": "^2.0.0",
+	"vue-meta": "^2.2.1",
 	"vue-no-ssr": "^1.1.1",
-	"vue-router": "^3.0.6",
+	"vue-router": "~3.0.7",
 	"vue-template-compiler": "^2.6.10",
@@ -37,2 +38,3 @@ vuex: "^3.1.1"
     'router.js',
+    'router.scrollBehavior.js',
     'server.js',
@@ -48,3 +50,2 @@ 'utils.js',
     'components/nuxt.js',
-    'components/no-ssr.js',
     'views/app.template.html',
@@ -51,0 +52,0 @@ 'views/error.html'

package.json

 {
   "name": "@nuxt/vue-app",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "repository": "nuxt/nuxt.js",
@@ -9,7 +9,5 @@ "license": "MIT",
     "template",
-    "types/*.d.ts",
     "vetur"
   ],
   "main": "dist/vue-app.js",
-  "typings": "types/index.d.ts",
   "dependencies": {
@@ -19,5 +17,6 @@ "node-fetch": "^2.6.0",
     "vue": "^2.6.10",
-    "vue-meta": "^1.6.0",
+    "vue-client-only": "^2.0.0",
+    "vue-meta": "^2.2.1",
     "vue-no-ssr": "^1.1.1",
-    "vue-router": "^3.0.6",
+    "vue-router": "~3.0.7",
     "vue-template-compiler": "^2.6.10",
@@ -24,0 +23,0 @@ "vuex": "^3.1.1"

template/App.js

 import Vue from 'vue'
+import { getMatchedComponentsInstances, promisify, globalHandleError } from './utils'
 <% if (loading) { %>import NuxtLoading from '<%= (typeof loading === "string" ? loading : "./components/nuxt-loading.vue") %>'<% } %>
@@ -76,2 +77,4 @@ <%if (buildIndicator) { %>import NuxtBuildIndicator from './components/nuxt-build-indicator'<% } %>
     this.error = this.nuxt.error
+    // Add $nuxt.context
+    this.context = this.$options.context
   },
@@ -104,2 +107,36 @@ <% if (loading) { %>
     },
+    async refresh() {
+      const pages = getMatchedComponentsInstances(this.$route)
+
+      if (!pages.length) {
+        return
+      }
+      <% if (loading) { %>this.$loading.start()<% } %>
+      const promises = pages.map(async (page) => {
+        const p = []
+
+        if (page.$options.fetch) {
+          p.push(promisify(page.$options.fetch, this.context))
+        }
+        if (page.$options.asyncData) {
+          p.push(
+            promisify(page.$options.asyncData, this.context)
+              .then((newData) => {
+                for (const key in newData) {
+                  Vue.set(page.$data, key, newData[key])
+                }
+              })
+          )
+        }
+        return Promise.all(p)
+      })
+      try {
+        await Promise.all(promises)
+      } catch (error) {
+        <% if (loading) { %>this.$loading.fail()<% } %>
+        globalHandleError(error)
+        this.error(error)
+      }
+      <% if (loading) { %>this.$loading.finish()<% } %>
+    },
     <% if (loading) { %>
@@ -106,0 +143,0 @@ errorChanged() {

template/client.js

@@ -143,11 +143,17 @@ import Vue from 'vue'
   try {
-    const Components = await resolveRouteComponents(to)
+    const Components = await resolveRouteComponents(
+      to,
+      (Component, instance) => ({ Component, instance })
+    )
     <% if (loading) { %>
     if (!this._pathChanged && this._queryChanged) {
       // Add a marker on each component that it needs to refresh or not
-      const startLoader = Components.some((Component) => {
+      const startLoader = Components.some(({Component, instance}) => {
         const watchQuery = Component.options.watchQuery
-        if (watchQuery === true) return true
-        if (Array.isArray(watchQuery)) {
+        if (watchQuery === true) {
+          return true
+        } else if (Array.isArray(watchQuery)) {
           return watchQuery.some(key => this._diffQuery[key])
+        } else if (typeof watchQuery === 'function') {
+          return watchQuery.apply(instance, [to.query, from.query])
         }
@@ -154,0 +160,0 @@ return false

template/components/nuxt-child.js

@@ -51,17 +51,29 @@ <%= isTest ? '// @vue/component' : '' %>
       })
-      if (beforeEnter) return beforeEnter.call(_parent, el)
+      if (beforeEnter) {
+        return beforeEnter.call(_parent, el)
+      }
     }
 
-    let routerView = [
-      h('router-view', data)
-    ]
+    // make sure that leave is called asynchronous (fix #5703)
+    if (transition.css === false) {
+      const leave = listeners.leave
+      listeners.leave = (el, done) => {
+        if (leave) {
+          leave.call(_parent, el)
+        }
+
+        _parent.$nextTick(done)
+      }
+    }
+
+    let routerView = h('routerView', data)
+
     if (props.keepAlive) {
-      routerView = [
-        h('keep-alive', { props: props.keepAliveProps }, routerView)
-      ]
+      routerView = h('keep-alive', { props: props.keepAliveProps }, [routerView])
     }
+
     return h('transition', {
       props: transitionProps,
       on: listeners
-    }, routerView)
+    }, [routerView])
   }
@@ -68,0 +80,0 @@ }

template/index.js

 import Vue from 'vue'
 import Meta from 'vue-meta'
+import ClientOnly from 'vue-client-only'
+import NoSsr from 'vue-no-ssr'
 import { createRouter } from './router.js'
-import NoSsr from './components/no-ssr.js'
 import NuxtChild from './components/nuxt-child.js'
@@ -18,4 +19,15 @@ import NuxtError from '<%= components.ErrorPage ? components.ErrorPage : "./components/nuxt-error.vue" %>'
 
-// Component: <NoSsr>
-Vue.component(NoSsr.name, NoSsr)
+// Component: <ClientOnly>
+Vue.component(ClientOnly.name, ClientOnly)
+// TODO: Remove in Nuxt 3: <NoSsr>
+Vue.component(NoSsr.name, {
+  ...NoSsr,
+  render(h, ctx) {
+    if (process.client && !NoSsr._warned) {
+      NoSsr._warned = true
+      console.warn(`<no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead`)
+    }
+    return NoSsr.render(h, ctx)
+  }
+})
 
@@ -22,0 +34,0 @@ // Component: <NuxtChild>

template/router.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import { interopDefault } from './utils'<%= isTest ? '// eslint-disable-line no-unused-vars' : '' %>
+import scrollBehavior from './router.scrollBehavior.js'
 
@@ -86,84 +87,18 @@ <% function recursiveRoutes(routes, tab, components, indentCount) {
 
-<% if (router.scrollBehavior) { %>
-const scrollBehavior = <%= serializeFunction(router.scrollBehavior) %>
-<% } else { %>
-if (process.client) {
-  if ('scrollRestoration' in window.history) {
-    window.history.scrollRestoration = 'manual'
-
-    // reset scrollRestoration to auto when leaving page, allowing page reload
-    // and back-navigation from other pages to use the browser to restore the
-    // scrolling position.
-    window.addEventListener('beforeunload', () => {
-      window.history.scrollRestoration = 'auto'
-    })
-
-    // Setting scrollRestoration to manual again when returning to this page.
-    window.addEventListener('load', () => {
-      window.history.scrollRestoration = 'manual'
-    })
-  }
+export const routerOptions = {
+  mode: '<%= router.mode %>',
+  base: decodeURI('<%= router.base %>'),
+  linkActiveClass: '<%= router.linkActiveClass %>',
+  linkExactActiveClass: '<%= router.linkExactActiveClass %>',
+  scrollBehavior,
+  <%= isTest ? '/* eslint-disable quotes, object-curly-spacing, key-spacing */' : '' %>
+  routes: [<%= _routes %>],
+  <%= isTest ? '/* eslint-enable quotes, object-curly-spacing, key-spacing */' : '' %>
+  <% if (router.parseQuery) { %>parseQuery: <%= serializeFunction(router.parseQuery) %>,<% } %>
+  <% if (router.stringifyQuery) { %>stringifyQuery: <%= serializeFunction(router.stringifyQuery) %>,<% } %>
+  fallback: <%= router.fallback %>
 }
-const scrollBehavior = function (to, from, savedPosition) {
-  // if the returned position is falsy or an empty object,
-  // will retain current scroll position.
-  let position = false
 
-  // if no children detected and scrollToTop is not explicitly disabled
-  if (
-    to.matched.length < 2 &&
-    to.matched.every(r => r.components.default.options.scrollToTop !== false)
-  ) {
-    // scroll to the top of the page
-    position = { x: 0, y: 0 }
-  } else if (to.matched.some(r => r.components.default.options.scrollToTop)) {
-    // if one of the children has scrollToTop option set to true
-    position = { x: 0, y: 0 }
-  }
-
-  // savedPosition is only available for popstate navigations (back button)
-  if (savedPosition) {
-    position = savedPosition
-  }
-
-  return new Promise((resolve) => {
-    // wait for the out transition to complete (if necessary)
-    window.<%= globals.nuxt %>.$once('triggerScroll', () => {
-      // coords will be used if no selector is provided,
-      // or if the selector didn't match any element.
-      if (to.hash) {
-        let hash = to.hash
-        // CSS.escape() is not supported with IE and Edge.
-        if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') {
-          hash = '#' + window.CSS.escape(hash.substr(1))
-        }
-        try {
-          if (document.querySelector(hash)) {
-            // scroll to anchor by returning the selector
-            position = { selector: hash }
-          }
-        } catch (e) {
-          console.warn('Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).')
-        }
-      }
-      resolve(position)
-    })
-  })
-}
-<% } %>
-
 export function createRouter() {
-  return new Router({
-    mode: '<%= router.mode %>',
-    base: decodeURI('<%= router.base %>'),
-    linkActiveClass: '<%= router.linkActiveClass %>',
-    linkExactActiveClass: '<%= router.linkExactActiveClass %>',
-    scrollBehavior,
-    <%= isTest ? '/* eslint-disable quotes, object-curly-spacing, key-spacing */' : '' %>
-    routes: [<%= _routes %>],
-    <%= isTest ? '/* eslint-enable quotes, object-curly-spacing, key-spacing */' : '' %>
-    <% if (router.parseQuery) { %>parseQuery: <%= serializeFunction(router.parseQuery) %>,<% } %>
-    <% if (router.stringifyQuery) { %>stringifyQuery: <%= serializeFunction(router.stringifyQuery) %>,<% } %>
-    fallback: <%= router.fallback %>
-  })
+  return new Router(routerOptions)
 }

template/utils.js

@@ -101,5 +101,5 @@ import Vue from 'vue'
 
-export function resolveRouteComponents(route) {
+export function resolveRouteComponents(route, fn) {
   return Promise.all(
-    flatMapComponents(route, async (Component, _, match, key) => {
+    flatMapComponents(route, async (Component, instance, match, key) => {
       // If component is a function, resolve it
@@ -109,4 +109,4 @@ if (typeof Component === 'function' && !Component.options) {
       }
-      match.components[key] = sanitizeComponent(Component)
-      return match.components[key]
+      match.components[key] = Component = sanitizeComponent(Component)
+      return typeof fn === 'function' ? fn(Component, instance, match, key) : Component
     })
@@ -113,0 +113,0 @@ )

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

128820

decreased by-1.23%

Dependency count

9

increased by12.5%

Number of package files

38

decreased by-7.32%

Lines of code

2477

decreased by-2.4%

Dependency changes

• + Addedvue-client-only@^2.0.0

• + Addeddeepmerge@4.3.1(transitive)

• + Addedvue-client-only@2.1.0(transitive)

• + Addedvue-meta@2.4.0(transitive)

• + Addedvue-router@3.0.7(transitive)

• - Removeddeepmerge@3.3.0(transitive)

• - Removedlodash.isplainobject@4.0.6(transitive)

• - Removedlodash.uniqueid@4.0.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedvue-meta@1.6.0(transitive)

• - Removedvue-router@3.6.5(transitive)

• Updatedvue-meta@^2.2.1

• Updatedvue-router@~3.0.7