https://github.com/limbo-works/limbo.nuxt.longread
LongRead handler
https://github.com/limbo-works/limbo.nuxt.longread
nuxt pacakge release-please
Last synced: 2 months ago
JSON representation
LongRead handler
- Host: GitHub
- URL: https://github.com/limbo-works/limbo.nuxt.longread
- Owner: limbo-works
- Created: 2023-07-20T08:43:19.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2026-02-03T10:45:29.000Z (5 months ago)
- Last Synced: 2026-02-03T21:35:47.399Z (4 months ago)
- Topics: nuxt, pacakge, release-please
- Language: Vue
- Homepage:
- Size: 431 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Limbo Nuxt Long Read
Long-read table of contents components for Nuxt, with automatic active-section tracking and smooth anchor navigation.
## What this package provides
- `LongReadController`: gathers registered targets and exposes reactive TOC data via slot props.
- `LongReadTarget`: registers one content section in the controller.
- `LongReadTargetTocLink`: optional per-section link back to the TOC entry.
## Install
```bash
yarn add @limbo-works/long-read
```
## Nuxt setup
This package is consumed as a Nuxt layer.
```ts
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@limbo-works/long-read'],
});
```
After extending the layer, the components are available in templates.
## Quick example
```vue
Introduction
Details
```
## API
### LongReadController
Default slot props:
- `data.targets`: sorted list of registered targets.
- `data.activeTarget`: currently active target.
- `actions.scrollToTarget(target, { setHash = true })`.
- `actions.update()`: recalculates visibility state.
- `actions.setViewThreshold(threshold, { minPx = 0, maxPx = Infinity })`.
Behavior:
- Without `setViewThreshold`, the active target is picked from visibility.
- With `setViewThreshold`, the active target is the last section above the threshold line.
Target shape:
```ts
type LongReadTargetData = {
id: string;
tocItemId: string;
title: string;
visibility: number;
inViewport: boolean;
aboveViewport: boolean;
metaData: Record;
order: number[];
top?: number;
};
```
### LongReadTarget
Props:
- `containerId` (`container-id` in templates, required): element id for the section.
- `title` (required): TOC label.
- `disabled` (default `false`): skip registration.
- `metaData` (`meta-data`, default `{}`): custom per-target data.
- `linkToToc` (`link-to-toc`, default `false`): render a hidden jump link to the TOC item.
Important:
- `containerId` must match an existing DOM id on the section container.
- Targets with an empty title are ignored when picking active target.
### LongReadTargetTocLink
Used internally by `LongReadTarget` when `link-to-toc` is enabled.
- `config` accepts `boolean | string | object`.
- Object config supports: `name`, `url`, `setHash`, and `attrs`.
## Current status of composables
`composables/_useLongRead.js` is work in progress and not integrated with the component API yet. Treat it as internal/experimental for now.
## Development
```bash
yarn dev
```
This starts the local playground in `.playground`.
## Browser support
- Modern browsers with `IntersectionObserver`.
## License
MIT