{"id":14263217,"url":"https://github.com/antfu/nuxt-content-twoslash","last_synced_at":"2025-04-05T13:03:59.166Z","repository":{"id":222125165,"uuid":"756377858","full_name":"antfu/nuxt-content-twoslash","owner":"antfu","description":"TwoSlash integrations for Nuxt Content","archived":false,"fork":false,"pushed_at":"2025-02-12T03:39:55.000Z","size":1482,"stargazers_count":50,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T12:03:59.204Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/antfu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["antfu"],"open_collective":"antfu"}},"created_at":"2024-02-12T14:52:58.000Z","updated_at":"2025-02-12T03:39:59.000Z","dependencies_parsed_at":"2025-02-18T02:02:07.060Z","dependency_job_id":"50a7f983-cc44-429a-9716-88f6784159a2","html_url":"https://github.com/antfu/nuxt-content-twoslash","commit_stats":null,"previous_names":["antfu/nuxt-content-twoslash"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antfu%2Fnuxt-content-twoslash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antfu%2Fnuxt-content-twoslash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antfu%2Fnuxt-content-twoslash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antfu%2Fnuxt-content-twoslash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antfu","download_url":"https://codeload.github.com/antfu/nuxt-content-twoslash/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339153,"owners_count":20923014,"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":[],"created_at":"2024-08-22T13:04:45.783Z","updated_at":"2025-04-05T13:03:59.148Z","avatar_url":"https://github.com/antfu.png","language":"TypeScript","funding_links":["https://github.com/sponsors/antfu","https://opencollective.com/antfu"],"categories":["others"],"sub_categories":[],"readme":"# nuxt-content-twoslash\n\n[TwoSlash](https://github.com/twoslashes/twoslash) integrations for Nuxt Content.\n\n## Installation\n\n1. Install the `nuxt-content-twoslash` module to your project:\n\n```bash\npnpm add nuxt-content-twoslash\n#\nyarn add nuxt-content-twoslash\n#\nnpm install nuxt-content-twoslash\n```\n\n2. Add it to your `modules` section in your `nuxt.config`, before `@nuxt/content`:\n\n```ts\n// nuxt.config.js\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-content-twoslash', // this needs to be before `@nuxt/content`\n    '@nuxt/content'\n  ],\n  content: {\n    // ...\n  },\n  twoslash: {\n    // ...\n  }\n})\n```\n\n## Usage\n\nTo start using Twoslash in your Nuxt Content markdown files, you will need to add `twoslash` within your markdown code block tag.\n\nTry out the below code snippet and watch the magic happen.\n\n````md\n```ts twoslash\nimport { ref } from 'vue'\n\nconst message = ref('Hello')\n```\n\n```vue twoslash\n\u003cscript setup\u003e\nimport { ref } from 'vue'\n// Reactive state.\nconst count = ref(0)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton\u003eCount is: {{ count }}\u003c/button\u003e\n\u003c/template\u003e\n```\n````\n\nFor more advanced usage, please see the [Twoslash Notations](https://twoslash.netlify.app/refs/notations).\n\n## How it works\n\n[Nuxt Content](https://github.com/nuxt/content) uses [Shiki](https://github.com/shikijs/shiki) under the hood via the [Nuxt MDC module](https://github.com/nuxt-modules/mdc). This module injects a Shiki transformer based on [`@shikijs/twoslash`](https://shiki.style/packages/twoslash) to leverage [Twoslash](https://github.com/twoslashes/twoslash) (which invokes a [TypeScript](https://www.typescriptlang.org/) server) to get the type information while also validating the type safety.\n\nWith Nuxt Content's cache mechanism, Twoslash will run only once at build time and pre-render phrase. The generated type information will be served as static content and shipped with your app. So there would be no runtime overhead.\n\n## Nuxt Specific Types\n\nBy default, this module will try to read the types generated by Nuxt and the `tsconfig.json` under `.nuxt` directory and inject them into TwoSlash context. Ideally this would make your code snippets works behave closer to your local dev environment.\n\nIf you don't want this behavior, you can disable it by setting `twoslash.injectNuxtTypes` to `false` in the module options.\n\n## CLI Usage\n\nThis module also provides a command-line interface to verify TwoSlash code snippets in your markdown files, where you can guard the type safety in continuous integration.\n\n```bash\nnpx nuxt-content-twoslash verify\n```\n\n\u003e [!TIP]\n\u003e An example usage is that in [nuxt/nuxt.com](https://github.com/nuxt/nuxt.com), we load the docs externally from [nuxt/nuxt](https://github.com/nuxt/nuxt) repository. This way it allows the docs to be closer to the source code and easier for contributors to update them in the same PR.\n\u003e To support that seperation while able to make sure code snippets in [nuxt/nuxt](https://github.com/nuxt/nuxt) are type safe, we use this CLI in the CI to [verify the code snippets](https://github.com/nuxt/nuxt/blob/7815aa534edb0e7dbf7a6c4d43dccc11acb408df/package.json#L33).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantfu%2Fnuxt-content-twoslash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantfu%2Fnuxt-content-twoslash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantfu%2Fnuxt-content-twoslash/lists"}