{"id":13417510,"url":"https://github.com/def-studio/vite-livewire-plugin","last_synced_at":"2025-05-15T11:06:56.897Z","repository":{"id":41411192,"uuid":"509238972","full_name":"defstudio/vite-livewire-plugin","owner":"defstudio","description":"Laravel Vite handler for Livewire components","archived":false,"fork":false,"pushed_at":"2024-12-03T15:48:58.000Z","size":179,"stargazers_count":281,"open_issues_count":6,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-14T19:58:21.611Z","etag":null,"topics":["hacktoberfest","hot-reload","laravel","livewire","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/defstudio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["fabio-ivona","def-studio"]}},"created_at":"2022-06-30T21:32:11.000Z","updated_at":"2025-03-24T00:16:53.000Z","dependencies_parsed_at":"2023-11-21T08:28:48.768Z","dependency_job_id":"56ddb505-88ca-4998-a985-68bf0c324e57","html_url":"https://github.com/defstudio/vite-livewire-plugin","commit_stats":null,"previous_names":["def-studio/vite-livewire-plugin"],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/defstudio%2Fvite-livewire-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/defstudio%2Fvite-livewire-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/defstudio%2Fvite-livewire-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/defstudio%2Fvite-livewire-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/defstudio","download_url":"https://codeload.github.com/defstudio/vite-livewire-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328385,"owners_count":22052632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","hot-reload","laravel","livewire","vite"],"created_at":"2024-07-30T22:00:38.810Z","updated_at":"2025-05-15T11:06:56.875Z","avatar_url":"https://github.com/defstudio.png","language":"TypeScript","funding_links":["https://github.com/sponsors/fabio-ivona","https://github.com/sponsors/def-studio"],"categories":["Integrations with Backends"],"sub_categories":["Laravel"],"readme":"# Vite Livewire Plugin\n\n\u003ca href=\"https://www.npmjs.com/package/@defstudio/vite-livewire-plugin\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/@defstudio/vite-livewire-plugin\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@defstudio/vite-livewire-plugin\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@defstudio/vite-livewire-plugin\" alt=\"Latest Stable Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@defstudio/vite-livewire-plugin\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@defstudio/vite-livewire-plugin\" alt=\"License\"\u003e\u003c/a\u003e\n\u003ca href=\"https://twitter.com/FabioIvona?ref_src=twsrc%5Etfw\"\u003e\u003cimg alt=\"Twitter Follow\" src=\"https://img.shields.io/twitter/follow/FabioIvona?label=Follow\u0026style=social\"\u003e\u003c/a\u003e\n\n\nVite has become Laravel's default frontend build tool.\n\nThis plugin (made by [def:studio](https://twitter.com/FabioIvona)) configures Vite for use with a Livewire setup, allowing components hot reload without losing their state when their blade or class files change.\n\nDemo video available [below](#demo) in this page\n\n## Installation\n\nPrior to install, read carefully our documentation at https://docs.defstudio.it/vite-livewire-plugin\n\n```bash\nnpm install --save-dev @defstudio/vite-livewire-plugin\n```\n\n## Usage\n\nLivewire hot reload can be enabled by adding the `livewire()` plugin to the `vite.config.js` file:\n\n```javascript\nimport {defineConfig} from 'vite';\nimport laravel from 'laravel-vite-plugin';\n\nimport livewire from '@defstudio/vite-livewire-plugin'; // \u003c-- import\n\nexport default defineConfig({\n    //...\n    \n    plugins: [\n        laravel([\n            input: [\n                'resources/css/app.css',\n                'resources/js/app.js',\n            ],\n            refresh: false, // \u003c-- disables laravel autorefresh, to avoid conflicts\n        ]),\n        \n        livewire({  // \u003c-- add livewire plugin\n            refresh: ['resources/css/app.css'],  // \u003c-- will refresh css (tailwind ) as well\n        }),\n    ],\n});\n```\n\nand add the livewire hot reload manager in your `app.js` file:\n\n```js\n//..\n\nimport {livewire_hot_reload} from 'virtual:livewire-hot-reload'\n\nlivewire_hot_reload();\n```\n\nAfter the Vite server is started, you should see the init message on your browser console:\n\n```\n[vite] connecting...\n[vite] livewire hot reload ready.\n[vite] connected.\n```\n\nFrom now on, when a `.blade.php` or Livewire `.php` class is updated, the hot reload will trigger a refresh for all Livewire components in page (and the app.css file as well):\n\n```\n[vite] css hot updated: /resources/css/app.css\n[vite] livewire hot updated.\n```\n\n\u003e **Warning**\n\u003e This Vite plugin, as Livewire needs to persist in page, is not fully compatible with other plugins that full refresh the page when a `.blade.php` file changes (i.e. laravel/vite-plugin with refresh option active)\n\u003e in order to make them work together, `blade` files in `**/livewire/**` should be excluded from blade hot reload. For Laravel Vite plugin, this config would solve the issue:\n \n```js\n// vite.config.js\nexport default defineConfig({\n//...\n    plugins: [\n        //...\n    \n        laravel({\n            // ...\n            refresh: false,\n        })\n    ],\n});\n```\n## Usage \u0026 Documentation\n\nAn extensive documentation is available at\n\nhttps://docs.defstudio.it/vite-livewire-plugin\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. [Follow Us](https://twitter.com/FabioIvona) on Twitter for more updates about this package.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Fabio Ivona](https://github.com/def-studio)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n## Demo\n\nhttps://user-images.githubusercontent.com/8792274/176996785-d4e21ee5-b9f3-4e91-bf3a-4bbc0e87a148.mp4\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdef-studio%2Fvite-livewire-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdef-studio%2Fvite-livewire-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdef-studio%2Fvite-livewire-plugin/lists"}