An eCommerce website starter template based on Nuxt and Vue
NuxtVueE-commerceStarter
nuxt-starter-prismic-farbe — Nuxt Ecommerce Template
By prismicio-community
Farbe.film is a 3D eCommerce website template built on Nuxt and Prismic, using TresJS to render 3D scenes, GSAP for animations, Stripe for payments, and Tailwind CSS for the interface.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Author preview
Author-provided preview
Preview provided in the project README.
One original preview is available. Open the full image to inspect the design.
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-02View source
What stands out
A quick read of the recorded project description.
Content management via Prismic, with the ability to initialize your own repository through Slice Machine
Uses TresJS to render 3D scenes in pages
Uses GSAP for animation effects
Integrates Stripe for payments and Tailwind CSS for styling
Provides an online demo, a StackBlitz run entry, and a YouTube tutorial video
Template Details
This template comes from prismicio-community, with the repository name nuxt-starter-prismic-farbe, positioned as a 3D eCommerce website starter. The tech stack is based on Nuxt and Vue, with content management via Prismic, 3D using TresJS, animations using GSAP, payments using Stripe, and styling using Tailwind CSS. The README provides an online demo, a StackBlitz online run entry, a YouTube tutorial video, and links to official documentation for each dependency.
For usage, the README gives the command to initialize a project from the GitHub template via nuxi, after which you can run @slicemachine/init to create your own Prismic repository instance to manage content. Dependency installation, the development server (default http://localhost:3000), production build, and local preview all provide commands for the four package managers npm, pnpm, yarn, and bun. For deployment, the README points to Nuxt's deployment documentation and provides a one-click Vercel deploy button.
In terms of limitations, the template itself is a starter rather than a complete finished product: content needs to be configured in Prismic yourself, external services such as Stripe payments need separate integration and configuration, and the 3D scenes rely on the client-side rendering capabilities of TresJS and GSAP. The code uses the Apache-2.0 license, allowing free use, modification, commercial use, and distribution, but third-party assets such as demo images, fonts, and icons need to be checked separately under their respective licenses.
NuxtVueE-commerceStarter
Is it right for your project?
Use Cases
- Want to learn how to build a 3D eCommerce website with Nuxt and Prismic, following a YouTube course step by step
- Need to run and view the complete code of this template directly in StackBlitz
- Use this template as a starting point, replace Prismic content and Stripe configuration, and build your own eCommerce site
- Refer to how TresJS and GSAP are combined in a Nuxt project
Suitable For
- Developers familiar with Nuxt or Vue who want to learn Prismic content modeling
- eCommerce project prototypes that need 3D product display effects
- Learners who want to learn the complete eCommerce site building process through tutorial videos
- Teams that accept configuring their own Prismic repository and external services such as Stripe
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Initialize the project with npx nuxi@latest init -t github:prismicio-community/nuxt-starter-prismic-farbe#HEAD farbe
- 2
After entering the project directory, run npx @slicemachine/init@latest to create and connect your own Prismic repository
- 3
Install dependencies with npm, pnpm, yarn, or bun; the development server runs at http://localhost:3000 by default
- 4
Production build and local preview use the build and preview scripts respectively
- 5
Stripe payments and Prismic content need to be configured yourself; third-party assets such as demo images need separate license checks
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the Apache-2.0 license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution are permitted; the Apache-2.0 license must be included when distributing.
- Modified files must prominently indicate changes and retain relevant copyright, patent, trademark, and attribution notices.
- If the original project includes a NOTICE file, applicable attribution notices must be retained when distributing derivative works.
- The license includes an applicable contributor patent grant; initiating patent litigation as described in the license terminates that patent grant, and no trademark use rights are granted.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Using this template requires creating and connecting your own Prismic repository instance (run @slicemachine/init); content management depends on the external Prismic service.
- Payment functionality depends on the external Stripe service; you need to register an account and configure API keys yourself, which may incur service fees.
- The deployment example points to Vercel; using that platform may require registering an account and is subject to its terms of service and fees.
- Demo images, fonts, icons, and other third-party assets need to be checked under their respective licenses; they cannot be judged solely by the code's Apache-2.0 license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
no-charge, royalty-free, irrevocable copyright license
Original License Text
To get your own Prismic repository instance and start managing your own content, also run:
Original README
[Stripe](https://docs.stripe.com/api?lang=node)
Original README
https://github.com/prismicio-community/nuxt-starter-prismic-farbe/blob/master/LICENSEhttps://github.com/prismicio-community/nuxt-starter-prismic-farbe/blob/master/README.md[][vercel-deploy]
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 86 / 100
- Technologies
- Nuxt · Vue
- Website type
- E-commerce · Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2025-10-03
- Screenshot last checked
- 2026-10-02
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Nuxt as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: bd330acd602db516a812bb985774878d46b8727776c8e7d47fae49ef59c93b81
2026-10-02T08:26:22.955Z
Source file / repository[][course-youtube] # Farbe.film - 3D eCommerce website - [Live demo][live-demo] - [Play on Stackblitz][stackblitz-demo] - [Learn how to build this website on YouTube][course-youtube] - Documentations: [Nuxt](https://nuxt.com), [Prismic](https://prismic.io/docs/nuxt), [TresJS](https://docs.tresjs.org), [GSAP](https://gsap.com/docs/v3), [Stripe](https://docs.stripe.com/api?lang=node), [Tailwind CSS](https://tailwindcss.com/docs/styling-with-utility-classes) [][vercel-deploy] ## Quick Start ```bash [Terminal] npx nuxi@latest init -t github:prismicio-community/nuxt-starter-prismic-farbe#HEAD farbe ``` To get your own Prismic repository instance and start managing your own content, also run: ```bash [Terminal] cd farbe npx @slicemachine/init@latest ``` ## Setup Make sure to install the dependencies: ```bash # npm npm install # pnpm pnpm install # yarn yarn install # bun bun install ``` ## Development Server Start the development server on `http://localhost:3000`: ```bash # npm npm run dev # pnpm pnpm run dev # yarn yarn dev # bun bun run dev ``` ## Production Build the application for production: ```bash # npm npm run build # pnpm pnpm run build # yarn yarn build # bun bun run build ``` Locally preview production build: ```bash # npm npm run preview # pnpm pnpm run preview # yarn yarn preview # bun bun run preview ``` Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. ## License ``` Copyright 2013-2025 Prismic <[email protected]> (https://prismic.io) Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ``` [live-demo]: https://nuxt-starter-prismic-farbe.vercel.app [stackblitz-demo]: https://stackblitz.com/github/prismicio-community/nuxt-starter-prismic-farbe [vercel-deploy]: https://vercel.com/new/clone?repository-name=farbe&repository-url=https%3A%2F%2Fgithub.com%2Fprismicio-community%2Fnuxt-starter-prismic-farbe&demo-image=https%3A%2F%2Fimages.prismic.io%2Ffarbe%2FaNF3Sp5xUNkB0-5F_screenshot-fullscreen.jpg&demo-url=https%3A%2F%2Fnuxt-starter-prismic-farbe.vercel.app%2F&demo-title=Nuxt%20Farbe%20%3A%203D%20eCommerce%20Template&demo-description=A%203D%20eCommerce%20website%20template%20powered%20by%20Nuxt%20and%20Prismic. [course-youtube]: https://www.youtube.com/watch?v=1ryWEqumhYI
Explore similar templates
Compare previews and descriptions within the same stack and category.
laravel-nuxt
A Laravel + Nuxt decoupled starter kit with built-in login, registration, email verification, password reset, and Socialite third-party login (GitHub example), switchable between SPA and SSR.
Nuxt · Starter
canvas
Canvas is a Nuxt-based portfolio template that uses Nuxt Content for content management and Nuxt UI with Tailwind CSS for pages.
Nuxt · Portfolio
nitrogen
Nitrogen is a Nuxt-based Shopify headless e-commerce template inspired by the Hydrogen starter theme.
Nuxt · E-commerce
nuxt3-starter
A Nuxt 3 starter template generated by nuxi, preconfigured with UnoCSS, unplugin-icons, Pinia, and VueUse. It suits developers who need a quick Nuxt 3 project skeleton with atomic CSS and auto-import workflows, and is available under the MIT license.
Nuxt · Starter
starter
The official Nuxt starter template for Nuxt UI, based on Nuxt and Vue. It provides a runnable project skeleton, an online demo, and Nuxt UI installation documentation, with README commands for creating, installing, developing, building, and previewing.
Nuxt · Starter
bloggrify
Bloggrify is a Nuxt layer that turns Markdown files into a blog site, built on Nuxt Content with preconfigured analytics, newsletter, comments, SEO, RSS, and content components.
Nuxt · Blog