Vue3 app.config.compilerOptions Property

Vue3 Global API

app.config.compilerOptionsIt is an important configuration option that allows developers to have fine-grained control over the compilation behavior of Vue applications.

app.config.compilerOptionsis an object used to configure compiler behavior in Vue 3. It belongs to the Vue application instance (app)'s configuration object (config), specifically used to control behavior during template compilation. By setting these options, developers can adjust Vue's compiler behavior to meet specific needs.

Common configuration options

The following areapp.config.compilerOptionssome commonly used configuration options in:

1. isCustomElement

• Purpose: Used to specify which elements should be treated as custom elements (rather than Vue components).
• Applicable scenario: When you use third-party custom elements (such as Web Components) in your template, you need to mark them as custom elements to prevent the Vue compiler from treating them as unknown Vue components.
• Example：

  Example

  app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('my-');
  
  The above code will treat all tags starting withmy-as custom elements.

2. whitespace

• Purpose: Controls how whitespace characters in templates are handled.
• Optional values：
  • 'preserve': Preserve all whitespace characters.
  • 'condense': Compress whitespace characters into a single space.
  • 'collapse': Remove all redundant whitespace characters.
• Example：

  Example

  app.config.compilerOptions.whitespace = 'condense';
  
  The above code will compress whitespace characters in the template into a single space.

3. delimiters

• Purpose: Modify the delimiters of interpolation expressions in templates.
• Default value：['{{', '}}']
• Applicable scenario: When you need to avoid syntax conflicts with other template engines (such as Django or Jinja2), you can modify the interpolation delimiters.
• Example：

  Example

  app.config.compilerOptions.delimiters = ['${', '}'];
  
  The above code will change the interpolation expressions from{{ }}to${ }。

4. comments

• Purpose: Controls whether HTML comments in templates are preserved.
• Default value：false(Do not preserve comments)
• Example：

  Example

  app.config.compilerOptions.comments = true;
  
  The above code will preserve HTML comments in the template.

How to use app.config.compilerOptions?

The following is a complete usage example that shows how to configureapp.config.compilerOptions：

In the above code:

• Treat all tags starting withmy-as custom elements.
• Compress whitespace characters in the template into a single space.
• Modify the delimiters of interpolation expressions to${ }。
• Preserve HTML comments in the template.

Notes

1. Only applies to template compilation：app.config.compilerOptionsOnly affects the compilation behavior of Vue templates and does not affect JavaScript code.
2. Modify delimiters with caution: When modifying the delimiters of interpolation expressions, ensure that there is no syntax conflict with other template engines or frameworks.
3. Compatibility of custom elements: When usingisCustomElementyou need to ensure that the definition and usage of custom elements are compatible with Vue.

Vue3 Global API