v0.1.2 Slug field

✨ What's New

Slug Field

A direct copy of Payload's native slug field that lives in your codebase, giving you full control over slug generation logic and UI behavior.

Why This Matters:
Payload's built-in slug field is compiled into the core and cannot be customized. This version puts the entire field in your codebase, allowing you to:

• Customize the slugify function to match your exact requirements
• Modify UI behavior and labels
• Implement custom slug patterns (underscores, dates, uppercase, etc.)
• Adapt the field to your specific use case

Key Features:

• Auto-generation from specified fields (default: title)
• Manual override capability with stabilization to protect live URLs
• Localization support
• Indexed and unique slugs
• Customizable generation logic via slugify.ts

Installation:

npx shadcn@latest add https://payload.veiag.dev/r/slug.json

Example Customizations:

// Use underscores instead of dashes
export const slugify = (val?: string) =>
  val?.replace(/ /g, '_').replace(/[^\w_]+/g, '').toLowerCase()

// Add automatic date prefixes
export const slugify = (val?: string) => {
  const date = new Date().toISOString().split('T')[0]
  const slug = val?.replace(/ /g, '-').replace(/[^\w-]+/g, '').toLowerCase()
  return `${date}-${slug}`
}

View Documentation →

🚀 Getting Started

Visit payload.veiag.dev to explore the collection!