Hacker Spaces

Deploying Quasar (Vue) SPA to Vercel

Nerd developing at home, with the style of Nicolas de Staël, courtesy of Stable Diffusion

Working with Quasar (Vue.js based) is a bliss for Web UI / SPA / etc… development. Especially is you use Vite, for the speed of site build. I highly recommend it. Now vercel makes it super easy to host and test your app online.

Here is a little problem I encountered, so I’m sharing (so that the monster Internet search engines that swallow everything can index this little helper blog post).

Contrary to what you can find in Quasar Documentation, namely here, the vercel.json file content should not be:

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

But rather it should be:

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/" }
  ]
}

(My pull request to quasar to fix this was accepted and is now fixed in their doc)

Basically it’s because you don’t know that it’s gonna be an index.html handling the traffic: it’s not. It’s the application residing at / that handles everything.

happy Quasar & Vercel !

Leave a Reply