--- order: 2 title: Upgrade From V2 --- # Upgrade from V2 Below is an exhaustive guide on the breaking changes in Alpine V3, but if you'd prefer something more lively, you can review all the changes as well as new features in V3 by watching the Alpine Day 2021 "Future of Alpine" keynote:

Upgrading from Alpine V2 to V3 should be fairly painless. In many cases, NOTHING has to be done to your codebase to use V3. Below is an exhaustive list of breaking changes and deprecations in descending order of how likely users are to be affected by them: > Note if you use Laravel Livewire and Alpine together, to use V3 of Alpine, you will need to upgrade to Livewire v2.5.1 or greater. ## Breaking Changes * [`$el` is now always the current element](#el-no-longer-root) * [Automatically evaluate `init()` functions defined on data object](#auto-init) * [Need to call `Alpine.start()` after import](#need-to-call-alpine-start) * [`x-show.transition` is now `x-transition`](#removed-show-dot-transition) * [`x-if` no longer supports `x-transition`](#x-if-no-transitions) * [`x-data` cascading scope](#x-data-scope) * [`x-init` no longer accepts a callback return](#x-init-no-callback) * [Returning `false` from event handlers no longer implicitly "preventDefault"s](#no-false-return-from-event-handlers) * [`x-spread` is now `x-bind`](#x-spread-now-x-bind) * [`x-ref` no longer supports binding](#x-ref-no-more-dynamic) * [Use global lifecycle events instead of `Alpine.deferLoadingAlpine()`](#use-global-events-now) * [IE11 no longer supported](#no-ie-11) ### `$el` is now always the current element `$el` now always represents the element that an expression was executed on, not the root element of the component. This will replace most usages of `x-ref` and in the cases where you still want to access the root of a component, you can do so using `$root`. For example: ```alpine

``` For a smoother upgrade experience, you can replace all instances of `$el` with a custom magic called `$root`. [→ Read more about $el in V3](/magics/el) [→ Read more about $root in V3](/magics/root) ### Automatically evaluate `init()` functions defined on data object A common pattern in V2 was to manually call an `init()` (or similarly named method) on an `x-data` object. In V3, Alpine will automatically call `init()` methods on data objects. ```alpine

``` [→ Read more about auto-evaluating init functions](/globals/alpine-data#init-functions) ### Need to call Alpine.start() after import If you were importing Alpine V2 from NPM, you will now need to manually call `Alpine.start()` for V3. This doesn't affect you if you use Alpine's build file or CDN from a `