← Cycles
www.qpoint.io · c1

Q Nuxt Layer Integration

activecreated 2026-05-11· last activity 2026-05-20

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.0
  • nuxt.config.ts — added extends configuration with local/published layer toggle
  • tailwind.config.js — stripped token definitions now inherited from layer
  • app/assets/css/main.css — simplified to remove layer-provided styles
  • app/components/ — 14 files deleted (BigPoint, BlogAuthor, BlogCard, Check, Grid, Hero, Point, Quote, SectionHeadline, Step, StepWrapper, point/Big, point/Simple)
  • components/content/FAQ.vue — deleted
  • content/**/*.md — ~15 content files updated to reference new component names
  • app/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.0 dependency with extends config supporting NUXT_LOCAL_LAYER env 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.css to remove styles now provided by the layer's shared.css

Outcome

<Results, learnings, what carries forward — filled in at completion>

What Remains

  • Run nuxt generate and 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

Artifacts

Qpoint Brand Style Guide