alpinejs-slug
Version:
Transform a string into a slug with Alpine JS and Slugify 🐌
106 lines (68 loc) • 2.35 kB
Markdown
# Alpine JS Slug
Transform a string into a slug with Alpine JS and
[Slugify](https://www.npmjs.com/package/slugify) 🐌
## Install
### With a CDN
```html
<script
defer
src="https://unpkg.com/alpinejs-slug@latest/dist/slug.min.js"
></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
```
### With a Package Manager
```shell
npm i -D alpinejs-slug
yarn add -D alpinejs-slug
```
```js
import Alpine from 'alpinejs'
import slug from 'alpinejs-slug'
Alpine.plugin(slug)
Alpine.start()
```
## Example
```html
<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](https://github.com/simov/slugify/blob/master/config/locales.json).
#### `lazy`
Prevents the `x-slug` input value changing on load. It will only change when the
input `x-slug` is targeting changes.
### Stats
