Vue3 compilerOptions 属性

Vue3 オプション API

Vue 3 では、compilerOptionscompilerOptions は、Vue のテンプレートコンパイラを設定するためのオブジェクトです。

テンプレートコンパイラは、Vue のテンプレート構文（たとえばv-bind、v-ifなど）を JavaScript コードに変換します。compilerOptionscompilerOptions によって、開発者はコンパイラの動作を制御できます。たとえば、スペースの処理方法、コメントを保持するかどうか、特定の最適化を有効にするかどうかなどです。

よくある compilerOptions 設定

1. whitespace

用途：テンプレート内の空白の処理方法を制御します。

選択可能な値：

• 'preserve'：すべての空白を保持します。
• 'condense'：余分な空白を圧縮します。
• 'collapse'：不要な空白をすべて削除します。

2. comments

用途：テンプレート内のコメントを保持するかどうかを制御します。

選択可能な値：

• true：コメントを保持します。
• false：コメントを削除します。

例

const app = createApp(App, {
  compilerOptions: {
    comments: false
  }
});


3. delimiters

用途：テンプレート内の補間記号をカスタマイズします。デフォルトでは、Vue は{{ }}を補間記号として使用します。

例

const app = createApp(App, {
  compilerOptions: {
    delimiters: ['${', '}']
  }
});


結果：テンプレート内では、使用できるのは${ expression }ではなく{{ expression }}。

4. isCustomElement

用途：どのタグが Vue コンポーネントではなくカスタム要素と見なされるかを指定します。

例

const app = createApp(App, {
  compilerOptions: {
    isCustomElement: tag => tag.startsWith('my-')
  }
});


結果：すべてのmy-で始まるタグはカスタム要素と見なされます。

---

compilerOptions の使い方

compilerOptions通常、Vue アプリを作成する際には、createAppメソッドの2番目の引数で設定します。以下は完全な例です：

例

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App, {
  compilerOptions: {
    whitespace: 'condense',
    comments: false,
    delimiters: ['${', '}'],
    isCustomElement: tag => tag.startsWith('my-')
  }
});

app.mount('#app');


---

Vue3 オプション API

その他の拡張