Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Can I use multiple front-end frameworks for different routes in Laravel
    Laravel Livewire


Can I use multiple front-end frameworks for different routes in Laravel


It is possible to use multiple front-end frameworks for different routes in a Laravel application, but it requires some additional configuration and setup. Here are the key points:

1. Separate Front-end Projects: The recommended approach is to have separate front-end projects for each framework, rather than trying to mix them within the same Laravel application. This helps maintain a clear separation of concerns and simplifies the overall architecture.

- You can create a separate Vue.js or React.js project using tools like Vue CLI or Create React App, and have it consume the Laravel API.
- You can also have a separate Svelte project that integrates with the Laravel application.

2. Routing Configuration: To use different front-end frameworks for different routes, you can configure your Laravel routes to handle the routing accordingly.

- For the routes that should use a specific front-end framework (e.g., Vue.js or Svelte), you can set up a route group that points to the appropriate front-end application.
- For the admin or other specific routes, you can use the built-in Jetstream functionality, which integrates with Vue.js.

3. Inertia.js Integration: Inertia.js is a library that can help you integrate different front-end frameworks with a Laravel backend. It provides a way to share data between the backend and the front-end, and can be used with frameworks like Vue.js, React, and Svelte.

- By using Inertia.js, you can have a single Laravel application that serves different front-end frameworks for different routes.
- The search results mention that Jetstream supports both Livewire and Inertia.js, which can help with this integration.

4. Separate Domains or Subdomains: Another approach mentioned in the search results is to use separate domains or subdomains for the different front-end applications. This can help maintain a clear separation between the front-end and back-end components of the application.

- For example, you could have `frontend.example.com` for the main front-end application and `admin.example.com` for the admin area using a different front-end framework.

In summary, while it is possible to use multiple front-end frameworks in a Laravel application, the recommended approach is to have separate front-end projects that consume the Laravel API, and configure the routing and integration accordingly. This helps maintain a clean separation of concerns and simplifies the overall architecture of the application.

Citations:
[1] https://laracasts.com/discuss/channels/laravel/laravel-with-two-different-front-end-frameworks
[2] https://stackoverflow.com/questions/32103878/laravel-routing-with-a-front-end-framework
[3] https://www.reddit.com/r/laravel/comments/bchlx9/single_laravel_api_multiple_vue_frontends/
[4] https://laravel.com/docs/11.x/frontend
[5] https://laravel.io/forum/03-10-2014-frontend-and-backend-app-configuration