PHPackages                             mckenziearts/livewire-unsaved-changes - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. mckenziearts/livewire-unsaved-changes

ActiveLibrary[Utility & Helpers](/categories/utility)

mckenziearts/livewire-unsaved-changes
=====================================

A Livewire component to display an unsaved changes bar with Alpine.js

v1.1(2mo ago)1118MITPHPPHP ^8.3CI passing

Since Jan 30Pushed 1mo agoCompare

[ Source](https://github.com/mckenziearts/livewire-unsaved-changes)[ Packagist](https://packagist.org/packages/mckenziearts/livewire-unsaved-changes)[ Docs](https://github.com/mckenziearts/livewire-unsaved-changes)[ Fund](https://www.paypal.com/paypalme/monneyarthur)[ GitHub Sponsors](https://github.com/mckenziearts)[ RSS](/packages/mckenziearts-livewire-unsaved-changes/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (24)Versions (7)Used By (0)

 [![Build Status](https://github.com/mckenziearts/livewire-unsaved-changes/actions/workflows/ci.yml/badge.svg)](https://github.com/mckenziearts/livewire-unsaved-changes/actions) [![Total Downloads](https://camo.githubusercontent.com/3c6ceada53df1a937709876021e99bfabff579cf9a34c6821654f255283e4e83/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d636b656e7a6965617274732f6c697665776972652d756e73617665642d6368616e676573)](https://packagist.org/packages/mckenziearts/livewire-unsaved-changes) [![Latest Stable Version](https://camo.githubusercontent.com/39abb09ea0d90d05558604ecc81debcb3e0ab564c693a8db5fcab2aee3f91dc1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d636b656e7a6965617274732f6c697665776972652d756e73617665642d6368616e676573)](https://packagist.org/packages/mckenziearts/livewire-unsaved-changes) [![License](https://camo.githubusercontent.com/9fe8deb5cf38f043f43a403159b71cede83fb837246d2ec48333369ceb50522a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6d636b656e7a6965617274732f6c697665776972652d756e73617665642d6368616e676573)](https://packagist.org/packages/mckenziearts/livewire-unsaved-changes)

Introduction
============

[](#introduction)

A beautiful, animated "unsaved changes" bar for Laravel Livewire forms. Powered by Alpine.js for instant UI feedback without server round-trips.

Features
--------

[](#features)

- Animated slide-in bar when form changes are detected
- No server requests until save - instant UI feedback
- Prevent navigation with unsaved changes (optional)
- Customizable position (top/bottom)

Installation
------------

[](#installation)

```
composer require mckenziearts/livewire-unsaved-changes
```

### Styling

[](#styling)

The component uses Tailwind CSS classes. Choose the appropriate method based on your project setup:

#### Option 1: Project with Tailwind CSS (Recommended)

[](#option-1-project-with-tailwind-css-recommended)

If your project already uses Tailwind CSS, simply add the package's views to your source paths in your CSS file:

```
@import 'tailwindcss';

@source '../../vendor/mckenziearts/livewire-unsaved-changes/resources/views/**/*.blade.php';
```

This allows Tailwind to scan the component's Blade files and generate the necessary classes automatically.

#### Option 2: Project without Tailwind CSS

[](#option-2-project-without-tailwind-css)

If your project doesn't use Tailwind CSS, publish the pre-compiled CSS assets:

```
php artisan vendor:publish --tag="livewire-unsaved-changes-assets"
```

Then include the CSS in your layout:

```

```

### Optional Configuration

[](#optional-configuration)

Publish the config file:

```
php artisan vendor:publish --tag="livewire-unsaved-changes-config"
```

Publish the translations:

```
php artisan vendor:publish --tag="livewire-unsaved-changes-translations"
```

Usage
-----

[](#usage)

### Basic Usage

[](#basic-usage)

Wrap your form with the `` component and use `x-model` to bind your inputs:

```

```

In your Livewire component:

```