From babecc9bf2aaa20e0bc0a59a2f644cc4c8dc5172 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 7 Sep 2026 13:21:40 +0000 Subject: [PATCH 1/2] content: add SEO guide "Nuxt 3 data grid pivot table" Adds marketing guide for the keyword "Nuxt 3 data grid pivot table" (slug: nuxt-datagrid-pivot-table). Covers ClientOnly usage, free-tier features, and Pro upgrade path for Nuxt 3 projects using @smallwebco/tinypivot-vue. Sets backlog status to drafted. Sitemap is auto-generated by the prerender script from router/routes.ts. --- demo/pages/MarketingGuide.vue | 56 ++++++++++++++++++++++++++++ demo/router/routes.ts | 5 +++ docs/distribution/keyword-backlog.md | 2 +- 3 files changed, 62 insertions(+), 1 deletion(-) diff --git a/demo/pages/MarketingGuide.vue b/demo/pages/MarketingGuide.vue index 8816284..aaf7ecb 100644 --- a/demo/pages/MarketingGuide.vue +++ b/demo/pages/MarketingGuide.vue @@ -457,6 +457,62 @@ const guides: Record = { }, ], }, + 'nuxt-datagrid-pivot-table': { + title: 'Nuxt 3 Data Grid with Pivot Table', + eyebrow: 'Nuxt 3 Feature Guide', + description: 'Add a data grid and pivot table to a Nuxt 3 app with TinyPivot Vue. Free tier includes sorting, filtering, CSV export, and Sum aggregation — no subscription.', + intro: 'TinyPivot for Vue 3 works in Nuxt 3 projects with a small client-only wrapper. The free tier gives your Nuxt application a complete data grid with filtering, sorting, CSV export, and a pivot table — no account or subscription required.', + sections: [ + { + title: 'Using TinyPivot with Nuxt 3', + paragraphs: [ + 'TinyPivot renders client-side. In a Nuxt 3 project, wrap the DataGrid component in a tag to avoid SSR hydration issues. This is a standard Nuxt pattern for any component that depends on browser APIs.', + 'No additional Nuxt configuration is required. You do not need to add the package to the build.transpile list, and there are no Nuxt-specific plugins to register.', + ], + bullets: [ + 'Wrap DataGrid in to skip SSR rendering', + 'Pass your array of flat objects to the data prop', + 'Column definitions are derived from your object keys automatically', + 'No special Nuxt config, no build.transpile changes needed', + ], + }, + { + title: 'Install TinyPivot for Vue 3', + paragraphs: [ + 'Install @smallwebco/tinypivot-vue, import the DataGrid component and its stylesheet, then bind your data array to the data prop. The component is built for Vue 3 Composition API and ships with TypeScript types.', + 'The Vue package is approximately 50 KB gzipped and has no mandatory dependencies beyond Vue 3 itself.', + ], + }, + { + title: 'What the free tier includes', + paragraphs: [ + 'The free tier of TinyPivot is a complete data grid and pivot workflow, not a restricted trial. Install the package, import the component, and all of these are immediately available.', + 'Free features include sorting, filtering, full-text search, pagination, column resize, CSV export, calculated fields, Sum aggregation with row and column totals, and 22 built-in themes. A small watermark is shown in the free tier.', + ], + bullets: [ + 'Sort, filter, search, and paginate any array of records', + 'Pivot table with Sum aggregation, row and column totals — free', + 'Calculated fields for derived metrics like margin or growth rate', + 'CSV export and column resize built in', + '22 themes including dark variants — no custom CSS needed', + ], + }, + { + title: 'Fetching data in Nuxt 3', + paragraphs: [ + 'You can fetch data with useFetch or useAsyncData and pass the result directly to TinyPivot. Because TinyPivot handles all grid operations client-side, data fetched server-side is passed to the component as a prop and processed in the browser.', + 'For large datasets loaded asynchronously, render a loading state alongside the wrapper while the fetch completes, then pass the resolved data array to DataGrid.', + ], + }, + { + title: 'Upgrade to Pro for advanced analytics', + paragraphs: [ + 'TinyPivot Pro adds the full aggregation set (Count, Count Distinct, Average, Min, Max, Median, Standard Deviation), a drag-and-drop chart builder, pivot drill-through to underlying rows, styled XLSX export, session persistence, and watermark removal.', + 'Pro also includes an optional BYOK AI Data Analyst. You configure the provider — OpenAI, Anthropic, or OpenRouter — and queries run through your own API key, keeping data in your environment. Pro is a one-time perpetual purchase: Single ($49), Unlimited ($149), or Team ($399). One license covers both @smallwebco/tinypivot-vue and @smallwebco/tinypivot-react.', + ], + }, + ], + }, 'react-datagrid-csv-export': { title: 'React Data Grid with CSV Export', eyebrow: 'React Feature Guide', diff --git a/demo/router/routes.ts b/demo/router/routes.ts index 13154d3..8b9027f 100644 --- a/demo/router/routes.ts +++ b/demo/router/routes.ts @@ -73,6 +73,11 @@ export const marketingGuides = [ title: 'Next.js Data Grid with Pivot Table | TinyPivot', description: 'Add a data grid and pivot table to a Next.js app with TinyPivot React. Free tier includes sorting, filtering, CSV export, and Sum aggregation — no subscription.', }, + { + slug: 'nuxt-datagrid-pivot-table', + title: 'Nuxt 3 Data Grid with Pivot Table | TinyPivot', + description: 'Add a data grid and pivot table to a Nuxt 3 app with TinyPivot Vue. Free tier includes sorting, filtering, CSV export, and Sum aggregation — no subscription.', + }, ] as const export type MarketingGuideSlug = typeof marketingGuides[number]['slug'] diff --git a/docs/distribution/keyword-backlog.md b/docs/distribution/keyword-backlog.md index 9658369..f6bface 100644 --- a/docs/distribution/keyword-backlog.md +++ b/docs/distribution/keyword-backlog.md @@ -37,7 +37,7 @@ All keywords below are `queued` and ready for content generation. | React data grid calculated fields | feature | react-datagrid-calculated-fields | drafted | | Vue 3 data grid column resize | feature | vue-datagrid-column-resize | drafted | | Next.js data grid pivot table | feature | nextjs-datagrid-pivot-table | drafted | -| Nuxt 3 data grid pivot table | feature | nuxt-datagrid-pivot-table | queued | +| Nuxt 3 data grid pivot table | feature | nuxt-datagrid-pivot-table | drafted | | React pivot table with charts | feature | react-pivot-table-charts | queued | | Vue pivot table with charts | feature | vue-pivot-table-charts | queued | | React data grid AI analyst | feature | react-datagrid-ai-analyst | queued | From 93c673e48e7abbe9a4ab886ceba12ac3c8c80a70 Mon Sep 17 00:00:00 2001 From: Brice Vallieres <13512745+bvallier@users.noreply.github.com> Date: Mon, 14 Sep 2026 09:19:56 -0400 Subject: [PATCH 2/2] content: add SEO guide "Nuxt 3 data grid pivot table" Adds marketing guide for slug nuxt-datagrid-pivot-table (keyword: "Nuxt 3 data grid pivot table", intent: feature). Sets backlog status to drafted. --- demo/pages/MarketingGuide.vue | 27 +++++++++++++-------------- demo/router/routes.ts | 2 +- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/demo/pages/MarketingGuide.vue b/demo/pages/MarketingGuide.vue index aaf7ecb..c33c65e 100644 --- a/demo/pages/MarketingGuide.vue +++ b/demo/pages/MarketingGuide.vue @@ -460,34 +460,33 @@ const guides: Record = { 'nuxt-datagrid-pivot-table': { title: 'Nuxt 3 Data Grid with Pivot Table', eyebrow: 'Nuxt 3 Feature Guide', - description: 'Add a data grid and pivot table to a Nuxt 3 app with TinyPivot Vue. Free tier includes sorting, filtering, CSV export, and Sum aggregation — no subscription.', - intro: 'TinyPivot for Vue 3 works in Nuxt 3 projects with a small client-only wrapper. The free tier gives your Nuxt application a complete data grid with filtering, sorting, CSV export, and a pivot table — no account or subscription required.', + description: 'Add a data grid with pivot tables to Nuxt 3 using TinyPivot Vue. Free tier includes sorting, filtering, CSV export, and Sum aggregation — no subscription.', + intro: 'TinyPivot for Vue 3 works in Nuxt 3 projects with minimal configuration. The free tier gives your Nuxt application a complete data grid with filtering, sorting, CSV export, and a pivot table — no account or subscription required.', sections: [ { title: 'Using TinyPivot with Nuxt 3', paragraphs: [ - 'TinyPivot renders client-side. In a Nuxt 3 project, wrap the DataGrid component in a tag to avoid SSR hydration issues. This is a standard Nuxt pattern for any component that depends on browser APIs.', - 'No additional Nuxt configuration is required. You do not need to add the package to the build.transpile list, and there are no Nuxt-specific plugins to register.', + 'TinyPivot renders client-side. In a Nuxt 3 project, wrap the DataGrid component in a tag to avoid SSR hydration issues. The component itself has no server-side rendering requirement, so this is typically a one-line change to the template that hosts the grid.', + 'Because TinyPivot handles all data operations in the browser, there is no additional Nuxt configuration needed for server-side data fetching or hydration mismatches.', ], bullets: [ - 'Wrap DataGrid in to skip SSR rendering', - 'Pass your array of flat objects to the data prop', + 'Wrap the DataGrid in to skip SSR for that component', + 'Pass an array of plain objects to the data prop', 'Column definitions are derived from your object keys automatically', - 'No special Nuxt config, no build.transpile changes needed', + 'No Nuxt server plugins or module configuration required', ], }, { - title: 'Install TinyPivot for Vue 3', + title: 'Install TinyPivot for Nuxt 3', paragraphs: [ 'Install @smallwebco/tinypivot-vue, import the DataGrid component and its stylesheet, then bind your data array to the data prop. The component is built for Vue 3 Composition API and ships with TypeScript types.', - 'The Vue package is approximately 50 KB gzipped and has no mandatory dependencies beyond Vue 3 itself.', + 'The Vue package is approximately 50 KB gzipped. It has no mandatory dependencies beyond Vue 3 itself, so the addition to your Nuxt bundle is straightforward to reason about.', ], }, { title: 'What the free tier includes', paragraphs: [ - 'The free tier of TinyPivot is a complete data grid and pivot workflow, not a restricted trial. Install the package, import the component, and all of these are immediately available.', - 'Free features include sorting, filtering, full-text search, pagination, column resize, CSV export, calculated fields, Sum aggregation with row and column totals, and 22 built-in themes. A small watermark is shown in the free tier.', + 'The free tier of TinyPivot for Vue 3 is a complete data grid and pivot workflow, not a restricted trial. Free features include sorting, filtering, full-text search, pagination, column resize, CSV export, calculated fields, Sum aggregation with row and column totals, and 22 built-in themes. A small watermark is shown in the free tier.', ], bullets: [ 'Sort, filter, search, and paginate any array of records', @@ -498,10 +497,10 @@ const guides: Record = { ], }, { - title: 'Fetching data in Nuxt 3', + title: 'Bundle size in a Nuxt 3 project', paragraphs: [ - 'You can fetch data with useFetch or useAsyncData and pass the result directly to TinyPivot. Because TinyPivot handles all grid operations client-side, data fetched server-side is passed to the component as a prop and processed in the browser.', - 'For large datasets loaded asynchronously, render a loading state alongside the wrapper while the fetch completes, then pass the resolved data array to DataGrid.', + 'The @smallwebco/tinypivot-vue package is approximately 50 KB gzipped. TinyPivot does not add server-side weight. All rendering is client-side, and the component integrates as a standard Vue 3 library in a Nuxt build.', + 'Because the DataGrid is wrapped in , Nuxt excludes it from the server-rendered HTML entirely. It hydrates in the browser after the initial page load, which keeps the Nuxt server payload lean.', ], }, { diff --git a/demo/router/routes.ts b/demo/router/routes.ts index 8b9027f..c6d84bb 100644 --- a/demo/router/routes.ts +++ b/demo/router/routes.ts @@ -76,7 +76,7 @@ export const marketingGuides = [ { slug: 'nuxt-datagrid-pivot-table', title: 'Nuxt 3 Data Grid with Pivot Table | TinyPivot', - description: 'Add a data grid and pivot table to a Nuxt 3 app with TinyPivot Vue. Free tier includes sorting, filtering, CSV export, and Sum aggregation — no subscription.', + description: 'Add a data grid with pivot tables to Nuxt 3 using TinyPivot Vue. Free tier includes sorting, filtering, CSV export, and Sum aggregation — no subscription.', }, ] as const