feat:(nuxt): add slugify package and configuration

Author: productdevbook

packages/box/package.json

@@ -48,6 +48,7 @@
     "nuxt-icon": "^0.6.8",
     "pinia": "^2.1.7",
     "radix-vue": "^1.3.2",
+    "slugify": "^1.6.6",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "vee-validate": "^4.12.4",

packages/nuxt/src/module.ts

@@ -10,6 +10,7 @@ import YAML from 'yaml'
 
 import defu from 'defu'
 import type { NuxtConfigLayer } from '@nuxt/schema'
+import type slugify from 'slugify'
 import { version } from '../package.json'
 import { setupDevToolsUI } from './devtools'
 import { DEVTOOLS_MODULE_KEY, DEVTOOLS_MODULE_NAME } from './constants'
@@ -19,6 +20,19 @@ import { generateReadmeJson } from './runtime/core/utils/generateYaml'
 import { setupModules } from './runtime/core/setupModules'
 import type { PergelOptions, ResolvedPergelOptions } from './runtime/core/types/nuxtModule'
 
+export interface ModulePublicRuntimeConfig {
+  slugify: {
+    extends: {
+      [key: string]: any
+    }
+    default: Parameters<typeof slugify>[1]
+  }
+}
+
+declare module '@nuxt/schema' {
+  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig { }
+}
+
 export default defineNuxtModule<PergelOptions>({
   meta: {
     name: DEVTOOLS_MODULE_NAME,

packages/nuxt/src/runtime/modules/box/composables/slugify/useSlugify.ts

@@ -0,0 +1,10 @@
+import slugifyFunc from 'slugify'
+
+export function useSlugify() {
+  const { slugify } = useRuntimeConfig().public
+  if (Object.keys(slugify.extends).length)
+    slugifyFunc.extend(slugify.extends)
+
+  return (string: string, options?: Parameters<typeof slugifyFunc>[1]) =>
+    slugifyFunc(string, { ...typeof slugify.default === 'object' ? slugify.default : {}, ...typeof options === 'object' ? options : {} })
+}

packages/nuxt/src/runtime/modules/box/index.ts

@@ -1,12 +1,13 @@
 import { join } from 'node:path'
-import { addComponent, addPlugin, createResolver, installModule } from '@nuxt/kit'
+import { addComponent, addImportsDir, addPlugin, addServerImportsDir, createResolver, extendViteConfig, installModule } from '@nuxt/kit'
 import { isPackageExists } from 'local-pkg'
 
 import type { IconsPluginOptions } from '@egoist/tailwindcss-icons'
 import type { ModuleOptions } from '@nuxtjs/i18n'
 import consola from 'consola'
 import type { ModuleOptions as TailwindCSSOptions } from '@nuxtjs/tailwindcss'
 import type { ModuleOptions as GoogleFonts } from '@nuxtjs/google-fonts'
+import defu from 'defu'
 import { definePergelModule } from '../../core/definePergel'
 import { useNitroImports, useNuxtImports } from '../../core/utils/useImports'
 import { addDownloadTemplate } from '../../core/utils/createDownloadTemplate'
@@ -41,6 +42,7 @@ export default definePergelModule<BoxOptions, ResolvedBoxOptions>({
       vueUse: false,
       neoconfetti: false,
       googleFonts: false,
+      slugify: false,
     },
   },
   async setup({ nuxt, options }) {
@@ -362,6 +364,27 @@ export default definePergelModule<BoxOptions, ResolvedBoxOptions>({
       } as Partial<GoogleFonts>)
     }
 
+    if (options.packages.slugify) {
+      // Public runtimeConfig
+      nuxt.options.runtimeConfig.public.slugify = defu(
+        nuxt.options.runtimeConfig.public.slugify,
+        {
+          extend: options.extend,
+          defaults: options.defaults,
+        },
+      )
+
+      // Add Vite configurations
+      extendViteConfig((config) => {
+        config.optimizeDeps = config.optimizeDeps || {}
+        config.optimizeDeps.include = config.optimizeDeps.include || []
+        config.optimizeDeps.include.push('slugify')
+      })
+
+      addServerImportsDir(resolver.resolve('./composables/slugify'))
+      addImportsDir(resolver.resolve('./composables/slugify'))
+    }
+
     addDownloadTemplate({
       nuxt,
       data: {

packages/nuxt/src/runtime/modules/box/types.ts

@@ -1,4 +1,5 @@
 import type { CollectionNames, IconsPluginOptions } from '@egoist/tailwindcss-icons'
+import type slugify from 'slugify'
 
 import type { PergelModuleOptions, ResolvedPergelModuleOptions } from '../../core/types/module'
 
@@ -80,6 +81,17 @@ export interface BoxOptions extends PergelModuleOptions {
      * @see https://google-fonts.nuxtjs.org/
      */
     googleFonts?: boolean | 'custom'
+
+    /**
+     * default: false
+     * @see https://github.com/simov/slugify
+     */
+    slugify?: boolean | {
+      extend?: {
+        [key: string]: any
+      }
+      defaults?: Parameters<typeof slugify>[1]
+    }
   }
 }
 
@@ -98,5 +110,11 @@ export interface ResolvedBoxOptions extends ResolvedPergelModuleOptions {
     vueUse: boolean
     neoconfetti: boolean
     googleFonts: boolean | 'custom'
+    slugify: boolean | {
+      extend?: {
+        [key: string]: any
+      }
+      defaults?: Parameters<typeof slugify>[1]
+    }
   }
 }