Nuxt + Locomotive Scroll

Nuxt + Locomotive Scroll is a Nuxt.js starter template (boilerplate) that pre-configures Locomotive Scroll, GSAP, Tailwind CSS, LazySizes, PWA support, and a font loader for building parallax-rich, smooth-scrolling static websites. Created by Ivo Dolenc, the GitHub repository has 72 stars and a live demo at https://nuxt-locomotive.netlify.app.

What is Nuxt + Locomotive Scroll?

Nuxt + Locomotive Scroll is a Nuxt.js starter template for parallax effects and smooth scrolling experiences. It takes a fresh Nuxt project and outputs a static-ready application with multiple front-end modules already integrated. The template runs on the Nuxt.js framework and, after running the generate command, produces a dist/ directory ready for any static hosting service.

Key Features

• Locomotive Scroll — Smooth-scroll library with built-in parallax solutions, integrated as the core scrolling engine.
• GSAP module — Includes nuxt-gsap-module for professional-grade animation on the modern web.
• Tailwind CSS — Utility-first CSS framework pre-configured for rapid UI development.
• LazySizes — High-performance and SEO-friendly lazy loader for images via nuxt-lazysizes.
• PWA module — Zero-config PWA solution for Nuxt.js, enabling offline and installable web apps.
• Font Loader — Simple, modern, and lightweight font loader (nuxt-font-loader) for Nuxt projects.
• Static deployment — yarn generate builds a static dist/ folder; yarn start serves the production build.

Who should use Nuxt + Locomotive Scroll?

• Nuxt developers — Get a ready-made setup for smooth scrolling and parallax without wiring libraries manually.
• Front-end designers — Build marketing, portfolio, or product pages with scroll-driven animations and tailored typography.
• Static site creators — Leverage Nuxt's static generation with PWA and image lazy-loading already configured.

What can you do with Nuxt + Locomotive Scroll?

• Agency portfolios: Create parallax landing pages with GSAP animated sections and Locomotive Scroll's smooth scrolling.
• Marketing sites: Use Tailwind CSS and LazySizes together to build image-heavy pages that load quickly.
• PWA experiments: Ship an installable Nuxt app with offline support because the PWA module is included.

How does it work?

Clone the repository, install dependencies with Yarn or npm, and run yarn dev for local development. To produce a static site, run yarn generate, which outputs a dist/ folder, then yarn start to serve it for final testing before deployment.

FAQ

Is Nuxt + Locomotive Scroll free?

Yes, it is open source under the MIT License, and the underlying Locomotive Scroll library also uses the MIT License.

Which commands start the dev server?

Run yarn dev or npm run dev to start the local development server, as stated in the Build Setup section.

Can I deploy the output to any static host?

Yes, the static deployment process uses yarn generate to create a dist/ directory with all files needed for static hosting, and yarn start to serve the production version locally.

Does the template include PWA support?

Yes, the PWA module is pre-configured, providing zero-config PWA functionality for Nuxt.js applications.

Where is the live demo?

The live demo is hosted at https://nuxt-locomotive.netlify.app, linked directly in the README.