https://github.com/markmead/alpinejs-slug
Transform a string into a slug with Alpine JS and Slugify 🐌
https://github.com/markmead/alpinejs-slug
alpine-js alpinejs alpinejs-plugin javascript slug slugify
Last synced: over 1 year ago
JSON representation
Transform a string into a slug with Alpine JS and Slugify 🐌
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-slug
- Owner: markmead
- License: mit
- Created: 2022-02-18T23:21:54.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T10:49:06.000Z (about 2 years ago)
- Last Synced: 2024-10-14T08:24:38.384Z (over 1 year ago)
- Topics: alpine-js, alpinejs, alpinejs-plugin, javascript, slug, slugify
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/form-input-slug
- Size: 38.1 KB
- Stars: 19
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```
### 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
```
### 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
