1.0.15 • Published 7 months ago
sgx-nuxt-title v1.0.15
sgx-nuxt-title
Auto-titles for Nuxt pages.
Setup
- Install package:
npm install sgx-nuxt-title
- Add package to
modules
innuxt.config.ts
:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['sgx-nuxt-title']
})
- Add
<SgxTitle>
component to layout orapp.vue
:
<template>
<div>
<SgxTitle />
<NuxtPage />
</div>
</template>
Configuration
Type:
interface NuxtConfig {
sgxTitle?: ModuleOptions
}
interface ModuleOptions {
// Prefix for components and composables
// Default: 'Sgx'
prefix?: string
}
Usage:
Set module options to sgxTitle
in nuxt.config.ts
:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['sgx-nuxt-title'],
sgxTitle: {
// Module options...
}
})
Page properties
Type:
interface PageMeta {
// Page title
// Default: Generated from URL slug
title?: string
}
Usage:
Override auto-title:
<script setup lang="ts">
definePageMeta({
title: 'My page title'
})
</script>
Override with dynamic data:
<script setup lang="ts">
definePageMeta({
middleware: async (route) => {
const data = await fetchData(route.params)
route.meta.title = data.title
}
})
</script>
Components
<SgxTitle>
Types:
interface Props {
// Element
// Default: 'h1'
as?: string
}
interface Slot {
// Page title
title?: string
}
Usage:
Basic usage:
<template>
<SgxTitle />
</template>
Override component template:
<template>
<SgxTitle v-slot="{ title }" as="div">
<h1>{{ title }}</h1>
</SgxTitle>
</template>
Composables
useSgxTitle
Type:
interface Composable {
(): ComputedRef<string>
}
Usage:
<template>
<h1>{{ title }}</h1>
</template>
<script setup lang="ts">
const title = useSgxTitle()
</script>
Example
Pages:
-| blog/
---| index.vue
---| post-1.vue
---| post-2.vue
---| post-3.vue
-| index.vue
Generated auto-titles:
/
- Home/blog
- Blog/blog/post-1
- Post 1/blog/post-2
- Post 2/blog/post-3
- Post 3
Development
# Clone repository
git clone https://github.com/sergenux/sgx-nuxt-title.git
# Change directory
cd sgx-nuxt-title
# 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