The Crystallize NuxtJS Boilerplate is an open-source, MIT-licensed ecommerce storefront template built with Nuxt.js and Vue 2, designed to start headless ecommerce projects on the Crystallize product information management (PIM) platform.
What is the Crystallize NuxtJS Boilerplate?
This boilerplate is a ready-to-run Nuxt.js storefront that connects to Crystallize's headless ecommerce and GraphQL-based PIM service. It takes your Crystallize tenant identifier as input and produces a fully functional Vue ecommerce frontend with rich content capabilities. The project is maintained by Crystallize as part of a larger monorepo and can be bootstrapped via the Crystallize CLI.
Key Features
- Headless ecommerce ready — The storefront is built for the Crystallize platform, which separates frontend from backend ecommerce logic through a GraphQL API.
- Built with Nuxt.js and Vue 2 — Uses the latest Nuxt.js framework (as indicated by the repository badge) with Vue 2, giving you server-side rendering and a component-based architecture.
- Frontend performance focus — The boilerplate emphasizes fast frontend performance, which is a key factor for ecommerce SEO and conversion.
- One-click Vercel deployment — A dedicated Vercel button sets up the project with the required environment variable CRYSTALLIZE_TENANT_IDENTIFIER automatically.
- Crystallize CLI bootstrap — Run
npx @crystallize/cli my-projectto scaffold a new project, choose this Nuxt.js + Vue template, and optionally add Vercel deployment. - Code quality tooling — The project enforces Prettier for formatting and ESLint for linting, as shown by the repository badges.
- Open source and MIT licensed — The code is freely available on GitHub and can be customized or redistributed under the MIT license.
Who is it for?
Vue developers who want to build an ecommerce storefront with Nuxt.js without starting from scratch. Ecommerce teams using Crystallize who need a frontend that showcases rich product content from the PIM. Agencies building custom headless ecommerce solutions who want a performant, well-structured starting point.
What can you do with it?
Vue ecommerce developers: Bootstrap a new storefront in minutes by running the Crystallize CLI and connecting it to a Crystallize tenant, then start dev server on localhost:3000.
Marketing-focused ecommerce teams: Use the boilerplate's rich content-driven approach to build product pages that tell stories, supported by Crystallize's structured PIM engine.
JAMStack adopters: Deploy the Nuxt.js frontend as a JAMStack site on Vercel with a single click or via the Vercel CLI.
How does it work?
Start by running npx @crystallize/cli my-project (requires Node 8 or higher). The CLI prompts you for your tenant identifier, lets you pick the Nuxt.js + Vue template, and optionally configures Vercel. After scaffolding, run npm run dev or yarn dev to launch the development server at http://localhost:3000. For production, either deploy via Vercel's one-click button or run vercel from the project directory.
Pricing
The boilerplate is completely free and open source under the MIT license. The only service you need is a Crystallize tenant, which is a separate product with its own pricing.
FAQ
Is the Crystallize NuxtJS Boilerplate free?
Yes, the boilerplate is open source and licensed under MIT, meaning you can use it freely, modify it, and even use it in commercial projects. You will need a Crystallize tenant to provide the product catalog and ecommerce backend.
What do I need to get started?
You need Node.js version 8 or higher and either the Crystallize CLI or a Vercel account for one-click deployment. You also need a Crystallize tenant identifier—the default demo uses "furniture" if you want to try it without setting up your own.
Does this boilerplate work with Vercel?
Yes, it has a dedicated one-click deploy button for Vercel that automatically sets the environment variable for your tenant identifier. You can also deploy manually by installing the Vercel CLI and running vercel.
What frontend framework does it use?
The boilerplate uses Nuxt.js (latest version) with Vue 2. This gives you server-side rendering, static site generation, and a Vue-based component system, all aimed at fast frontend performance.
Can I use this without Crystallize?
No, the storefront is specifically designed to work with the Crystallize headless ecommerce and PIM platform. The entire data layer connects to your Crystallize tenant's GraphQL API, so a tenant is required.
