Wiki adjustments suggestions

[Anoesj]

(WIP) Here are some suggestions to make the Wiki about vueCompilerOptions a bit more understandable.

---

strictTemplates

• Type: boolean | object
• Default: false

Enables strict templates. When set to true, all checkUnknown* options will be enabled by default. These can be overridden individually by setting an explicit value for an option.

strictSlotChildren ^{v3.0.0 (experimental)}

• Type: boolean
• Default: if not explicitly set, this uses the strictTemplates option's value

Strict type constraints of slot children. Setting this option to true makes it possible to specify what type of children are allowed in a slot.

Warning

This feature is experimental, syntax may change. It is recommended not to apply the new defineSlots syntax on existing or new codebases while this feature is still experimental.
Follow or provide feedback in this discussion

strictVModel ^v3.0.0

• Type: boolean
• Default: if not explicitly set, this uses the strictTemplates option's value

Enables strict type constraints of v-model, requiring the variable passed to v-model to exactly match the type it expects to receive.

Example

ComponentWithModel.vue

<template>...</template>
<script setup lang="ts">
const model = defineModel<string | number>({
  required: true,
})
</script>

Home.vue

<template>
  <ComponentWithModel v-model="testValue" />
  <!--                         ^ Type 'string | number' is not assignable to type 'string'. -->
</template>

<script setup lang="ts">
const testValue = ref("Hello, World")
</script>

This can be prevented as follows:

ComponentWithModel.vue

<template>...</template>
<script setup lang="ts" generic="T extends string | number">
const model = defineModel<T>({
  required: true,
})
</script>

strictCssModules ^v3.0.0

• Type: boolean
• Default: false

Strict type checking of CSS modules.

checkUnknownProps ^v2.2.2

• Type: boolean
• Default: if not explicitly set, this uses the strictTemplates option's value

Check unknown props.

checkUnknownEvents ^v2.2.2

• Type: boolean
• Default: if not explicitly set, this uses the strictTemplates option's value

Check unknown events.

checkUnknownDirectives ^v2.2.2

• Type: boolean
• Default: if not explicitly set, this uses the strictTemplates option's value

Check unknown directives.

checkUnknownComponents ^v2.2.2

• Type: boolean
• Default: if not explicitly set, this uses the strictTemplates option's value

Check unknown components.

inferComponentDollarEl ^v2.2.4

• Type: boolean
• Default: false

Infer $el type on the component instance.

Details

When false, $el is always typed as any in the following scenarios:

// $el -> any
type TheComponentEl1 = InstanceType<typeof TheComponent>['$el']

// in template: <TheComponent ref="theComponentRef"/>
const theComponentRef = useTemplateRef('theComponentRef')
// $el -> any
type TheComponentEl2 = NonNullable<typeof theComponentRef.value>['$el']

When true, $el may be typed as the root element of the component (e.g. HTMLDivElement) in simple cases:

// $el -> HTMLDivElement
type TheComponentEl1 = InstanceType<typeof TheComponent>['$el']

// in template: <TheComponent ref="theComponentRef"/>
const theComponentRef = useTemplateRef('theComponentRef')
// $el -> HTMLDivElement
type TheComponentEl2 = NonNullable<typeof theComponentRef.value>['$el']

Caveats:

• Does not work with multiple root elements
• Does not work with conditional root elements
• Does not work when the root element is <component>
• Does not always work with components that make use of generics
• May not work with third-party components

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.