A module that provides Volar types for auto-discovered components in Nuxt 2.
Nuxt 2, like Nuxt 3, auto-discovers components but unlike Nuxt 3, it doesn't automatically generate types for those components so Vue Language Tools (formerly Volar) is not able to type-check those unless they are explicitly imported (which defeats the purpose of auto-discovering). This module takes care of registering types for all auto-discovered components so that Volar is aware of those and can type-check them. Does that by generating a plain type definition file with extended types for GlobalComponents
interface.
- Install
volar-component-types
package:# Npm npm i -D volar-component-types # Yarn yarn add -D volar-component-types
- Add the module to
buildModules
innuxt.config.js
.export default { buildModules: [ 'volar-component-types/nuxt', ], }
- Set following options in
tsconfig.json
:{ // other options... "include": [ "./nuxt/types/components.d.ts", "./nuxt.config.ts", // Also make sure that all pages and components are included, for example: "./pages/**/*", "./components/**/*", // etc... ], "vueCompilerOptions": { "target": 2.7, "strictTemplates": true, } }
- Extend
types
array intsconfing.json
to augment Nuxt Config with module configuration types.{ "compilerOptions": { "types": [ "volar-component-types", ] } }
- Run
nuxt dev
.