sgx-nuxt-page-header v1.0.5

sgx-nuxt-page-header

Page header feature for Nuxt.

Setup

1. Install package:

npm install sgx-nuxt-page-header

2. Add package to modules in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['sgx-nuxt-page-header']
})

3. Add <SgxPageHeader> component to layout or app.vue:

<template>
  <div>
    <SgxPageHeader />
    <NuxtPage />
  </div>
</template>

Configuration

Type:

interface NuxtConfig {
  sgxPageHeader?: ModuleOptions
}

interface ModuleOptions {
  // Prefix for components and composables
  // Default: 'Sgx'
  prefix?: string
}

Usage:

Set module options to sgxPageHeader in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['sgx-nuxt-page-header'],
  sgxPageHeader: {
    // Module options...
  }
})

Page properties

Type:

interface PageMeta {
  // Base page title
  // Default: Generated from URL slug
  title?: string

  // Page header params
  pageHeader?: {
    // Page header title
    // Default: From base page title
    title?: string

    // Component visibility
    // Default: true
    visible?: boolean

    // Custom params
    [key: string]: unknown
  }
}

Usage:

Auto-title from URL slug if no params:

<script setup lang="ts">
definePageMeta({
  // Empty...
})
</script>

Base page title:

<script setup lang="ts">
definePageMeta({
  title: 'Posts'
})
</script>

Override base title:

<script setup lang="ts">
definePageMeta({
  title: 'Posts'
  pageHeader: {
    title: "List of posts"
  }
})
</script>

Custom params:

<script setup lang="ts">
definePageMeta({
  pageHeader: {
    myParam1: 'my-param-1',
    myParam2: 'my-param-2'
  }
})
</script>

Hide page header component:

<script setup lang="ts">
definePageMeta({
  pageHeader: {
    visible: false
  }
})
</script>

Override with dynamic data:

<script setup lang="ts">
definePageMeta({
  middleware: async (route) => {
    const data = await fetchData(route.params)

    // Base page title
    route.meta.title = data.title

    // Page header params
    route.meta.pageHeader = {
      ...route.meta.pageHeader,
      title: data.title
      // Other params...
    }
  }
})
</script>

Components

<SgxPageHeader>

Types:

interface Props {
  // Element
  // Default: 'h1'
  as?: string
}

interface Slot {
  // Page title
  title: string

  // Custom params
  [key: string]: unknown
}

Usage:

Basic usage:

<template>
  <SgxPageHeader />
</template>

Override component template:

<template>
  <SgxPageHeader v-slot="{ title, myParam1, myParam2 }" as="div">
    <h1>{{ title }}</h1>
    <p>{{ myParam1 }}</p>
    <p>{{ myParam2 }}</p>
  </SgxPageHeader>
</template>

Composables

useSgxPageHeader

Type:

interface Composable {
  (): ComputedRef<Result>
}

interface Result {
  // Page title
  title: string

  // Component visibility
  visible: boolean

  // Custom params
  [key: string]: unknown
}

Usage:

<template>
  <div v-if="pageHeader.visible">
    <h1>{{ pageHeader.title }}</h1>
    <p>{{ pageHeader.myParam1 }}</p>
    <p>{{ pageHeader.myParam2 }}</p>
  </div>
</template>

<script setup lang="ts">
const pageHeader = useSgxPageHeader()
</script>

Development

# Clone repository
git clone https://github.com/sergenux/sgx-nuxt-page-header.git

# Change directory
cd sgx-nuxt-page-header

# Install dependencies
npm install

# Prepare types
npm run dev:prepare

# Develop with playground
npm run dev

# Build playground
npm run dev:build

# Code checks
npm run typecheck
npm run lint
npm run lint:fix
npm run format
npm run format:fix