@osimart/create-storefront 1.0.9 → 1.0.10

package/app/composables/useMenu.js

@@ -13,7 +13,7 @@
  *   /categories/<slug>      CLASSIFICATION  (resource.type = CATEGORY)
  *   /collections/<slug>     CLASSIFICATION  (resource.type = COLLECTION)
  *   /products/<slug>        PRODUCT
- *   /pages/<handle>         PAGE
+ *   /<handle>               PAGE            (one segment; /pages/<handle> 301s here)
  *   /search                 SEARCH
  *   /cart                   CART
  *   /account                ACCOUNT
@@ -45,7 +45,7 @@ export function useMenu() {
       return `/products/${relation.product.slugified_name}`;
     }
     if (relation.page?.handle) {
-      return `/pages/${relation.page.handle}`;
+      return `/${relation.page.handle}`;
     }
 
     return "/";

package/app/composables/useProductUrl.js

@@ -17,7 +17,7 @@
  *
  *     /categories/<slug>   CLASSIFICATION   (already matched)
  *     /collections/<slug>  CLASSIFICATION   (already matched)
- *     /pages/<handle>      PAGE             (already matched)
+ *     /<handle>            PAGE             (one segment only)
  *     /<category>/<slug>   PRODUCT          ← needs adding, matched LAST so it
  *                                             can't shadow the prefixes above
  *

package/app/pages/[category]/[product].vue

@@ -14,7 +14,7 @@ import { useProductResource } from "#osi/composables/useProductDetail";
  *
  *     /categories/<slug>   CLASSIFICATION
  *     /collections/<slug>  CLASSIFICATION
- *     /pages/<handle>      PAGE
+ *     /<handle>            PAGE      (one segment, never meets this route)
  *     /products/<slug>     PRODUCT   (keep — uncategorised products use it)
  *     /<category>/<slug>   PRODUCT   ← last
  *

package/app/pages/[handle].vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <SectionRenderer v-if="data?.sections?.length" :sections="data.sections" />
+
+    <div v-else-if="!error" class="osi-empty">
+      <p>This page hasn't been set up yet.</p>
+    </div>
+
+    <div v-else class="osi-empty">
+      <p>We couldn't load this page.</p>
+      <pre v-if="isDev" class="osi-empty-detail">{{ error.message }}</pre>
+    </div>
+  </div>
+</template>
+<script setup>
+/**
+ * A merchant page — `/<handle>` (Shopify's /pages/<handle>, without the prefix).
+ *
+ * One segment only. Nuxt matches static routes first (checkout, login,
+ * search…), then this, then [...slug] — so a platform route always wins, and
+ * the backend refuses page handles that would collide with one
+ * (RESERVED_HANDLES).
+ *
+ * Because this catches every unknown one-segment path (/whatever), only a PAGE
+ * payload counts. Anything else — NOT_FOUND, a 404 — is a real 404, drawn by
+ * error.vue with the theme's 404 page and a 404 status.
+ *
+ * The old /pages/<handle> URLs 301 here (pages/pages/[handle].vue).
+ */
+import { useRenderContext } from '#osi/composables/useRenderContext';
+
+definePageMeta({ name: 'page' });
+
+const route = useRoute();
+const { render, store } = useStorefront();
+const { setRenderContext, resource } = useRenderContext();
+const origin = useRequestURL().origin;
+
+const { data, error } = await useAsyncData(
+  `render:${route.path}`,
+  () => render(route.path)
+);
+
+const templateName = (payload) => {
+  const t = payload?.template;
+  return String((t && typeof t === 'object' ? t.name : t) ?? '').toUpperCase();
+};
+
+const status = error.value?.status ?? error.value?.statusCode;
+const isPage = !!data.value && templateName(data.value) === 'PAGE';
+
+if (status === 404 || (!error.value && !isPage)) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
+}
+
+setRenderContext(data.value);
+watch(data, (payload) => setRenderContext(payload));
+
+const isDev = import.meta.dev;
+
+const seo = computed(() => data.value?.seo ?? {});
+
+useHead({
+  title: () => seo.value.title_full ?? seo.value.title ?? resource.value?.name ?? store.value?.name ?? '',
+  titleTemplate: (title) => title ?? '',
+  meta: () => [
+    { name: 'description', content: seo.value.description ?? undefined },
+    { property: 'og:title', content: seo.value.title_full ?? seo.value.title ?? undefined },
+    { property: 'og:description', content: seo.value.description ?? undefined },
+    { property: 'og:image', content: seo.value.image ?? undefined },
+    { name: 'robots', content: seo.value.no_index ? 'noindex, nofollow' : 'index, follow' },
+  ],
+  link: () => seo.value.canonical_path
+    ? [{ rel: 'canonical', href: `${origin}${seo.value.canonical_path}` }]
+    : [],
+});
+</script>
+
+<style scoped>
+.osi-empty { padding: 6rem 1rem; text-align: center; color: var(--osi-text); opacity: 0.7; }
+.osi-empty-detail { margin-top: 1rem; font-size: 12px; white-space: pre-wrap; }
+</style>

package/app/pages/pages/[handle].vue

@@ -1,58 +1,20 @@
-<template>
-  <div>
-    <SectionRenderer v-if="data?.sections?.length" :sections="data.sections" />
-
-    <div v-else-if="!error" class="osi-empty">
-      <p>This page hasn't been set up yet.</p>
-    </div>
-
-    <div v-else class="osi-empty">
-      <p>We couldn't load this page.</p>
-      <pre v-if="isDev" class="osi-empty-detail">{{ error.message }}</pre>
-    </div>
-  </div>
-</template>
 <script setup>
-import { useRenderContext } from '#osi/composables/useRenderContext';
-
-const route = useRoute();
-const { render, store } = useStorefront();
-const { setRenderContext, resource } = useRenderContext();
-
-const { data, error } = await useAsyncData(
-  `render:${route.path}`,
-  () => render(route.path)
-);
-
-if (error.value?.status === 404) {
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
-}
-
-setRenderContext(data.value);
-watch(data, (payload) => setRenderContext(payload));
-
-const isDev = import.meta.dev;
-
-const seo = computed(() => data.value?.seo ?? {});
-const origin = useRequestURL().origin;
-
-useHead({
-  title: () => seo.value.title_full ?? seo.value.title ?? resource.value?.name ?? store.value?.name ?? '',
-  titleTemplate: (title) => title ?? '',
-  meta: () => [
-    { name: 'description', content: seo.value.description ?? undefined },
-    { property: 'og:title', content: seo.value.title_full ?? seo.value.title ?? undefined },
-    { property: 'og:description', content: seo.value.description ?? undefined },
-    { property: 'og:image', content: seo.value.image ?? undefined },
-    { name: 'robots', content: seo.value.no_index ? 'noindex, nofollow' : 'index, follow' },
-  ],
-  link: () => seo.value.canonical_path
-    ? [{ rel: 'canonical', href: `${origin}${seo.value.canonical_path}` }]
-    : [],
+/**
+ * Old page URL — `/pages/<handle>` → `/<handle>`, 301.
+ *
+ * Kept so links already shared, indexed or saved in a menu's custom URL keep
+ * working. The redirect happens in route middleware, before anything renders,
+ * so the server answers with the 301 itself (good for search engines).
+ */
+definePageMeta({
+  middleware: (to) =>
+    navigateTo(
+      { path: `/${to.params.handle}`, query: to.query, hash: to.hash },
+      { redirectCode: 301 }
+    ),
 });
 </script>
 
-<style scoped>
-.osi-empty { padding: 6rem 1rem; text-align: center; color: var(--osi-text); opacity: 0.7; }
-.osi-empty-detail { margin-top: 1rem; font-size: 12px; white-space: pre-wrap; }
-</style>
+<template>
+  <div />
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimart/create-storefront",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Osimart storefront platform — logic, platform pages and CLI; extended by every theme repo",
   "type": "module",
   "main": "./nuxt.config.ts",