landingnuxt

Collection of components and sections specifically designed for creating landing pages with Nuxt 3 and Nuxt UI. Each element is optimized to fully leverage Nuxt's capabilities, enabling fast and efficient web interface development

cesswhite
32
2
Vue

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 v3, so make sure to install it for full functionality.

Table of Contents

  1. Features
  2. Requirements
  3. Installation
  4. Nuxt UI v3 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 v3, Nuxt Image, Nuxt Marquee, 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 v3
  • Nuxt Image
  • Nuxt Marquee
  • 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:

pnpm install

Installing Nuxt UI v3

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

Nuxt UI v3 Configuration

Nuxt UI v3 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 v3, you’ll need the following modules for full component functionality:

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.

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.

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.