On gists

Alpine directive - slugify

Alpine.js

slugify.js Raw #

// https://github.com/markmead/alpinejs-slug

import slugify from 'slugify'

export default function (Alpine) {
  Alpine.directive('slug', (el, { expression }, { evaluateLater, effect }) => {
    let setInputValue = evaluateLater(expression)

    effect(() => {
      setInputValue((string) => {
        el.value = slugify(string, {
          lower: true,
        })
      })
    })
  })
}

usage.html Raw #

<form x-data="{ title: '' }">
  <label for="title">Title</label>

  <input type="text" id="title" x-model="title" />

  <label for="slug">Slug</label>

  <input type="text" id="slug" x-slug="title" />
</form>