Build with Sanity MCP in Replit. Prizes up for grabs! Submit by June 14

Prefixed slug input

Editor friendly slug fields for your Sanity.io studio

By Henrique Doro

Install command

npm i sanity-plugin-prefixed-slug

v2 install command (deprecated)

yarn add sanity-plugin-prefixed-slug@1.0.1

sanity-plugin-prefixed-slug

Editor friendly slug fields for your Sanity.io studio. Prefixed URLs and auto-slugifying values.

Screenshot of the plugin in action

Installation

Start by enabling it in your Sanity V3 studio:

yarn add sanity-plugin-prefixed-slug
# or npm
npm i sanity-plugin-prefixed-slug

🚨 If you're using Sanity V2, use the ^1.0.0 releases of this plugin.

Then, use the custom input component in your slug field(s):

import { SlugInput } from 'sanity-plugin-prefixed-slug'

export default {
  name: 'testing-slugs',
  type: 'document',
  fields: [
    {
      name: 'slug_regular_custom_input',
      type: 'slug',
      // Add the custom input to the `component` object of your field
      components: {
        input: SlugInput,
      },
      options: {
        source: 'title',
        urlPrefix: 'https://site.url',
        // Use isUnique/maxLength just like you would w/ the regular slug field
        isUnique: MyCustomIsUniqueFunction,
        maxLength: 30,
        // If you want to save the full URL in the slug object, set storeFullUrl to `true`
        // Example storage: { _type: "slug", current: "my-slug", fullUrl: "https://site.com/my-slug" }
        storeFullUrl: true,
      },
    },
    {
      // If you want to customize how slugs are formatted
      name: 'slug_custom_format',
      type: 'slug',
      components: {
        input: SlugInput,
      },
      options: {
        urlPrefix: 'https://site.url',
        slugify: (slugString) => slugString.toLowerCase(),
        // You can also avoid slugifying entirely by returning the full value:
        slugify: (slugString) => slugString,
      },
    },
    {
      // If you want to provide a custom path based on the current document:
      name: 'slug_function_path',
      type: 'slug',
      components: {
        input: SlugInput,
      },
      options: {
        urlPrefix: (document) => `https://site.url/${document.lang}`,
        // It could even be a promise! 🛑 Be careful: this will be triggered on every document change.
        urlPrefix: async (document) => {
          const subPath = await getDocumentSubPath(document) // ficticious asynchronous method
          return `https://site.url/${subPath}`
        },
      },
    },
  ],
}

💡 This plugin used to be called sanity-plugin-better-slug. As that was pretentious and unclear, I've made the switch to prefixed-slug.

Upgrading from sanity-plugin-better-slug? Rename your options.basePath to options.urlPrefix.

Related contributions