Header Module

The module components are based on TailwindCss and are created for the Nuxt 3 framework

🤯 I apologize for the general availability of this module, this project is used as an experimental one. In the future I will try to make it really necessary and useful. Once again, I apologize for the lost time to study this miracle.

• ✨  Release Notes
• 🏀 Online playground
• 📖  Documentation GitHub

Features

• ⛰  A simple header component for a website on next 3 with auto-import.
• 🚠  4 slots for connecting other components
• 🌲  Adaptive layout

Quick Setup

1. Add header-module dependency to your project

# Using pnpm
pnpm add -D header-module

# Using yarn
yarn add --dev header-module

# Using npm
npm install --save-dev header-module

2. Add header-module to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'header-module'
  ]
})

3. Connecting a component to a project

<header-component>
  <template #logo />
  <template #menu />
  <template #contacts />
  <template #burger />
</header-component>

Api for component:

props: {
  headerClasses: {
      type: String,
      default: "", 
      required: false
  }
}

That's it! You can now use My Module in your Nuxt app ✨

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release