Vue3 compilerOptions Property
Vue3 Options APIIn Vue 3,compilerOptionsis an object used to configure Vue's template compiler.
The template compiler is responsible for converting Vue's template syntax (such asv-bind、v-ifetc.) into JavaScript code. ThroughcompilerOptionsdevelopers can control the behavior of the compiler, such as how to handle whitespace, whether to preserve comments, whether to enable specific optimizations, and so on.
Common compilerOptions configurations
1. whitespace
Purpose: Controls how whitespace in templates is handled.
Possible values：
'preserve': Preserve all whitespace.'condense': Compress extra whitespace.'collapse': Remove all unnecessary whitespace.
Example
compilerOptions: {
whitespace: 'condense'
}
});
2. comments
true: Preserve comments.false: Remove comments.
Purpose: Controls whether comments in templates are preserved.
Possible values：
Example
compilerOptions: {
comments: false
}
});
3. delimiters
Purpose: Customizes the interpolation delimiters in templates. By default, Vue uses{{ }}as the interpolation delimiters.
Example
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
compilerOptions: {
isCustomElement: tag => tag.startsWith('my-')
}
});
Result: All tagsmy-that start with the prefix will be treated as custom elements.
How to use compilerOptions?
compilerOptionsUsually, when creating a Vue application, viacreateAppthe second parameter of the method for configuration. The following is a complete example:
Example
import App from './App.vue';
const app = createApp(App, {
compilerOptions: {
whitespace: 'condense',
comments: false,
delimiters: ['${', '}'],
isCustomElement: tag => tag.startsWith('my-')
}
});
app.mount('#app');
Other extensions