LandiNuxt

LandiNuxt offers pre-built, copy-paste components to help you create stunning landing pages in no time, fully integrated with the Nuxt ecosystem. Our components rely heavily on Nuxt UI v4, so make sure to install it for full functionality.

Table of Contents

1. Features
2. Requirements
3. Installation
4. Nuxt UI v4 Configuration
5. Additional Required Modules
6. Using the Components
7. Contributions
8. License

Features ✨

• Ready-to-use components in the Nuxt ecosystem
• Full compatibility with Nuxt UI v4, Nuxt Image, and Vue Use Motion
• Dark mode adaptability, optimized typography, and pre-styled components
• Expandable with future modules

Requirements

To ensure optimal functionality, make sure to install:

• Nuxt UI v4
• Nuxt Image
• Vue Use Motion

More modules and Nuxt libraries will be added in the future.

Installation

To get started, clone this repository and navigate to the project folder:

git clone https://github.com/cesswhite/landingnuxt.git
cd landingnuxt

Install the dependencies:

bun install

Installing Nuxt UI

LandiNuxt depends on Nuxt UI. Follow the setup instructions on the Nuxt UI official website.

Nuxt UI Configuration

Nuxt UI includes pre-configured settings for Color Mode, Fonts, and TailwindCSS. We recommend keeping these default configurations, as our components are optimized to work with them.

Font Configuration

Currently, our components use the following font families:

--font-family-inter: "Inter", sans-serif;
--font-family-lora: "Lora", serif;
--font-family-instrument: "Instrument Serif", serif;
--font-family-roboto: "Roboto", sans-serif;

For more details on theming, visit the Nuxt UI Theme Guide.

Additional Required Modules

In addition to Nuxt UI, you'll need the following modules for full component functionality:

• Nuxt Image: Installation Instructions
• Vue Use Motion: Setup Guide

Using the Components

Once everything is set up, you're ready to go! Just copy and paste the component code from LandiNuxt into your project, and you’re all set to create stunning landing pages with ease.

Rendering mode

The demo site runs as a client-side SPA (ssr: false in nuxt.config.ts). routeRules with prerender / isr still apply when you run nuxt generate or deploy a static build. Copy-paste components work the same in SSR or SPA Nuxt apps.

Development scripts

bun run verify:elements  # Ensures content/*.md counts match Elements/*.vue per category
bun run typecheck
bun run check            # verify + typecheck + build (same as GitHub Actions)

Contributions

Contributions are welcome! If you want to improve or add new features to LandiNuxt, feel free to open an issue or submit a pull request.

When adding a section, follow the contributor skill at .cursor/skills/add-landing-component/SKILL.md (category wiring, content/{n}.{category}/{N}.md, and self-contained .vue files). Run bun run verify:elements before opening a PR.

Acknowledgments

A big thank you to the Nuxt team and contributors for building such a powerful framework that inspired LandiNuxt.

Special thanks to Beto from Code with Beto for his invaluable support, testing and tips.

Thank you all for your contributions and support!

License

This project is licensed under the MIT License. See the LICENSE file for details.