# アプリケーション構成

すべての Vue アプリケーションは、そのアプリケーションの構成設定を含む config オブジェクトを公開します:

const app = createApp({})

console.log(app.config)

アプリケーションをマウントする前に、以下に列挙したプロパティを変更することができます。

# errorHandler

• 型: Function

• デフォルト: undefined

• 使用方法:

app.config.errorHandler = (err, vm, info) => {
  // エラーハンドリング
  // `info` は、Vue 固有のエラー情報です。例: ライフサイクルフック
  // エラーが見つかった際の処理
}

コンポーネントの Render 関数とウォッチャに捕捉されなかったエラーのハンドラを割り当てます。ハンドラには、アプリケーションのインスタンスとエラーが渡されて呼び出されます。

エラートラッキングサービスの Sentry (opens new window) ならびに Bugsnag (opens new window) は公式に連携のためのオプションを用意しています。

# warnHandler

• 型: Function

• デフォルト: undefined

• 使用方法:

app.config.warnHandler = function(msg, vm, trace) {
  // `trace` は、コンポーネント階層のトレースです。
}

Vue の warning のためのカスタムハンドラを割り当てます。開発環境でのみ動き、プロダクションでは動作しないことに注意してください。

# globalProperties

• 型: [key: string]: any

• デフォルト: undefined

• 使用方法:

app.config.globalProperties.foo = 'bar'

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})

アプリケーション内のあらゆるコンポーネントのインスタンスからアクセスできるグローバルなプロパティを追加します。名称が競合した場合、コンポーネントのプロパティが優先されます。

これは、 Vue 2.x における Vue.prototype 拡張を置き換えることができます:

// Before
Vue.prototype.$http = () => {}

// After
const app = createApp({})
app.config.globalProperties.$http = () => {}

# optionMergeStrategies

• 型: { [key: string]: Function }

• デフォルト: {}

• 使用方法:

const app = createApp({
  mounted() {
    console.log(this.$options.hello)
  }
})

app.config.optionMergeStrategies.hello = (parent, child) => {
  return `Hello, ${child}`
}

app.mixin({
  hello: 'Vue'
})

// 'Hello, Vue'

カスタムオプションのマージ戦略を定義します。

マージ戦略は、親インスタンスと子インスタンスで定義されたオプションの値をそれぞれ第 1 引数と第 2 引数として受け取ります。

• 参照: Custom Option Merging Strategies

# performance

• 型: boolean

• デフォルト: false

• 使用方法:

コンポーネントの初期化で true に設定することで、ブラウザの devtool 内の performance/timeline パネルにて、レンダリングおよびパッチにおけるパフォーマンスの追跡が可能となります。development モード並びにperformance.mark (opens new window) API が有効なブラウザでのみ機能します。

# compilerOptions 3.1+

• 型: Object

ランタイムコンパイラのオプションを設定します。このオブジェクトに設定された値は、ブラウザ内テンプレートコンパイラに渡され、設定されたアプリケーションのすべてのコンポーネントに影響を与えます。また、compilerOptions オプション を使って、コンポーネントごとにオプションを上書きすることもできます。

# compilerOptions.isCustomElement

• 型: (tag: string) => boolean

• デフォルト: undefined

• 使用方法:

// 'ion-' で始まる要素は、カスタム要素として認識されます
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')

Vue の外部で（例えば、Web Components API を使って）定義されたカスタム要素を認識する方法を指定します。コンポーネントがこの条件に一致した場合、ローカルまたはグローバルでの登録が必要なくなり、 Vue は Unknown custom element の警告を出しません。

この関数では、すべてのネイティブ HTML と SVG のタグについて一致させる必要はありません。 Vue パーサはこの確認を自動的に行います。

# compilerOptions.whitespace

• 型: 'condense' | 'preserve'

• デフォルト: 'condense'

• 使用方法:

app.config.compilerOptions.whitespace = 'preserve'

デフォルトで、Vue はより効率的なコンパイル出力を行うために、テンプレート要素間のホワイトスペースを削除・圧縮します:

1. 要素内の先頭・末尾のホワイトスペースが 1 つのスペースに圧縮されます
2. 改行を含む要素間のホワイトスペースが削除されます
3. テキストノード内の連続したホワイトスペースが 1 つのスペースに圧縮されます

値を 'preserve' に設定すると、 (2) と (3) が無効になります。

# compilerOptions.delimiters

• 型: Array<string>

• デフォルト: ['{{', '}}']

• 使用方法:

// デリミタを ES6 のテンプレートリテラルのスタイルに変更
app.config.compilerOptions.delimiters = ['${', '}']    

テンプレート内のテキスト補間に利用されるデリミタを設定します。

一般的には、 mustache 構文を利用しているサーバサイドフレームワークとの衝突を避けるために使われます。

# compilerOptions.comments

• 型: boolean

• デフォルト: false

• 使用方法:

app.config.compilerOptions.comments = true

デフォルトで、Vue は本番向けにテンプレート内の HTML コメントを削除します。このオプションを true に設定すると、本番向けでも Vue はコメントを残すようになります。開発中には常にコメントが残されます。

このオプションは一般的に、Vue が HTML コメントに依存する他のライブラリと一緒に利用される場合に使われます。

# isCustomElement deprecated

3.1.0 では非推奨です。代わりに compilerOptions.isCustomElement を使ってください。