Resize Plugin

Alpine's Resize plugin is a convenience wrapper for the Resize Observer that allows you to easily react when an element changes size.

This is useful for: custom size-based animations, intelligent sticky positioning, conditionally adding attributes based on the element's size, etc.

Installation

You can use this plugin by either including it from a <script> tag or installing it via NPM:

Via CDN

You can include the CDN build of this plugin as a <script> tag, just make sure to include it BEFORE Alpine's core JS file.

<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
 
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Via NPM

You can install Resize from NPM for use inside your bundle like so:

npm install @alpinejs/resize

Then initialize it from your bundle:

import Alpine from 'alpinejs'
import resize from '@alpinejs/resize'
 
Alpine.plugin(resize)
 
...

x-resize

The primary API for using this plugin is x-resize. You can add x-resize to any element within an Alpine component, and when that element is resized for any reason, the provided expression will execute with two magic properties: $width and $height.

For example, here's a simple example of using x-resize to display the width and height of an element as it changes size.

<div
    x-data="{ width: 0, height: 0 }"
    x-resize="width = $width; height = $height"
>
    <p x-text="'Width: ' + width + 'px'"></p>
    <p x-text="'Height: ' + height + 'px'"></p>
</div>
Resize your browser window to see the width and height values change.

Modifiers

.viewport

The visual viewport is the portion of the page currently visible on screen. On mobile browsers, it can change independently of the document when browser controls or the on-screen keyboard appear. Use the .viewport modifier to react to these changes using window.visualViewport:

<div x-resize.viewport="width = $width; height = $height">
    ...
</div>

$width and $height contain the visual viewport's dimensions. In browsers where window.visualViewport is unavailable, Alpine falls back to observing the document.

.document

It's often useful to observe the entire document's size, rather than a specific element. To do this, you can add the .document modifier to x-resize:

<div x-resize.document="...">
Resize your browser window to see the document width and height values change.

Ecosystem sponsor Neon

Neon is a complete backend built around Lakebase Postgres, for developers, startups, and agent platforms, by Databricks.

neon.com →
← Intersect
Persist →

Code highlighting provided by Torchlight