NuCommerce Store

NuCommerce Store is a Nuxt 3 full-stack (SPA-SSR) eCommerce starter template that pre-packages the Pinegrow Nuxt Module, the Pinegrow Tailwind CSS Plugin, and the Nuxt UI component library, and is built to be opened in Vue Designer, Pinegrow's desktop visual editor. It ships with a working storefront whose product data is fetched from Nitro-powered server routes, and a live demo is hosted at pg-nuxtui.netlify.app.

What is NuCommerce Store?

NuCommerce Store is the public GitHub template pinegrow/pg-nuxtui maintained by Pinegrow, the company behind Vue Designer. It scaffolds a complete Nuxt 3 application with an eCommerce storefront that uses Nuxt UI components for the interface and Nitro server routes to serve product data over APIs. Cloning it takes a project name as input and produces a runnable app in two flavors: the full storefront, or a minimal variant with a single empty home page (branch #minimal).

Key Features

• Nuxt 3 framework — Uses the Vue-based Nuxt 3 meta-framework with file-based routing via Nuxt Router, useState for SSR-friendly state sharing, and polyglot output: npm run build produces a server-rendered app, npm run generate produces a full-static site.
• Nuxt UI component library — Fully styled, customizable components built on HeadlessUI-Vue, VueUse, Nuxt Tailwind CSS, Nuxt Color Mode, and Nuxt Icon; color mode is set to light in nuxt.config.ts and a local BaseIcon component overrides UIcon to support any Iconify icon via UnoCSS Preset Icons.
• Pinegrow Vue Designer integration — The Pinegrow Nuxt Module and Tailwind CSS Plugin enable visual, live editing of Vue single-file components in Vue Designer on macOS, Windows, and Linux; the Config Panel lists all key packages and their documentation links.
• Nitro-powered API routes — Store data is fetched by the frontend from server routes implemented with Nitro, showing a complete full-stack data flow inside a single Nuxt project.
• File-based CMS with Nuxt Content — Nuxt Content is preinstalled, letting you manage store text, blog posts, or docs as Markdown files and Vue components; the README itself is a Markdown page.
• State management and forms — Pinia via @pinia/nuxt handles global state, and VeeValidate covers value tracking, validation, error messages, and submissions.
• Image optimization and SEO — Nuxt Image is included for optimized images, and the Nuxt SEO module collection (nuxt-site-config, nuxt-simple-robots, nuxt-simple-sitemap, nuxt-og-image, nuxt-link-checker, nuxt-seo-utils, nuxt-schema-org) is wired up with a unified site config.
• Developer tooling — Ships with Nuxt Devtools, an optional Vue Devtools plugin (deactivated; uncomment plugins/devtools.client.ts to enable), ESLint 9 flat config via @nuxt/eslint, Prettier with eslint-config-prettier, and recommended VS Code extensions (Volar, ESLint, Prettier).

Who is it for?

• Vue developers who want a maintained Nuxt 3 eCommerce starter with Nuxt UI and Nitro API routes rather than assembling Tailwind, UI, CMS, SEO, and state modules by hand.
• Teams using or evaluating Vue Designer — this template is the fastest way to test Pinegrow's visual SFC editing because the Nuxt Module, Tailwind Plugin, and config samples are already present.
• Developers shipping content-driven storefronts — with Nuxt Content and Nuxt SEO preinstalled, publishing product pages, sitemaps, robots.txt, and OG images is mostly config-free.
• Netlify users — the repo includes a one-click Deploy to Netlify button, letting you publish a working storefront in minutes.

What can you do with NuCommerce Store?

• Launch a product storefront: clone or generate the template, run npm run dev, and get a working Nuxt UI storefront that pulls product data from Nitro server routes, deployable to Netlify with the included button.
• Visually design components: open the project in Vue Designer and use the Design Panel (via the Pinegrow Tailwind Plugin) to customize Tailwind theme settings and adjust components visually without leaving the editor.
• Add Markdown content: leverage Nuxt Content to turn Markdown files into store copy, blog posts, or documentation pages with Vue component support.
• Audit performance and bundles: npm run analyze reports bundle sizes, and npm run unlighthouse runs Lighthouse across the whole site for all pages.

How does NuCommerce Store work?

Create a repository from the GitHub template, or run npx giget@latest gh:pinegrow/pg-nuxtui my-nuxtui-app and npm install; a minimal single-page variant is available via the #minimal branch. Opening the project in Vue Designer triggers a Config Panel with setup guidance, and day-to-day development is npm run dev. For production, npm run build generates a server-rendered app, npm run generate creates a static site, and npm run now builds and previews locally.

FAQ

Is NuCommerce Store free to use?

The repository is a public GitHub template, so anyone can copy it with the Generate button or the giget command without paying. The page does not state a license, so check the repository's license file before commercial use.

Which Vue framework does NuCommerce Store use?

It is built with Nuxt 3, the Vue-based meta-framework, and uses Vue 3 single-file components with Composition API <script setup> syntax. Routing is file-based through Nuxt Router, and the project ships with TypeScript support with allowJs: true and strict mode disabled.

Does it include a CMS?

Yes, Nuxt Content is preinstalled and acts as a file-based CMS powered by Markdown and Vue components. The README page itself is a Markdown file, so content editing happens directly in the repository's markdown files.

Can I deploy NuCommerce Store to Netlify?

Yes, the repository has a one-click Deploy to Netlify button that points to app.netlify.com to start a deployment from your own copy of the repo. Nuxt's deployment documentation is also linked for other hosting platforms.

What is Vue Designer?

Vue Designer is a desktop visual editor for Vue apps created by Pinegrow, available for macOS, Windows, and Linux, with a free trial at vuedesigner.com. This template includes the Pinegrow Nuxt Module specifically so you can open the project in Vue Designer and edit Vue single-file components visually.