cinqcinqdev-seo 0.1.43 → 0.1.44

package/README.md

@@ -567,33 +567,38 @@ Auth state is read from `useSupabaseUser()` provided by `@nuxtjs/supabase`. Your
 
 ## Rendering Pages on the Frontend
 
-Pages created in the CMS must be rendered by your Nuxt app. Since slugs can now contain slashes (e.g. `faq/my-question`), your route file **must use a catch-all segment**.
+Pages created in the CMS must be rendered by your Nuxt app.
 
-### Route file
+### Required route file: `pages/[...slug].vue`
 
-Create `pages/[...slug].vue` (not `pages/[slug].vue`):
+Slugs can contain slashes (e.g. `faq/my-question` when a subdirectory is set). A standard `[slug].vue` file **only matches a single path segment** — it will never match `/faq/my-question` and will return 404.
 
-```
-pages/
-  [...slug].vue   ✅  matches /about, /faq/my-question, /services/web-design
-  [slug].vue      ❌  only matches /about — breaks subdirectory slugs
-```
+You must use a **catch-all** route:
+
+| File | Matches |
+|---|---|
+| `pages/[...slug].vue` ✅ | `/about`, `/faq/pricing`, `/services/web-design` |
+| `pages/[slug].vue` ❌ | `/about` only — `/faq/pricing` returns 404 |
+
+> **If you already have `pages/[slug].vue`**, rename it to `pages/[...slug].vue` and update the slug reference as shown below. Both flat slugs and subdirectory slugs will continue to work.
 
-### Example `pages/[...slug].vue`
+### `pages/[...slug].vue`
 
 ```vue
 <script setup>
 const route = useRoute()
 const supabase = useSupabaseClient()
 
-// Join segments back into the full slug stored in the DB
-const slug = computed(() => (route.params.slug as string[]).join('/'))
+// route.params.slug is an array of path segments — join them back into the DB slug
+// e.g. /faq/pricing  →  ['faq', 'pricing']  →  'faq/pricing'
+// e.g. /about        →  ['about']            →  'about'
+const slug = (route.params.slug as string[]).join('/')
 
-const { data: page } = await useAsyncData(`page-${slug.value}`, async () => {
+const { data: page } = await useAsyncData(`page-${slug}`, async () => {
   const { data } = await supabase
     .from('pages')
     .select('*')
-    .eq('slug', slug.value)
+    .eq('slug', slug)
     .eq('status', 'published')
     .single()
   return data
@@ -621,7 +626,9 @@ useSeoMeta({
 
 ### How subdirectory slugs are stored
 
-When a page is created with subdirectory `faq` and title `What is pricing`, the slug saved to the database is `faq/what-is-pricing`. The full URL on the frontend is `/faq/what-is-pricing`. There is no separate parent page or nested table — the slash is just part of the slug string.
+When a page is created with subdirectory `faq` and title `What is pricing`, the slug stored in the database is `faq/what-is-pricing`. The frontend URL is `/faq/what-is-pricing`. There is no nested table or parent record — the slash is just part of the slug string.
+
+Pages without a subdirectory (e.g. title `About`, no subdirectory) get a plain slug like `about` and are served at `/about` — exactly as before.
 
 ---
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.1.43",
+  "version": "0.1.44",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinqcinqdev-seo",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
   "license": "MIT",
   "module": "./dist/module.mjs",