Learn Nuxt, GSAP, Tailwind, and Prismic to build a dark, mordern, sleek website - Full Course 2025

🪁 Build a dark, modern, animated website with Nuxt, GSAP, Prismic, Tailwind, and TypeScript! In this in depth course we make a trendy, dark and modern website in the same style as Linear, AuthKit, Raycast, Clerk, and many more! You'll learn how to use Nuxt, the intuitive Vue framework, and the new feature coming with Nuxt 4. Prismic, a CMS that gives you a Headless Page Builder. We'll use GSAP to add wonderful animations to our site, both on page load and on scroll. We'll also use Tailwind CSS to style the super-polished website before we host it with ease on NuxtHub, a cloud hosting platform tailored for scaling Nuxt websites. We'll get bootstrapped with a minimal starter to set up Nuxt and Prismic for us, and I'll walk you through everything you need to know. At the end of this course you'll have built and deployed a great SaaS marketing website that you can put in your portfolio or customize for clients. --- 🔗 Course Resources: https://prismic.io/courses/nuxt-dark-... 🔗 Final repository: https://github.com/prismicio-communit... 🔗 Live Site: https://prismic-demo-glideai.nuxt.dev --- 📍 Chapters 00:00:00 : Intro 00:01:18 : Project overview : Glide.ai Motion 00:03:32 : Course resources and Figma walkthrough 00:06:48 : Getting started with Prismic and Nuxt 4 overview 00:10:34 : Setting up TailwindCSS 00:14:28 : Installing Nuxt Fonts 00:19:06 : Introduction to Slice Machine 00:20:44 : Our first custom type : Settings 00:26:07 : Adding Settings content on Prismic 00:42:21 : Creating our site header and footer 01:35:58 : Our first page type : Pages 01:41:05 : Introduction to slices : Hero slice 01:47:41 : Templating our Hero slice 02:50:42 : Pushing slices to Prismic and adding content 02:56:42 : Groups in slices with the Bento slice 03:00:27 : Templating our Bento slice 03:22:28 : Variations in slices with the Showcase slice 03:27:55 : Templating our Showcase slice 03:58:27 : Content relationships with the Case Studies slice 04:07:10 : Templating our Case Studies slice 04:51:09 : Animation withing slices with Integrations slice 05:09:34 : Templating our Integrations slice 05:10:41 : Let's add one more slice : the Call to Action slice 05:19:12 : Templating our Call to Action slice 05:29:12 : Polishing the Case Studies pages 05:30:24 : Adding content on Prismic 05:34:54 : Hosting our source code on GitHub 05:37:12 : Deploying our site with NuxtHub 05:44:27 : Outro - Congratulations!