Alpine JS Slug

Transform a string into a slug with Alpine JS and Slugify 🐌

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-slug@latest/dist/slug.min.js"
></script>

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

With a Package Manager

npm i -D alpinejs-slug

yarn add -D alpinejs-slug

import Alpine from 'alpinejs'
import slug from 'alpinejs-slug'

Alpine.plugin(slug)

Alpine.start()

Example

<div x-data="{ articleTitle: ' Alpine JS! ♥ ' }">
  <input type="text" id="articleTitle" x-model="articleTitle" />

  <input type="text" id="articleSlug" x-slug="articleTitle" />
  <!-- This results in "alpine-js-love" -->

  <p x-slug.keep-case.not-strict.replacement.&="articleTitle"></p>
  <!-- This results in "Alpine&JS!&love" -->

  <p x-slug.untrimmed="articleTitle"></p>
  <!-- This results in "-alpine-js-love-" -->

  <p x-slug.locale.de="articleTitle"></p>
  <!-- This results in "alpine-js-liebe" -->
</div>

Modifiers

keep-case

Default: false

| Modifier | Value | False | True | | --------- | ----------- | ----------- | ----------- | | keep-case | Hello World | hello-world | Hello-World |

replacement

Default: -

If you wanted to use an underscore you'd do so like this replacement._

not-strict

Default: false

| Modifier | Value | False | True | | ---------- | ------------ | ----------- | ------------ | | not-strict | Hello World! | hello-world | hello-world! |

untrimmed

Default: false

If this modifier is added and the string contains spaces, the spaces will be replaced with the value of replacement.

locale

Default: {}

Set the locale to change how certain characters are transformed. You can see the list on the Slugify repo.

lazy

Prevents the x-slug input value changing on load. It will only change when the input x-slug is targeting changes.

Stats