YouTipVue3 Api Compileroptions
# Vue3 compilerOptions Property
* * Vue3 Options API](#)
In Vue 3, `compilerOptions` is an object used to configure Vue's template compiler.
The template compiler is responsible for converting Vue's template syntax (such as `v-bind`, `v-if`, etc.) into JavaScript code. Through `compilerOptions`, developers can control the compiler's behavior, such as how to handle whitespace, whether to preserve comments, and whether to enable specific optimizations.
* * *
## Common compilerOptions Configuration
### 1. whitespace
**Purpose**: Controls how whitespace in templates is handled.
**Available Values**:
* `'preserve'`: Preserves all whitespace.
* `'condense'`: Condenses extra whitespace.
* `'collapse'`: Removes all unnecessary whitespace.
## Example
const app = createApp(App,{
compilerOptions:{
whitespace:'condense'
}
});
### 2. comments
**Purpose**: Controls whether to preserve comments in templates.
**Available Values**:
* `true`: Preserve comments.
* `false`: Remove comments.
## Example
const app = createApp(App,{
compilerOptions:{
comments:false
}
});
### 3. delimiters
**Purpose**: Customizes the interpolation delimiters in templates. By default, Vue uses `{{ }}` as interpolation delimiters.
## Example
const app = createApp(App,{
compilerOptions:{
delimiters:['${','}']
}
});
**Result**: In templates, you can use `${ expression }` instead of `{{ expression }}`.
### 4. isCustomElement
**Purpose**: Specifies which tags should be treated as custom elements rather than Vue components.
## Example
const app = c