Symfony3 + Vuejs nginx configuration

Question

I'm currently coding an app using SF3 for the back-end and VueJs for the front-end.

I use a controller action with the base route '/' to render the main template (with twig) containing the link to the js files and the div binding for VueJs.

The Vuejs app is a single page app and uses vue-router. The vue-router mode is set to history in production mode and that's where I am having trouble. The dev config uses the hash without any issue.

I would like to configure my nginx so that :

1. Checks if it matches a vuejs route
2. If not check that it matches a symfony route
3. If not then redirect to some 404 page

1 and 2 can be revert.

My current nginx location is (the default symfony one):

`location / {
    try_files $uri /app.php$is_args$args;
}`

The issue is that when I reload a vuejs route in the browser I receive 404 errors. However, navigating route to route works fine.

If it helps, all my symfony routes are prefixed by API/ or admin/

Thanks in advance for any guidance.

---

RESOLVED

I've add a "fallback" route in my symfony configuration:

fallback:
  path: /{req}
  defaults: { _controller: 'AppBundle:Default:index' }
  requirements:
      req: ".+"

Now each undefined url is redirected to the action that renders the VueJS app. A fallback route is also defined in the vue-router in case the url does not macth a known vue-router route.