feat(nuxt3-app): add 404 component (SWF-235)

.changeset/yellow-peas-pump.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Add page not found component

templates/vue-demo-store/components/errors/RoutingNotFound.vue

@@ -0,0 +1,15 @@
+<template>
+  <section class="container mx-auto text-center my-20">
+    <h1 class="text-4xl font-bold mb-3">Page not found</h1>
+    <p class="text-sm mb-3">
+      We are sorry, the page you're looking for could not be found. It may no
+      longer exist or may have been moved.
+    </p>
+    <router-link
+      class="inline-flex justify-center items-center py-2 px-4 text-base font-medium text-center text-white bg-brand-primary rounded-lg hover:bg-gray-400"
+      to="/"
+    >
+      Back to homepage
+    </router-link>
+  </section>
+</template>

templates/vue-demo-store/pages/[...all].vue

@@ -13,6 +13,7 @@ import {
 } from "@shopware-pwa/composables-next";
 import { SeoUrl } from "@shopware-pwa/types";
 
+const NOT_FOUND_COMPONENT = "errors/RoutingNotFound";
 const { resolvePath } = useNavigationSearch();
 const route = useRoute();
 
@@ -29,6 +30,9 @@ const { routeName, foreignKey } = useNavigationContext(
 
 function render() {
   const componentName = routeName.value;
+  if (!componentName)
+    return h("div", h(resolveComponent(pascalCase(NOT_FOUND_COMPONENT))));
+
   const componentNameToResolve = pascalCase(componentName as string);
   const cmsPageView = routeName && resolveComponent(componentNameToResolve);
   if (cmsPageView) {