feat: add new Nuxt module for guidance banner#2424
feat: add new Nuxt module for guidance banner#2424Maciej D (mdanilowicz) wants to merge 12 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
There was a problem hiding this comment.
Pull request overview
Adds a new Nuxt module package intended to show a dev-only “project ready” guidance banner by mounting a client-side Vue app outside the main Nuxt tree, with dismissal persisted in localStorage.
Changes:
- Introduces
@shopware/guidance-bannerNuxt module scaffolding and client plugin to mount the banner. - Adds the
ShopwareBannercomponent UI and body-padding sync logic to avoid covering page content. - Prepares the vue starter template to consume the module (currently commented out).
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| templates/vue-starter-template/nuxt.config.ts | Adds (commented) module entry intended to enable the banner in the template. |
| packages/shopware-guidance-banner/tsconfig.json | Adds TS config for the new module package. |
| packages/shopware-guidance-banner/src/runtime/plugin.client.ts | Client plugin that creates a detached Vue app and mounts the banner container to document.body. |
| packages/shopware-guidance-banner/src/runtime/components/ShopwareBanner.vue | Banner UI, dismissal persistence, and dynamic body padding behavior. |
| packages/shopware-guidance-banner/src/module.ts | Nuxt module definition that only registers the plugin in dev mode. |
| packages/shopware-guidance-banner/package.json | New package manifest, scripts, exports, and dependencies for publishing. |
| packages/shopware-guidance-banner/eslint.config.mjs | ESLint flat config for the new package. |
| packages/shopware-guidance-banner/.npmrc | Adds npm configuration for the package. |
| packages/shopware-guidance-banner/.gitignore | Adds ignore rules for generated/build artifacts in the new package. |
| packages/shopware-guidance-banner/.editorconfig | Adds editor formatting rules for the new package. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Maciej D (mdanilowicz)
requested review from
Björn Meyer (BrocksiNet),
Maciek Kucmus (mkucmus) and
Patryk Tomczyk (patzick)
| }, | ||
| { | ||
| label: 'Docs', | ||
| href: 'https://frontends.shopware.com/', |
There was a problem hiding this comment.
or is it https://developer.shopware.com/frontends/
Patryk Tomczyk (patzick)
left a comment
Patryk Tomczyk (patzick)
left a comment
There was a problem hiding this comment.
I strongly believe that whole package is an overkill for it. Would be much simpler to just puit that in the template and people see that on first run and can just delete plugin/component and be done with it. Having that as separate npm package doesn't look like benefit
| @@ -0,0 +1,12 @@ | |||
| root = true | |||
There was a problem hiding this comment.
we should not have dedicaated editorconfig file for this package
| @@ -0,0 +1,56 @@ | |||
| # Dependencies | |||
There was a problem hiding this comment.
this also is probably too broad
| @@ -0,0 +1,15 @@ | |||
| // @ts-check | |||
There was a problem hiding this comment.
for new package let's use oxlint right from the beginning, we'll migrate either way at some point so better now with new package
| @@ -0,0 +1,53 @@ | |||
| { | |||
| "name": "@shopware/guidance-banner", | |||
There was a problem hiding this comment.
I'd suggest something like @shopware/nuxt-guidance-banner as it's nuxt-specific, also directory change from shopware-guidance-banner to guidance-banner
| "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground", | ||
| "lint": "eslint src --ext .ts,.vue", | ||
| "lint:fix": "eslint src --ext .ts,.vue --fix", | ||
| "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags" |
There was a problem hiding this comment.
we definetly do not release like this
| "@nuxt/schema": "4.4.2", | ||
| "@nuxt/test-utils": "4.0.2", | ||
| "@types/node": "22.13.14", | ||
| "changelogen": "0.6.2", |
There was a problem hiding this comment.
review dependencies, probably many not needed like this one
| "exports": { | ||
| ".": { | ||
| "types": "./dist/types.d.mts", | ||
| "import": "./dist/module.mjs" |
There was a problem hiding this comment.
do we need build step for nuxt module? Maybe just shipping raw TS would be enough?
| const links = [ | ||
| { | ||
| label: 'View code', | ||
| href: 'https://github.com/shopware/frontends/tree/main/templates/vue-starter-template', |
There was a problem hiding this comment.
is that package only for this template?
closes #2405
The module works only on the client and only during local development. When the app starts, it mounts a banner at the bottom of the page, outside the main app tree. The banner includes quick links, can be dismissed by the user, and remembers that choice in localStorage so it does not reappear on the next refresh. It also adjusts the page bottom spacing dynamically to avoid covering the content.