# kdu-meta

> Manage HTML metadata in Kdu.js components with ssr support

Latest version **2.4.1** (published 2022-12-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install kdu-meta
pnpm add kdu-meta
yarn add kdu-meta
bun add kdu-meta
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.4.1 |
| Published | 2022-12-31 |
| First published | 2022-09-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 263.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | NKDuy |
| Maintainers | nkduy |
| Keywords | attribute, google, head, helmet, info, metadata, meta, seo, server, ssr, title, universal, kdu |

## Links

- npm: https://www.npmjs.com/package/kdu-meta
- Repository: https://github.com/dorayakijs/kdu-meta
- Issues: https://github.com/dorayakijs/kdu-meta/issues
- npm.io page: https://npm.io/package/kdu-meta

## Dependencies (1)

- [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2

## Recent versions

- 2.4.1 (latest) — 2022-12-31
- 3.0.0-alpha.10 (next) — 2023-11-27
- 2.4.0 — 2022-09-19

## README

# Kdu Meta

Manage HTML metadata in Kdu.js components with SSR support

```html
<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App',
      titleTemplate: '%s - Yay!',
      htmlAttrs: {
        lang: 'en',
        amp: true
      }
    }
  }
</script>
```
```html
<html lang="en" amp>
<head>
  <title>My Example App - Yay!</title>
  ...
</head>
```
# Introduction

Kdu Meta is a [Kdu.js](https://kdu-js.web.app) plugin that allows you to manage your app's metadata. It is inspired by and works similar as [`react-helmet`](https://github.com/nfl/react-helmet) for react. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the `metaInfo` property.

These properties, when set on a deeply nested component, will cleverly overwrite their parent components' `metaInfo`, thereby enabling custom info for each top-level view as well as coupling metadata directly to deeply nested subcomponents for more maintainable code.

## Installation

##### Yarn
```sh
$ yarn add kdu-meta
```

##### npm
```sh
$ npm install kdu-meta --save
```

##### Download / CDN

Use the download links below - if you want a previous version, check the instructions at https://unpkg.com.

Latest version: https://unpkg.com/kdu-meta/dist/kdu-meta.min.js

**Uncompressed:**
```html
<script src="https://unpkg.com/kdu-meta/dist/kdu-meta.js"></script>
```

**Minified:**
```html
<script src="https://unpkg.com/kdu-meta/dist/kdu-meta.min.js"></script>
```

## Quick Usage

```js
import Kdu from 'kdu'
import KduMeta from 'kdu-meta'

Kdu.use(KduMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})
```

## License

[MIT](./LICENSE.md)

---
_Source: https://npm.io/package/kdu-meta · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._