{"id":18122006,"url":"https://github.com/hanyujie2002/nuxt-toc","last_synced_at":"2025-04-14T20:20:48.947Z","repository":{"id":254070834,"uuid":"845396733","full_name":"hanyujie2002/nuxt-toc","owner":"hanyujie2002","description":"A nuxt.js module for Table of Contents (TOC)","archived":false,"fork":false,"pushed_at":"2024-10-18T13:44:00.000Z","size":2057,"stargazers_count":4,"open_issues_count":4,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T08:35:39.443Z","etag":null,"topics":["nuxt","table-of-contents","toc"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hanyujie2002.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-21T07:05:00.000Z","updated_at":"2025-02-13T16:49:42.000Z","dependencies_parsed_at":"2024-11-15T21:26:49.610Z","dependency_job_id":null,"html_url":"https://github.com/hanyujie2002/nuxt-toc","commit_stats":null,"previous_names":["hanyujie2002/nuxt-toc"],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanyujie2002%2Fnuxt-toc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanyujie2002%2Fnuxt-toc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanyujie2002%2Fnuxt-toc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanyujie2002%2Fnuxt-toc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hanyujie2002","download_url":"https://codeload.github.com/hanyujie2002/nuxt-toc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952345,"owners_count":21188427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","table-of-contents","toc"],"created_at":"2024-11-01T06:17:27.037Z","updated_at":"2025-04-14T20:20:48.923Z","avatar_url":"https://github.com/hanyujie2002.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"[中文](./README_zh.md)\n\n# nuxt-toc\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./logo.png\" alt=\"logo\" width=\"150\"\u003e\n\u003c/div\u003e\n\nA Nuxt module for table of contents (TOC) component in your Nuxt Content projects.\n\n\n\n- [✨  Release Notes](https://github.com/hanyujie2002/nuxt-toc/releases)\n\u003c!-- - 🏀 Online playground --\u003e\n\u003c!-- - 📖  Documentation --\u003e\n\n## Features ✨\n\n- 🎨 **Highly Customizable**: Tailor it to fit your unique needs.\n- 🔍 **Active TOC Highlighting**: Easily see which section you're in.\n- 📦 **Out of the Box**: Ready to use with minimal setup.\n- 🔗 **Section Links**: Navigate seamlessly within your content.\n- ♿ **ARIA Support**: Ensures accessibility for all users.\n- 🆓 **Free and Open Source (MIT License)**: Enjoy the freedom to use, modify, and distribute.\n\n## Quick Start 🔧\n\n1. Install the module to your Nuxt application:\n\n```bash\nnpx nuxi module add nuxt-toc\n```\n\n2. Add `\u003cTableOfContents /\u003e` at where you need the TOC.\n\n```vue\n\u003ctemplate\u003e\n    \u003cContentDoc /\u003e\n    \u003cTableOfContents /\u003e\n\u003c/template\u003e\n```\n\nYou can also pass in TOC yourself to prevent duplicate fetching.\n\n```vue\n\u003ctemplate\u003e\n    \u003cContentRenderer :value=\"data\" /\u003e\n    \u003cTableOfContents :toc=\"data.body.toc\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst route = useRoute()\n\nconst { data } = await useAsyncData('home', () =\u003e queryContent(route.path).findOne())\n\u003c/script\u003e\n```\n\n## Props\n\n| **Prop**           | **Type** | **Default** | **Description**                                                                                     |\n|--------------------|----------|-------------|-----------------------------------------------------------------------------------------------------|\n| `toc`                  | JSON | `null`              | Use the provided `toc` data. **If `toc` is passed in, this component will not fetch TOC info itself and `path` prop will be ignored**.|\n| `path`             | String   | `''`        | The path to the content for which the TOC is generated. **Defaults to using the current URI if not set**.                                    |\n| `isSublistShown`   | Boolean  | `true`      | Determines whether the sublist within the TOC is shown.                                             |\n| `isTitleShownWithNoContent` | Boolean  | `false`     | Determines whether the title is shown even if there is no content in the TOC.                                  |\n| `title`            | String   | `'Table of Contents'` | The title of the TOC.                                                                               |\n\n## Styling\n\n| **ID/Class**                | **Type** | **Description**                                                                                     |\n|-----------------------------|----------|-----------------------------------------------------------------------------------------------------|\n| `toc-container`             | ID       | The container for the table of contents (TOC).                                                      |\n| `toc-title`                 | ID       | The title of the table of contents.                                                                 |\n| `toc-item`                  | Class    | General class for TOC items.                                                                        |\n| `toc-topitem`               | Class    | Specific class for top-level TOC items.                                                             |\n| `active-toc-item`           | Class    | Applied to active TOC items.                                                                        |\n| `active-toc-topitem`        | Class    | Applied to active top-level TOC items.                                                              |\n| `toc-link`                  | Class    | General class for TOC links.                                                                        |\n| `toc-toplink`               | Class    | Specific class for top-level TOC links.                                                             |\n| `toc-sublist`               | Class    | Styles the sublist within the TOC.                                                                  |\n| `toc-subitem`               | Class    | Specific class for sub-level TOC items.                                                             |\n| `active-toc-subitem`        | Class    | Applied to active sub-level TOC items.                                                              |\n| `toc-sublink`               | Class    | Specific class for sub-level TOC links.                                                             |\n| `toc-item-${link.id}`       | ID       | Dynamically generated ID for each TOC item, based on the `link.id`.                                 |\n| `toc-topitem-and-sublist`   | Class    | Styles the top-level TOC items and their sublists.                                                  |\n\n\u003e [!NOTE]\n\u003e The default styling of the `\u003cTableOfContents /\u003e` component is:\n\u003e\n\u003e ```css\n\u003e .active-toc-item {\n\u003e   color: #fef08a;\n\u003e }\n\u003e\n\u003e .toc-sublist-item {\n\u003e   padding-left: 1rem;\n\u003e }\n\u003e\n\u003e a {\n\u003e   text-decoration: none;\n\u003e   color: inherit;\n\u003e }\n\u003e\n\u003e ul,\n\u003e ol {\n\u003e   list-style: none;\n\u003e   padding: 0;\n\u003e   margin: 0;\n\u003e }\n\u003e ```\n\u003e\n\u003e You can customize the style or reset it with:\n\u003e\n\u003e ```css\n\u003e .active-toc-item {\n\u003e   color: initial;\n\u003e }\n\u003e\n\u003e .toc-sublist-item {\n\u003e   padding-left: initial;\n\u003e }\n\u003e\n\u003e a {\n\u003e   text-decoration: underline;\n\u003e   color: initial;\n\u003e }\n\u003e\n\u003e ul,\n\u003e ol {\n\u003e   list-style: initial;\n\u003e   padding: initial;\n\u003e   margin: initial;\n\u003e }\n\u003e ```\n\n## Cookbook\n\n### Example One\n\nCustom color for active items and custom padding for subitems\n\n```vue\n\u003ctemplate\u003e\n    \u003cContentDoc /\u003e\n    \u003cTableOfContents /\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n/* Styling for active Table of Contents items */\n.active-toc-item {\n  color: #4ade80;\n}\n\n/* Indentation for second-level Table of Contents items */\n.toc-sublist-item {\n  padding-left: 1.5rem;\n}\n\u003c/style\u003e\n\n\u003c!-- Or with Tailwind CSS\n\u003cstyle\u003e\n.active-toc-item {\n  @apply text-green-300\n}\n\n.toc-sublist-item {\n  @apply pl-1.5\n}\n\u003c/style\u003e\n--\u003e\n```\n\nResult:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./screenshots/example.png\" alt=\"example\"\u003e\n\u003c/div\u003e\n\n### Example Two\n\nHaving a bar at left of each item\n\n```vue\n\u003ctemplate\u003e\n    \u003cContentDoc /\u003e\n    \u003cTableOfContents /\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n.toc-item {\n  border-left-width: 2px;\n  border-left-style: solid;\n  border-color: #e5e7eb;\n  padding-left: 0.25rem /* 4px */;\n}\n\n.active-toc-item {\n  color: #60a5fa;\n  border-color: #60a5fa;\n}\n\n.toc-sublist-item {\n  padding-left: 1rem;\n}\n\u003c/style\u003e\n\n\u003c!-- Or with Tailwind CSS\n\u003cstyle\u003e\n.toc-item {\n  @apply border-l-2 pl-1\n}\n\n.active-toc-item {\n  @apply text-blue-400 border-blue-400\n}\n\n.toc-sublist-item {\n  @apply pl-4\n}\n\u003c/style\u003e\n--\u003e\n```\n\nResult:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./screenshots/example1.png\" alt=\"example1\"\u003e\n\u003c/div\u003e\n\n### Example Three\n\nFirst level titles be active when any of it's second level titles be active.\n\n```vue\n\u003ctemplate\u003e\n    \u003cContentDoc /\u003e\n    \u003cTableOfContents /\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n/* Sublist item is contained in sub list, which is top item's sibling */\n.active-toc-item, .toc-topitem:has(+ .toc-sublist .active-toc-sublist-item) {\n  color: #60a5fa\n}\n\n.active-toc-sublist-item {\n  color: #4ade80\n}\n\n.toc-sublist-item {\n  padding-left: 1rem /* 16px */;\n}\n\u003c/style\u003e\n\n\u003c!-- Or with Tailwind CSS\n\u003cstyle\u003e\n.active-toc-item, .toc-topitem:has(+ .toc-sublist .active-toc-sublist-item) {\n  @apply text-blue-400\n}\n\n.active-toc-sublist-item {\n  @apply text-green-400\n}\n\n.toc-sublist-item {\n  @apply pl-4\n}\n\u003c/style\u003e\n--\u003e\n```\n\nResult:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./screenshots/example2.png\" alt=\"example2\"\u003e\n\u003c/div\u003e\n\n## License\n\nThis project is under [MIT](https://raw.githubusercontent.com/hanyujie2002/nuxt-toc/refs/heads/main/LICENSE) license.\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-toc/latest.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-version-href]: https://npmjs.com/package/nuxt-toc\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-toc.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-downloads-href]: https://npmjs.com/package/nuxt-toc\n\n[license-src]: https://img.shields.io/npm/l/nuxt-toc.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[license-href]: https://npmjs.com/package/nuxt-toc\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanyujie2002%2Fnuxt-toc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhanyujie2002%2Fnuxt-toc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanyujie2002%2Fnuxt-toc/lists"}