feat(examples): migrate product detail page example to nuxt (#1318)

examples/product-detail-page/.env.dist

@@ -0,0 +1,2 @@
+NUXT_PUBLIC_SHOPWARE_ENDPOINT="https://demo-frontends.shopware.store"
+NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN="SWSCBHFSNTVMAWNZDNFKSHLAYW"

examples/product-detail-page/.gitignore

@@ -1,28 +1,8 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
 node_modules
-.DS_Store
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
 dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

examples/product-detail-page/README.md

@@ -1,26 +1,32 @@
-# Blank playground
+# Product detail page example
 
-This example should help get you started developing [Shopware Frontends](https://github.com/shopware/frontends).
+![Shopware Frontends](./public/shopware-frontends-logo.png)
 
-## Customization
+This repository shows an example of application built using Shopware Frontends Framework on Nuxt 3.
 
-- edit [./src/App.vue](./src/App.vue) in order to change the current example
-- edit [./src/main.js](./src/main.js) in order to adjust Shopware Frontends plugin
+## What's inside
 
-## Project Setup
+- Nuxt 3 application
+- Required libraries installed (api-client, composables, nuxt3-module)
+- Minimum configuration of Nuxt 3 module
 
-```sh
-npm install
-```
+## Requirements
 
-### Compile and Hot-Reload for Development
+Go to [Documentation > Requirements](https://frontends.shopware.com/framework/requirements.html) to see the details.
 
-```sh
-npm run dev
-```
+## Set up your Shopware 6 instance
 
-### Compile and Minify for Production
+In order to have a different API connected to the app, rename `.env.dist` file to `.env` and change the API access information. Then rerun the application.
 
-```sh
-npm run build
-```
+## Customize
+
+Now, you are free to use the `@shopware-pwa/composables-next` package in the application. You can start from [app.vue](./app.vue).
+
+## Install & Run
+
+1. `pnpm i` to install deps
+2. `pnpm dev` to run the project in dev mode
+
+## Try it online
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/shopware/frontends/tree/main/templates/vue-blank)

examples/product-detail-page/src/App.vue → examples/product-detail-page/app.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useProductSearch } from "@shopware-pwa/composables-next";
-import ProductView from "@/components/ProductView.vue";
 import type { Schemas } from "#shopware";
 
 const { search } = useProductSearch();
@@ -31,15 +28,3 @@ onMounted(async () => {
     </Transition>
   </div>
 </template>
-<style>
-/* we will explain what these classes do next! */
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 1s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-</style>

examples/product-detail-page/src/components/ProductCard.vue → examples/product-detail-page/components/ProductCard.vue

@@ -1,14 +1,8 @@
 <script setup lang="ts">
-import { computed, defineProps } from "vue";
 import {
   getSmallestThumbnailUrl,
   getSrcSetForMedia,
 } from "@shopware-pwa/helpers-next";
-import {
-  useAddToCart,
-  useProductPrice,
-  usePrice,
-} from "@shopware-pwa/composables-next";
 import type { components } from "@shopware/api-client/store-api-types";
 const props = defineProps<{
   product: components["schemas"]["Product"];

examples/product-detail-page/src/components/ProductView.vue → examples/product-detail-page/components/ProductView.vue

@@ -1,17 +1,9 @@
 <script setup lang="ts">
-import { computed, defineProps, ref } from "vue";
 import type { Schemas } from "#shopware";
 import {
   getSmallestThumbnailUrl,
   getSrcSetForMedia,
 } from "@shopware-pwa/helpers-next";
-import {
-  useAddToCart,
-  useProductPrice,
-  usePrice,
-  useProductAssociations,
-} from "@shopware-pwa/composables-next";
-import ProductCard from "./ProductCard.vue";
 
 const props = defineProps<{
   product: Schemas["Product"];
@@ -95,7 +87,7 @@ const unitName = computed(() => product.value?.unit?.name);
           {{ manufacturer }}
         </p>
         <h1
-          class="lg:text-2xl text-xl font-semibold lg:leading-6 leading-7 text-gray-800 dark:text-white mt-2"
+          class="lg:text-2xl text-xl font-semibold lg:leading-6 leading-7 text-gray-800 mt-2"
         >
           {{ productName }}
         </h1>

examples/product-detail-page/nuxt.config.ts

@@ -0,0 +1,23 @@
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  extends: ["@shopware-pwa/composables-next/nuxt-layer"],
+  shopware: {
+    endpoint: "https://demo-frontends.shopware.store/store-api/",
+    accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
+  },
+  modules: ["@shopware-pwa/nuxt3-module"],
+  /**
+   * Commented because of the StackBlitz error
+   * Issue: https://github.com/shopware/frontends/issues/88
+   */
+  typescript: {
+    // typeCheck: true,
+    strict: true,
+  },
+  telemetry: false,
+  app: {
+    head: {
+      script: [{ src: "https://cdn.tailwindcss.com" }],
+    },
+  },
+});

examples/product-detail-page/package.json

@@ -1,25 +1,25 @@
 {
-  "name": "example-product-detail-page",
-  "version": "0.0.0",
+  "name": "product-detail-page-example",
+  "version": "0.1.0",
   "private": true,
-  "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "vue-tsc --noEmit",
-    "preview": "vite preview"
+    "build": "nuxt prepare && nuxt build",
+    "dev": "nuxt prepare && nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
   },
-  "dependencies": {
+  "devDependencies": {
     "@shopware-pwa/composables-next": "canary",
-    "@shopware-pwa/helpers-next": "canary",
+    "@shopware-pwa/nuxt3-module": "canary",
     "@shopware/api-client": "canary",
-    "js-cookie": "3.0.5",
-    "vue": "3.5.6"
-  },
-  "devDependencies": {
     "@types/node": "20.14.10",
-    "@vitejs/plugin-vue": "5.1.4",
-    "vite": "5.4.6",
+    "@vueuse/nuxt": "11.1.0",
+    "nuxt": "3.13.2",
+    "typescript": "5.5.4",
+    "vue": "3.5.6",
     "vue-tsc": "2.1.6"
+  },
+  "engines": {
+    "node": "^18.17.x || ^20.x"
   }
 }

examples/product-detail-page/tsconfig.json

@@ -1,34 +1,9 @@
 {
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "types": ["vite/client", "./env.d.ts"],
-    "skipLibCheck": false,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    /* Shopware config */
     "paths": {
-      "#imports": ["./imports.d.ts"],
-      "#shopware": ["./shopware.d.ts"],
-      "@/*": ["./src/*"],
-      "@components/*": ["./src/components/*"]
-    },
-    "rootDir": "."
-  },
-  "include": ["src/**/*", "./shopware.d.ts", "./imports.d.ts"]
+      "#shopware": ["./shopware.d.ts"]
+    }
+  }
 }