fix: add prefix for tailwind viewer route (#460)

Co-authored-by: Sébastien Chopin <[email protected]>
Co-authored-by: pooya parsa <[email protected]>

package.json

@@ -25,7 +25,7 @@
     "test": "yarn lint"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.3",
+    "@nuxt/kit": "^3.0.0-rc.4",
     "@nuxt/postcss8": "^1.1.3",
     "@types/tailwindcss": "^3.0.10",
     "autoprefixer": "^10.4.7",
@@ -36,7 +36,7 @@
     "postcss": "^8.4.14",
     "postcss-custom-properties": "^12.1.7",
     "postcss-nesting": "^10.1.7",
-    "tailwind-config-viewer": "^1.7.0",
+    "tailwind-config-viewer": "^1.7.1",
     "tailwindcss": "^3.0.24",
     "ufo": "^0.8.4"
   },
@@ -46,7 +46,7 @@
     "@nuxtjs/eslint-config-typescript": "latest",
     "codecov": "latest",
     "eslint": "latest",
-    "nuxt": "^3.0.0-rc.3",
+    "nuxt": "^3.0.0-rc.4",
     "standard-version": "latest"
   }
 }

src/module.ts

@@ -2,7 +2,6 @@ import { join, relative } from 'path'
 import { existsSync } from 'fs'
 import { defuArrayFn } from 'defu'
 import chalk from 'chalk'
-import { withTrailingSlash } from 'ufo'
 import consola from 'consola'
 import {
   defineNuxtModule,
@@ -114,21 +113,21 @@ export default defineNuxtModule({
 
     // Add _tailwind config viewer endpoint
     if (nuxt.options.dev && moduleOptions.viewer) {
-      const route = '/_tailwind/'
+      const route = '/_tailwind'
       const createServer = await import('tailwind-config-viewer/server/index.js').then(r => r.default || r) as any
-      const { withoutTrailingSlash } = await import('ufo')
-      const _viewerDevMiddleware = createServer({ tailwindConfigProvider: () => tailwindConfig }).asMiddleware()
+      const { withTrailingSlash, withoutTrailingSlash } = await import('ufo')
+      const _viewerDevMiddleware = createServer({ tailwindConfigProvider: () => tailwindConfig, routerPrefix: route }).asMiddleware()
       const viewerDevMiddleware = (req, res) => {
         if (req.originalUrl === withoutTrailingSlash(route)) {
           res.writeHead(301, { Location: withTrailingSlash(req.originalUrl) })
-          res.end()
+          return res.end()
         }
         _viewerDevMiddleware(req, res)
       }
       addDevServerHandler({ route, handler: viewerDevMiddleware })
       nuxt.hook('listen', (_, listener) => {
-        const fullPath = `${withoutTrailingSlash(listener.url)}${route}`
-        logger.info(`Tailwind Viewer: ${chalk.underline.yellow(fullPath)}`)
+        const viewerUrl = `${withoutTrailingSlash(listener.url)}${route}`
+        logger.info(`Tailwind Viewer: ${chalk.underline.yellow(withTrailingSlash(viewerUrl))}`)
       })
     }
   }