Skip to content

Vue Compiler Options

Jump to bottom
山吹色御守 edited this page Mar 13, 2025 · 12 revisions

This option can be configured globally in the vueCompilerOptions field of the tsconfig.json file or locally using a special comment syntax at the root of an SFC. Example:

{
  "vueCompilerOptions": {
    "fallthroughAttributes": true,
    "strictTemplates": true
  }
}
<!-- @fallthroughAttributes true -->
<!-- @strictTemplates true -->

<script setup lang="ts">
...
</script>

target

  • Type: number
  • Default: 3.3

Specifies the Vue version. If not specified, the vue package version in the current workspace will be used.

lib

  • Type: string
  • Default: vue

Specifies the Vue package name.

extensions

  • Type: string[]
  • Default: [".vue"]

Specifies the file extensions to enable this extension for.

vitePressExtensions

  • Type: string[]

If a file's extension matches this option, it will be parsed as Markdown.

petiteVueExtensions

  • Type: string[]

If a file's extension matches this option, it will be parsed as HTML.

jsxSlots

  • Type: boolean
  • Default: false

Note

Documentation in progress…

strictTemplates

  • Type: boolean | object
  • Default: false

Enables strict templates. When set to true, all checkUnknown* options will be enabled.

strictVModel v3.0.0

  • Type: `boolean
  • Default: false

Strict type constraints of v-model. If not set, uses the 'strictTemplates' value.

checkUnknownProps v2.2.2

  • Type: boolean
  • Default: false

Check unknown props. If not set, uses the strictTemplates value.

checkUnknownEvents v2.2.2

  • Type: boolean
  • Default: false

Check unknown events. If not set, uses the strictTemplates value.

checkUnknownDirectives v2.2.2

  • Type: boolean
  • Default: false

Check unknown directives. If not set, uses the strictTemplates value.

checkUnknownComponents v2.2.2

  • Type: boolean
  • Default: false

Check unknown components. If not set, uses the strictTemplates value.

inferComponentDollarEl v2.2.4

  • Type: boolean
  • Default: false

Infer $el type on the component instance.

inferComponentDollarRefs v2.2.4

  • Type: boolean
  • Default: false

Infer $refs type on the component instance.

inferTemplateDollarAttrs v2.2.4

  • Type: boolean
  • Default: false

Infer $attrs type in the template and the return type of useAttrs.

inferTemplateDollarEl v2.2.4

  • Type: boolean
  • Default: false

Infer $el type in the template.

inferTemplateDollarRefs v2.2.4

  • Type: boolean
  • Default: false

Infer $refs type in the template.

inferTemplateDollarSlots v2.2.4

  • Type: boolean
  • Default: false

Infer $slots type in the template and the return type of useSlots.

skipTemplateCodegen

  • Type: boolean
  • Default: false

Skips codegen for templates. When enabled, all semantic features related to templates are disabled.

fallthroughAttributes v2.1.0

  • Type: boolean
  • Default: false

Type support for fallthrough attributes. When enabled, if a component always contains only one root node or uses v-bind="$attrs" on an element, it will attempt to capture all HTML attributes of those elements (or, if a component, it will recursively capture its props and possible fallthrough attributes) and apply them to its own props. For example:

<script setup lang="ts">
// main.vue
import Child from "./child.vue";
</script>

<template>
  <Child h| />
     <!-- ^ href -->
</template>
<script setup lang="ts">
//child.vue
</script>

<template>
  <a></a>
</template>

In this case, the completion will automatically include all available attributes of the a element without requiring the child component to manually specify which props to pass to the a element.

Warning

Since this option analyzes a large amount of types, it may significantly reduce the performance of VLS. Use with caution.

fallthroughComponentNames v2.2.4

  • Type: string[]
  • Default: ["Transition", "KeepAlive", "Teleport", "Suspense"]

Component names that will be transparent when collecting single root child nodes and fallthrough attributes.

dataAttributes

  • Type: string[]

Specifies a string pattern for attributes to be treated as data attributes, instructing VLS to skip type-checking for these attributes.

htmlAttributes

  • Type: string[]
  • Default: ["aria-*"]

Specifies a string pattern for attributes to be treated as HTML attributes, instructing VLS not to convert these attribute names to camelCase.

optionsWrapper

  • Type: [string, string]

Specifies how to wrap the exported object when using export default syntax. Default value:

target >= 2.7
  ? [`(await import('${lib}')).defineComponent(`, `)`]
  : [`(await import('${lib}')).default.extend(`, `)`]

macros

  • Type: Record<string, string[]>

Specifies macros exported from Vue and the identifiers that can trigger them, with the macro itself being the default. For example:

{
  "macros": {
    "defineProps": ["defineProps"]
  }
}

composables

  • Type: Record<string, string[]>

Specifies certain composables with special type support from VLS and the identifiers that can trigger them.

useAttrs v2.2.2

useCssModule v2.1.0

Provides type support with <style module="...">.

useSlots v2.2.0

useTemplateRef v2.1.0

Provides type support with <Comp ref="...">.

By default, templateRef can also trigger this composable, making it easier to provide a consistent development experience equivalent to useTemplateRef for users of lower versions using VueUse.

plugins

  • Type: string[]

Specifies file paths for VueLanguagePlugin objects.

experimentalDefinePropProposal

  • Type: "kevinEdition" | "johnsonEdition" | false
  • Default: false

See: Vue Macros

experimentalResolveStyleCssClasses

  • Type: "scoped" | "always" | "never"
  • Default: "scoped"

Specifies the resolution strategy for CSS class names in the <style> block. By default, only resolves when scoped is used, while also providing documentation links for class names in the template.

experimentalModelPropName

Note

Documentation in progress…

Clone this wiki locally