📸 In this new course, we’ll build a fully featured eCommerce website bearing 3D design, animations, and complete checkout flow for Farbe, a fictional photographic film company.
We’ll craft the site from scratch with Nuxt 4 and learn how to leverage many of its features to develop a fully working platform for a small online brand, giving you a framework you can learn and reuse to serve real customers.
Thanks to Nuxt comprehensive module ecosystem, we’ll integrate best-in-class website building technologies like GSAP, Three.js, and Stripe in no time and learn how to use them with Vue.js.
All of our code will be in TypeScript so that we can progress with clarity and confidence. We’ll also use TailwindCSS for all of our styling, and head to Vercel to ship our finished website.
This course is perfect for developers who want to learn how to integrate and animate 3D models into their Nuxt websites. We’ll start from the basics and work up to learn TresJS, Vue’s Three.js implementation.
—
🔗 Course Resources: https://prismic.io/courses/farbe-film
🔗 Final repository: https://github.com/prismicio-community/nuxt-starter-prismic-farbe
🔗 Live Site: https://nuxt-starter-prismic-farbe.vercel.app
—
📍 Chapters:
00:00:00 – Intro – Farbe Nuxt 4 Course
00:01:46 – Project Rundown
00:06:02 – Course resources and Figma walkthrough
00:10:41 – Getting started with Prismic and Nuxt 4 overview
00:19:00 – Setting up TailwindCSS
00:25:19 – Installing Nuxt Fonts
00:30:22 – Introduction to Slice Machine
00:32:00 – Our first custom type : Settings
00:37:46 – Adding Settings content on Prismic
00:43:58 – Creating our site’s header and footer
01:31:43 – Our first page type : Pages
01:36:54 – Introduction to slices : Rich Text slice
01:42:24 – Templating our Rich Text slice
01:55:43 – Pushing slices to Prismic and adding content
02:01:21 – Slice variations with the Picture slice
02:04:54 – Grid layout for the Picture slice
02:18:50 – Authoring content with variations
02:21:43 – GSAP introduction and ScrollTrigger animations
02:39:58 – Tables and content relationships with the Product slice
02:47:22 – Templating tables for the Product slice
03:11:43 – Setting up Stripe for Ecommerce checkout
03:21:16 – Using Nuxt server to fetch data from Stripe
03:37:55 – Modeling a Cart slice
03:41:54 – Managing our cart state with a composable
03:57:26 – Creating checkout sessions with Stripe
04:20:18 – Making things 3D with Three.js and Tres
04:36:25 – Rendering a realistic scene : lights, shadows, and HDR
04:56:48 – Loading 3D models and controlling textures
05:20:27 – Responsive design and 3D : the maths
05:40:39 – Animating a 3D scene with GSAP
05:49:50 – Adding content using Prismic’s Page Builder
05:58:56 – GSAP scroll animations for 3D
06:31:09 – Hosting our source code on GitHub
06:33:07 – Deploying our site with Vercel
06:34:58 – Congratulations !
—
#nuxt #threejs
source
