Jetstream, developed for Laravel, is primarily known for its tight integration with Vue.js when using the Inertia.js stack. By default, Jetstream comes with options to use either the Livewire stack or the Inertia.js stack with Vue.js as the front-end framework. However, there has been significant community interest and effort around using Jetstream with other frontend frameworks, particularly React.
Jetstream and Inertia.js Default Frameworks
Jetstream supports two main frontend stacks:
- Livewire with Blade: This uses Laravel's server-rendered Blade templates combined with Livewire for reactive components, which require no dedicated JavaScript framework knowledge.
- Inertia.js with Vue.js: Inertia.js acts as a bridge that allows using Vue.js as a client-side framework while keeping Laravel routing and backend logic, making a single-page app experience. By default, Jetstream's Inertia stack scaffolds Vue.js components.
Using Jetstream with React
Although the official Jetstream documentation and releases do not provide first-class support for React, many developers have explored and built solutions to integrate React into the Jetstream/Inertia.js stack. This is possible because Inertia.js itself is framework-agnostic and supports multiple frontend frameworks beyond Vue, such as React and Svelte.
- Developers have successfully replaced the Vue.js setup in Jetstream Inertia projects with React by adjusting the frontend scaffolding and configuration. This process involves:
- Installing React-related dependencies (e.g., `@inertiajs/react` for Inertia React adapters).
- Replacing Vue components and routing setups with React equivalents.
- Adjusting build tools like Vite or Webpack to support React JSX syntax and plugins.
- Modifying Jetstream's published starter components and views by converting Vue files to React.
- Some open-source projects and boilerplates exist that provide CLI tools or guides to replace Vue.js with React in a Jetstream-powered Laravel application. These often handle:
- React component scaffolding.
- Replacement of Vue-specific syntax and lifecycle with React hooks and component patterns.
- Configuration of Inertia's React adapter for page rendering and server-side hydration.
- Despite these efforts, these React integrations tend to be community-driven and unofficial, without formal support from the Laravel Jetstream maintainers. Jetstream's core package code and backend features remain unchanged; only the frontend scaffolding is swapped out.
- When using React, developers may lose some of the out-of-the-box experience and convenience that Vue.js offers with Jetstream and may need to manually handle some UI components, state management, and routing nuances.
Other Frontend Frameworks
- Besides Vue and React, theoretical support for other frontend frameworks like Svelte or Angular could be possible via Inertia.js or standalone APIs, but no popular or robust Jetstream integrations exist for these frameworks.
- Jetstream is opinionated and primarily documented around its two main stacks, so using other frameworks requires custom implementation and adaptation effort.
Tailwind CSS and Component Independence
- Jetstream uses Tailwind CSS for styling, which is independent of the frontend framework. Hence, regardless of Vue or React, the UI styling remains consistent.
- Since Tailwind provides utility-first CSS, developers can freely create frontend components using any framework or plain Blade templates styled with Tailwind.
- If preferred, one can exclude the SPA-oriented parts of Jetstream and use its authentication backend and Blade templates for simpler setups without tightly coupling to Vue, React, or Livewire.
Summary
- Jetstream officially supports Vue.js (with Inertia.js) and Livewire (Blade) stacks.
- React can be used with Jetstream by replacing Vue via community-powered projects and manual adjustments, leveraging Inertia.js's framework-agnostic nature.
- No official React or other frontend framework versions of Jetstream are maintained by Laravel.
- Developers choosing React or other frameworks will need to handle additional setup and customization.
- Jetstream's core functionality remains usable independent of frontend framework choice, especially when using Livewire or Blade templates.
- The Tailwind CSS styling approach ensures visual consistency regardless of frontend framework in use.