5

I set up a very basic Vue.js app essentially using these steps. When I added the router to this project, it asked whether I wanted to use History Mode and I said yes.

Now I am trying to implement the corresponding server configuration changes aka "add[ing] a simple catch-all fallback route to [the] server" but I'm not sure how to do this since I'm using Vercel for my deployments and from my understanding it's managing the server for me.

It seems like I'm able to do some configuration in Vercel, and I'm thinking maybe I need to configure a redirect like in their firebase.json example? If so, would my vercel.json just look like this?

{
"redirects": [
    { "source": "**", "destination": "/index.html" }
]
}
Ara Medina
  • 157
  • 1
  • 3
  • 7

3 Answers3

8

As per Vercel's vercel.json routes upgrade guide, SPA Fallback section, use this on your vercel.json file:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

In my case I'm also using Vercel Serverless functions, so I also need rewrites for the /api routes, and here the order is important, it must be done this way:

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api" },
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}
cprcrack
  • 17,118
  • 7
  • 88
  • 91
2

Generally, Vercel automatically detects your configuration and sets it up so that all traffic points at your index.html file. That's kind of their big selling point.

If you want more explicit control, you could use the configuration shown in the Caveat section of the Vue docs you first linked to. Just create a simple component that redirects to the homepage and point * to it.

import NotFound from '../components/NotFound.vue'

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFound }
  ]
})

export default {
  name: 'NotFound',
  template: `<div></div>`,
  mounted() {
    this.$router.push({ path: '/' })
  }
}
selfagency
  • 1,481
  • 1
  • 9
  • 12
2

You are right, Vercel manages the server for you and you can configure vercel through a vercel.json file. In that vercel.json file you can define rewrite rules as you already assumed. The correct format for this is shown here in the docs of vercel.

Since you want to add a match all rule which directs to the base of your path, adding the following to your vercel.json should work:

{
  "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}

Explanatory extras:

The :path basically symbolizes a placeholder and the * makes sure it doesn't just match one subpath deep but everything that follows after the initial slash.

For example without the * after /:path you would match domain.xyz/foo but not domain.xyz/foo/bar.

Furthermore since it's a named placeholder you can reuse the matched path for the destination like so "destination": "/index.html/:path".

Which shouldn't be necessary for a frontend application like vue which uses the route inside the browser, but could be helpful for serverless functions.

FerhatC
  • 41
  • 5