---
title: "Type checking"
description: "Typed classes in the editor and in vue-tsc."
canonical_url: "https://vue-tailwind-block.netlify.app/guide/type-checking"
---
# Type checking

> Typed classes in the editor and in vue-tsc.

The editor and `vue-tsc` read the block directly to type the `classes`
object—no build step required.

## Setup

Setup is automatic in Nuxt via the module. In Vite projects, ensure the Volar
plugin is registered in your `tsconfig` as shown in
[Installation](https://vue-tailwind-block.netlify.app/getting-started/installation).

## Autocomplete & Hover

`classes` contains the exact keys defined in your block, and each leaf
property is typed as `string`.

- **Autocomplete**: Typing `classes.` in either `<template>` or `<script setup>`
immediately suggests all defined keys and groups.
- **Hover previews**: Every key is typed with a JSDoc tooltip containing the
exact compiled Tailwind classes.

For this block:

```yaml [Button.vue]
root: inline-flex items-center rounded-md
variants:
  solid: bg-sky-600 text-white hover:bg-sky-500
  outline: border border-zinc-300 hover:bg-zinc-50
```

<code-group>

```ts [Hover on classes]
const classes: {
  root: string
  variants: {
    solid: string
    outline: string
  }
}
```

```ts [Hover on classes.variants.solid]
(property) solid: string
// bg-sky-600 text-white hover:bg-sky-500
```

</code-group>

A key that is not in the block is a type error, in both the template and the
script. This includes any prop union used as a dynamic index:

```vue [Button.vue]
<script setup lang="ts">
const props = defineProps<{ variant: 'solid' | 'outline' | 'ghost' }>()
</script>

<template>
  <!-- error: 'ghost' is not a key of classes.variants -->
  <button :class="classes.variants[props.variant]" />
</template>
```

Index checking requires `strict` mode in `tsconfig`, which `create-vue` and
Nuxt enable by default.

## Diagnostics

Problems in the block are highlighted directly on the YAML:

- **YAML syntax errors** (such as duplicate keys or bad indentation) underline
the specific line.
- **Invalid values** (such as an empty key or unsupported scalar) underline the
block and name the path in the message.
- **Unsupported lang attributes** (anything other than `yaml` or `yml`)
underline the block.

While a block has errors, `classes` falls back to `any` so that diagnostics are
reported once on the block itself, rather than cascading as errors across every
template reference.

<note>

`classes` is strictly typed in `<script setup lang="ts">` components. In a
plain JavaScript component, it is typed as `any`.

</note>

## Troubleshooting

If `classes` is underlined as an unknown variable in your editor:

1. **Verify language**: Ensure the component has `<script setup lang="ts">`.
2. **Verify TSConfig**: Check that your `tsconfig` covers the `.vue` file and
includes `"plugins": [{ "name": "vue-tailwind-block/volar" }]`.
3. **Restart Language Server**: In VS Code, open the Command Palette
(`Cmd/Ctrl + Shift + P`) and run **Vue: Restart Vue Language Server** or
**Developer: Reload Window**.
4. **Nuxt**: Run `npx nuxi prepare` to regenerate `.nuxt/tsconfig.json`.

## CI

`vue-tsc` loads the same plugin, so the same errors fail CI builds:

```bash
pnpm vue-tsc --noEmit
```


## Sitemap

See the full [sitemap](https://vue-tailwind-block.netlify.app/sitemap.md) for all pages.