TwoSlash integrations for Nuxt Content.
npm install nuxt-content-twoslash
// nuxt.config.js
export default defineNuxtConfig({
modules: [
'nuxt-content-twoslash', // this needs to be before `@nuxt/content`
'@nuxt/content'
],
content: {
// ...
},
twoslash: {
// ...
}
})
Nuxt Content uses Shiki under the hood via the Nuxt MDC module. This module injects a Shiki transformer based on @shikijs/twoslash
to leverage Twoslash (which invokes a TypeScript server) to get the type information while also validating the type safety.
With 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.
By 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.
If you don't want this behavior, you can disable it by setting twoslash.injectNuxtTypes
to false
in the module options.
This 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.
npx nuxt-content-twoslash verify
Tip
An example usage is that in nuxt/nuxt.com, we load the docs externally from 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. To support that seperation while able to make sure code snippets in nuxt/nuxt are type safe, we use this CLI in the CI to verify the code snippets.