Skip to content

Routing in NuxtJS + Laravel

This project includes both PHP and NodeJS on the server side. In this case we need to use a webserver that can serve both, in our case we use Apache.

Apache can do this through what is called "proxy pass" (mod_proxy) that can be defined in the vhost.

Apache configuration

NuxtJS

For the frontend we use NuxtJS which is using NodeJS http server. The main reason to use NuxtJS is to have server side rendering. In this case we need to make sure that we expose the NuxtJS servers to the world.

# nuxt frontend
<Location />
   ProxyPass http://localhost:3000/
   ProxyPassReverse http://localhost:3000/
 </Location>

# nuxt pos
<Location /pos>
    ProxyPass http://localhost:3001/
    ProxyPassReverse http://localhost:3001/
</Location>

We are exposing two servers, one for web frontend the other for the POS.

NuxtJS has its internal routing scheme and at this point Apache will send all the requests to those servers based on the prefixes.

For example:

1) /deals goes to NuxtJS page located at /frontend/web/pages/deals/index.vue 2) /pos/deals goes to NuxtJS page located at /frontend/pos/pages/deals/index.vue

Laravel

Since at this point all the requests route to the NuxtJS servers, we need to allow Laravel to have its own routes. In order to achieve this we are using a list of exceptions.

This list looks as following:

# laravel
<Location /index.php>
    ProxyPass !
 </Location>

# admin section
 <Location /admin>
     ProxyPass !
 </Location>

 # laravel api
 <Location /api>
     ProxyPass !
 </Location>

# laravel nova api
<Location /nova-api>
    ProxyPass !
</Location>

# vendor folder
<Location /vendor>
    ProxyPass !
</Location>

# public storage folder
<Location /storage>
    ProxyPass !
</Location>

This means that the Laravel router will have access only to those prefixes:

  • admin
  • api
  • nova-api (used by nova)
  • vendor (used by composer libraries)
  • storage (the public storage folder)

Conclusion

The above configuration is used in the production environment. This means that in order to write valid routes we must use these prefixes, otherwise Apache will send the requests to the NuxtJS router instead of the Laravel router.