Q Nuxt Layer Integration
Complete q-nuxt-layer integration for www.qpoint.io and deploy
Why
The www.qpoint.io site maintained 14 local component copies (Hero, BlogCard, Quote, Step, Grid, BigPoint, Check, SectionHeadline, StepWrapper, Point, point/Simple, point/Big, BlogAuthor, FAQ) that duplicated components already extracted into q-nuxt-layer. Changes had to be made in two places, styling drifted, and the site wasn't benefiting from the shared design system that the design site and app.qpoint.io already consume.
Objective
Delete all duplicated local components, update every content and template reference to use the layer's Prose/Layout prefixed names, simplify tailwind.config.js and CSS to inherit from the layer, verify static generation succeeds, and deploy to production.
Scope
package.json— added@qpoint-io/q-nuxt-layer@^0.4.0nuxt.config.ts— addedextendsconfiguration with local/published layer toggletailwind.config.js— stripped token definitions now inherited from layerapp/assets/css/main.css— simplified to remove layer-provided stylesapp/components/— 14 files deleted (BigPoint, BlogAuthor, BlogCard, Check, Grid, Hero, Point, Quote, SectionHeadline, Step, StepWrapper, point/Big, point/Simple)components/content/FAQ.vue— deletedcontent/**/*.md— ~15 content files updated to reference new component namesapp/pages/*.vue— 4 page files updated for renamed components (blog/index, dev/typography, examples, point-demo)
Key Changes
- Added
@qpoint-io/q-nuxt-layer@^0.4.0dependency withextendsconfig supportingNUXT_LOCAL_LAYERenv var for local development - Deleted 14 local component files now consumed from the layer with Prose/Layout prefixes
- Updated all MDC references in ~15 content markdown files (both kebab-case and PascalCase variants)
- Updated Vue template references in 4 page files
- Simplified
tailwind.config.js— only www-specific colors and font overrides remain - Simplified
app/assets/css/main.cssto remove styles now provided by the layer's shared.css
Outcome
<Results, learnings, what carries forward — filled in at completion>
What Remains
- Run
nuxt generateand verify static output is complete (all routes render) - Visual review of key pages: homepage, product pages (qtap, qplane, devtools), use-case pages, blog listing
- Cross-browser check (Chrome, Safari, Firefox) for layout regressions
- Verify blog author rendering works with prop-based ProseBlogCard
- Deploy to production (Cloudflare Pages)
- Merge design-integration to main