fix(vue-app): add leading slash for payload hydration (#8802)

packages/config/package.json

@@ -18,7 +18,7 @@
     "lodash": "^4.17.20",
     "rc9": "^1.2.0",
     "std-env": "^2.2.1",
-    "ufo": "^0.6.5"
+    "ufo": "^0.6.6"
   },
   "publishConfig": {
     "access": "public"

packages/generator/package.json

@@ -16,7 +16,7 @@
     "fs-extra": "^9.1.0",
     "html-minifier": "^4.0.0",
     "node-html-parser": "^2.1.0",
-    "ufo": "^0.6.5"
+    "ufo": "^0.6.6"
   },
   "publishConfig": {
     "access": "public"

packages/server/package.json

@@ -24,7 +24,7 @@
     "serve-placeholder": "^1.2.3",
     "serve-static": "^1.14.1",
     "server-destroy": "^1.0.1",
-    "ufo": "^0.6.5"
+    "ufo": "^0.6.6"
   },
   "publishConfig": {
     "access": "public"

packages/utils/package.json

@@ -19,7 +19,7 @@
     "serialize-javascript": "^5.0.1",
     "signal-exit": "^3.0.3",
     "ua-parser-js": "^0.7.23",
-    "ufo": "^0.6.5"
+    "ufo": "^0.6.6"
   },
   "publishConfig": {
     "access": "public"

packages/vue-app/package.json

@@ -14,7 +14,7 @@
   ],
   "dependencies": {
     "node-fetch": "^2.6.1",
-    "ufo": "^0.6.5",
+    "ufo": "^0.6.6",
     "unfetch": "^4.2.0",
     "vue": "^2.6.12",
     "vue-client-only": "^2.0.0",

packages/vue-app/template/App.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { parsePath, withoutTrailingSlash, normalizeURL } from 'ufo'
+import { decode, parsePath, withoutBase, withoutTrailingSlash, normalizeURL } from 'ufo'
 <% utilsImports = [
   ...(features.asyncData || features.fetch) ? [
     'getMatchedComponentsInstances',
@@ -301,10 +301,7 @@ export default {
     },
     getRoutePath(route = '/') {
       const base = this.getRouterBase()
-      if (base && route.startsWith(base)) {
-        route = route.substr(base.length)
-      }
-      return withoutTrailingSlash(parsePath(route).pathname)
+      return withoutTrailingSlash(withoutBase(parsePath(route).pathname, base))
     },
     getStaticAssetsPath(route = '/') {
       const { staticAssetsBase } = window.<%= globals.context %>

packages/vue-renderer/package.json

@@ -14,7 +14,7 @@
     "fs-extra": "^9.1.0",
     "lodash": "^4.17.20",
     "lru-cache": "^5.1.1",
-    "ufo": "^0.6.5",
+    "ufo": "^0.6.6",
     "vue": "^2.6.12",
     "vue-meta": "^2.4.0",
     "vue-server-renderer": "^2.6.12"

test/dev/trailing-slash-payload.test.js

@@ -0,0 +1,64 @@
+import http from 'http'
+import { resolve } from 'path'
+import serveStatic from 'serve-static'
+import finalhandler from 'finalhandler'
+import { Builder, Generator, getPort, loadFixture, Nuxt } from '../utils'
+import renderAndGetWindow from '../../packages/server/src/jsdom'
+
+let port
+const url = route => 'http://localhost:' + port + route
+
+let builder
+let server = null
+let generator = null
+
+const fixtures = [
+  ['trailing-slash/with-true', '/posts/test/'],
+  ['trailing-slash/with-false', '/posts/test'],
+  ['trailing-slash/with-default', '/posts/test'],
+  ['trailing-slash/with-default', '/posts/test/']
+]
+
+fixtures.forEach(([fixture, path]) => {
+  describe(`trailing-slash payloads (${fixture})`, () => {
+    beforeAll(async () => {
+      const dir = `.nuxt-generate-${fixture.replace('/', '_')}`
+      const rootDir = resolve(__dirname, '../fixtures', fixture)
+      const distDir = resolve(rootDir, dir)
+
+      const config = await loadFixture(fixture, {
+        static: true,
+        generate: {
+          dir,
+          routes: [path]
+        }
+      })
+      const nuxt = new Nuxt(config)
+      await nuxt.ready()
+
+      builder = new Builder(nuxt)
+      builder.build = jest.fn()
+      generator = new Generator(nuxt, builder)
+
+      await generator.generate()
+
+      const serve = serveStatic(distDir)
+      server = http.createServer((req, res) => {
+        serve(req, res, finalhandler(req, res))
+      })
+
+      port = await getPort()
+      server.listen(port)
+    })
+
+    test(`payload hydration ${path}`, async () => {
+      const window = await renderAndGetWindow(url(path), {}, { loadedCallback: '_onNuxtLoaded', globals: { id: '__nuxt' } })
+      expect(window.__NUXT__.fetch).toEqual({ 0: { result: 'fetched' } })
+    })
+
+    // Close server and ask nuxt to stop listening to file changes
+    afterAll(async () => {
+      await server.close()
+    })
+  })
+})

test/fixtures/trailing-slash/pages/posts/_slug.vue

@@ -3,3 +3,14 @@
     [pages/posts/_slug]
   </div>
 </template>
+
+<script>
+export default {
+  data: () => ({
+    result: null
+  }),
+  fetch () {
+    this.result = process.server ? 'fetched' : null
+  }
+}
+</script>

test/fixtures/trailing-slash/with-default/nuxt.config.js

@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 
 export default {
+  target: 'static',
   rootDir: __dirname,
   srcDir: resolve(__dirname, '..'),
   router: {

test/fixtures/trailing-slash/with-false/nuxt.config.js

@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 
 export default {
+  target: 'static',
   rootDir: __dirname,
   srcDir: resolve(__dirname, '..'),
   router: {

test/fixtures/trailing-slash/with-true/nuxt.config.js

@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 
 export default {
+  target: 'static',
   rootDir: __dirname,
   srcDir: resolve(__dirname, '..'),
   router: {

yarn.lock

@@ -12995,10 +12995,10 @@ ua-parser-js@^0.7.23:
   resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.23.tgz#704d67f951e13195fbcd3d78818577f5bc1d547b"
   integrity sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA==
 
-ufo@^0.6.5:
-  version "0.6.5"
-  resolved "https://registry.npmjs.org/ufo/-/ufo-0.6.5.tgz#90b14d516daf4cc66674f6a5ea5b32c6b257e3d2"
-  integrity sha512-QwmHDefpQSmULSXO0q6LPiaBBi7sDVYpunWaxs+P97I5PnK04IkcN5vp28Mk+b11FmAMgEhrGhuLuHdw8a0tEw==
+ufo@^0.6.6:
+  version "0.6.6"
+  resolved "https://registry.npmjs.org/ufo/-/ufo-0.6.6.tgz#6bc4b4de19ff9a9cb68134719190196b0cc7353b"
+  integrity sha512-HDhml2KskY1VVtQGckmaf/p3rTuleC2M7qL9Wf1dJZMw7glFk6oVjRsddf6LJp0I+pHERZzfttVmBMq1nR3PGA==
 
 uglify-js@^3.1.4, uglify-js@^3.5.1:
   version "3.12.7"