<commit_before>---
type: api
---

## Global Config

`Vue.config` is an object containing Vue's global configurations. You can modify its properties listed below before bootstrapping your application:

### debug

- **Type:** `Boolean`

- **Default:** `false`

- **Usage:**

  ``` js
  Vue.config.debug = true
  ```

  When in debug mode, Vue will:

  1. Print stack traces for all warnings.

  2. Make all anchor nodes visible in the DOM as Comment nodes. This makes it easier to inspect the structure of the rendered result.

  <p class="tip">Debug mode is only available in development build.</p>

### delimiters

- **Type:** `Array<String>`

- **Default:** `{% raw %}["{{", "}}"]{% endraw %}`

- **Usage:**

  ``` js
  // ES6 template string style
  Vue.config.delimiters = ['${', '}']
  ```

  Change the plain text interpolation delimiters.

### unsafeDelimiters

- **Type:** `Array<String>`

- **Default:** `{% raw %}["{{{", "}}}"]{% endraw %}`

- **Usage:**

  ``` js
  // make it look more dangerous
  Vue.config.delimiters = ['{!!', '!!}']
  ```

  Change the raw HTML interpolation delimiters.

### silent

- **Type:** `Boolean`

- **Default:** `false`

- **Usage:**

  ``` js
  Vue.config.silent = true
  ```

  Suppress all Vue.js logs and warnings.

### async

- **Type:** `Boolean`

- **Default:** `true`

- **Usage:**

  ``` js
  Vue.config.async = false
  ```

  When async mode is off, Vue will perform all DOM updates synchronously upon detecting data change. This may help with debugging in some scenarios, but could also cause degraded performance and affect the order in which watcher callbacks are called. **`async: false` is not recommended in production.**

## Global API

### Vue.extend( options )

- **Arguments:**
  - `{Object} options`

- **Usage:**

  Create a "subclass" of the base Vue constructor. The argument should be an object containing component options.

  The special cases to note here are `el` and `data` options - they must be functions when used with `Vue.extend()`.

  ``` html
  <div id="mount-point"></div>
  ```

  ``` js
  // create reusable constructor
  var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>'
  })
  // create an instance of Profile
  var profile = new Profile({
    data: {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }  
  })
  // mount it on an element
  profile.$mount('#mount-point')
  ```

  Will result in:

  ``` html
  <p><NAME> aka Heisenberg</p>
  ```

- **See also:** [Components](/guide/components.html)

### Vue.nextTick( callback )

- **Arguments:**
  - `{Functon} callback`

- **Usage:**

  Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update.

  ``` js
  // modify data
  vm.msg = 'Hello'
  // DOM not updated yet
  Vue.nextTick(function () {
    // DOM updated
  })
  ```

- **See also:** [Async Update Queue](/guide/reactivity.html#Async_Update_Queue)

### Vue.set( object, key, value )

- **Arguments:**
  - `{Object} object`
  - `{String} key`
  - `{*} value`

- **Usage:**

  Set a property on an object. If the object is reactive, ensure the property is created as a reactive property and trigger view updates. This is primarily used to get around the limitation that Vue cannot detect property additions.

- **See also:** [Reactivity in Depth](/guide/reactivity.html)

### Vue.delete( object, key )

- **Arguments:**
  - `{Object} object`
  - `{String} key`

- **Usage:**

  Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates. This is primarily used to get around the limitation that Vue cannot detect property deletions, but you should rarely need to use it.

- **See also:** [Reactivity in Depth](/guide/reactivity.html)

### Vue.directive( id, [definition] )

- **Arguments:**
  - `{String} id`
  - `{Function | Object} [definition]`

- **Usage:**
  
  Register or retrieve a global directive.

  ``` js
  // register
  Vue.directive('my-directive', {
    bind: function () {},
    update: function () {},
    unbind: function () {}
  })

  // register (simple function directive)
  Vue.directive('my-directive', function () {
    // this will be called as `update`
  })

  // getter, return the directive definition if registered
  var myDirective = Vue.directive('my-directive')
  ```

- **See also:** [Custom Directives](/guide/custom-directive.html)

### Vue.elementDirective( id, [definition] )

- **Arguments:**
  - `{String} id`
  - `{Object} [definition]`

- **Usage:**

  Register or retrieve a global element directive.

  ``` js
  // register
  Vue.elementDirective('my-element', {
    bind: function () {},
    // element directives do not use `update`
    unbind: function () {}
  })

  // getter, return the directive definition if registered
  var myDirective = Vue.elementDirective('my-element')
  ```

- **See also:** [Element Directives](/guide/custom-directive.html#Element_Directives)

### Vue.filter( id, [definition] )

- **Arguments:**
  - `{String} id`
  - `{Function | Object} [definition]`

- **Usage:**

  Register or retrieve a global filter.

  ``` js
  // register
  Vue.filter('my-filter', function (value) {
    // return processed value
  })

  // two way filter
  Vue.filter('my-filter', {
    read: function () {},
    write: function () {}
  })

  // getter, return the filter if registered
  var myFilter = Vue.filter('my-filter')
  ```

- **See also:** [Custom Filter](/guide/custom-filter.html)

### Vue.component( id, [definition] )

- **Arguments:**
  - `{String} id`
  - `{Function | Object} [definition]`

- **Usage:**

  Register or retrieve a global component.

  ``` js
  // register an extended constructor
  Vue.component('my-component', Vue.extend({ /* ... */}))

  // register an options object (automatically call Vue.extend)
  Vue.component('my-component', { /* ... */ })

  // retrive a registered component (always return constructor)
  var MyComponent = Vue.component('my-component')
  ```

- **See also:** [Components](/guide/components.html).

### Vue.transition( id, [hooks] )

- **Arguments:**
  - `{String} id`
  - `{Object} [hooks]`

- **Usage:**

  Register or retrieve a global transition hooks object.

  ``` js
  // register
  Vue.transition('fade', {
    enter: function () {},
    leave: function () {}
  })

  // retrieve registered hooks
  var fadeTransition = Vue.transition('fade')
  ```

- **See also:** [Transitions](/guide/transitions.html).

### Vue.partial( id, [partial] )

- **Arguments:**
  - `{String} id`
  - `{String} [partial]`

- **Usage:**

  Register or retrieve a global template partial string.

  ``` js
  // register
  Vue.partial('my-partial', '<div>Hi</div>')

  // retrieve registered partial
  var myPartial = Vue.partial('my-partial')
  ```

- **See also:** [Special Elements - &lt;partial&gt;](#partial).

### Vue.use( plugin, [options] )

- **Arguments:**
  - `{Object | Function} plugin`
  - `{Object} [options]`

- **Usage:**

  Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method. The install method will be called with Vue as the argument.

- **See also:** [Plugins](/guide/plugins.html).

### Vue.mixin( mixin )

- **Arguments:**
  - `{Object} mixin`

- **Usage:**

  Apply a mixin globally, which affects every Vue instance created afterwards. This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**.

- **See also:** [Global Mixins](/guide/mixins.html#Global_Mixin)

## Options / Data

### data

- **Type:** `Object | Function`

- **Restriction:** Only accepts `Function` when used in `Vue.extend()`.

- **Details:**

  The data object for the Vue instance. Vue.js will recursively convert its properties into getter/setters to make it "reactive". **The object must be plain**: native objects, existing getter/setters and prototype properties are ignored. It is not recommended to observe complex objects.

  Once the instance is created, the original data object can be accessed as `vm.$data`. The Vue instance also proxies all the properties found on the data object.

  Properties that start with `_` or `$` will **not** be proxied on the Vue instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`.

- **Example:**

  ``` js
  var data = { a: 1 }

  // direct instance creation
  var vm = new Vue({
    data: data
  })
  vm.a // -> 1
  vm.$data === data // -> true

  // must use function when in Vue.extend()
  var Component = Vue.extend({
    data: function () {
      return { a: 1 }
    }
  })
  ```

- **See also:** [Reactivity in Depth](/guide/reactivity.html).

### props

- **Type:** `Array | Object`

- **Details:**<commit_msg>Added an API note regarding extracting the source plain data object via JSON parse/stringify.<commit_after>---
type: api
---

## Global Config

`Vue.config` is an object containing Vue's global configurations. You can modify its properties listed below before bootstrapping your application:

### debug

- **Type:** `Boolean`

- **Default:** `false`

- **Usage:**

  ``` js
  Vue.config.debug = true
  ```

  When in debug mode, Vue will:

  1. Print stack traces for all warnings.

  2. Make all anchor nodes visible in the DOM as Comment nodes. This makes it easier to inspect the structure of the rendered result.

  <p class="tip">Debug mode is only available in development build.</p>

### delimiters

- **Type:** `Array<String>`

- **Default:** `{% raw %}["{{", "}}"]{% endraw %}`

- **Usage:**

  ``` js
  // ES6 template string style
  Vue.config.delimiters = ['${', '}']
  ```

  Change the plain text interpolation delimiters.

### unsafeDelimiters

- **Type:** `Array<String>`

- **Default:** `{% raw %}["{{{", "}}}"]{% endraw %}`

- **Usage:**

  ``` js
  // make it look more dangerous
  Vue.config.delimiters = ['{!!', '!!}']
  ```

  Change the raw HTML interpolation delimiters.

### silent

- **Type:** `Boolean`

- **Default:** `false`

- **Usage:**

  ``` js
  Vue.config.silent = true
  ```

  Suppress all Vue.js logs and warnings.

### async

- **Type:** `Boolean`

- **Default:** `true`

- **Usage:**

  ``` js
  Vue.config.async = false
  ```

  When async mode is off, Vue will perform all DOM updates synchronously upon detecting data change. This may help with debugging in some scenarios, but could also cause degraded performance and affect the order in which watcher callbacks are called. **`async: false` is not recommended in production.**

## Global API

### Vue.extend( options )

- **Arguments:**
  - `{Object} options`

- **Usage:**

  Create a "subclass" of the base Vue constructor. The argument should be an object containing component options.

  The special cases to note here are `el` and `data` options - they must be functions when used with `Vue.extend()`.

  ``` html
  <div id="mount-point"></div>
  ```

  ``` js
  // create reusable constructor
  var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>'
  })
  // create an instance of Profile
  var profile = new Profile({
    data: {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }  
  })
  // mount it on an element
  profile.$mount('#mount-point')
  ```

  Will result in:

  ``` html
  <p><NAME> aka Heisenberg</p>
  ```

- **See also:** [Components](/guide/components.html)

### Vue.nextTick( callback )

- **Arguments:**
  - `{Functon} callback`

- **Usage:**

  Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update.

  ``` js
  // modify data
  vm.msg = 'Hello'
  // DOM not updated yet
  Vue.nextTick(function () {
    // DOM updated
  })
  ```

- **See also:** [Async Update Queue](/guide/reactivity.html#Async_Update_Queue)

### Vue.set( object, key, value )

- **Arguments:**
  - `{Object} object`
  - `{String} key`
  - `{*} value`

- **Usage:**

  Set a property on an object. If the object is reactive, ensure the property is created as a reactive property and trigger view updates. This is primarily used to get around the limitation that Vue cannot detect property additions.

- **See also:** [Reactivity in Depth](/guide/reactivity.html)

### Vue.delete( object, key )

- **Arguments:**
  - `{Object} object`
  - `{String} key`

- **Usage:**

  Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates. This is primarily used to get around the limitation that Vue cannot detect property deletions, but you should rarely need to use it.

- **See also:** [Reactivity in Depth](/guide/reactivity.html)

### Vue.directive( id, [definition] )

- **Arguments:**
  - `{String} id`
  - `{Function | Object} [definition]`

- **Usage:**
  
  Register or retrieve a global directive.

  ``` js
  // register
  Vue.directive('my-directive', {
    bind: function () {},
    update: function () {},
    unbind: function () {}
  })

  // register (simple function directive)
  Vue.directive('my-directive', function () {
    // this will be called as `update`
  })

  // getter, return the directive definition if registered
  var myDirective = Vue.directive('my-directive')
  ```

- **See also:** [Custom Directives](/guide/custom-directive.html)

### Vue.elementDirective( id, [definition] )

- **Arguments:**
  - `{String} id`
  - `{Object} [definition]`

- **Usage:**

  Register or retrieve a global element directive.

  ``` js
  // register
  Vue.elementDirective('my-element', {
    bind: function () {},
    // element directives do not use `update`
    unbind: function () {}
  })

  // getter, return the directive definition if registered
  var myDirective = Vue.elementDirective('my-element')
  ```

- **See also:** [Element Directives](/guide/custom-directive.html#Element_Directives)

### Vue.filter( id, [definition] )

- **Arguments:**
  - `{String} id`
  - `{Function | Object} [definition]`

- **Usage:**

  Register or retrieve a global filter.

  ``` js
  // register
  Vue.filter('my-filter', function (value) {
    // return processed value
  })

  // two way filter
  Vue.filter('my-filter', {
    read: function () {},
    write: function () {}
  })

  // getter, return the filter if registered
  var myFilter = Vue.filter('my-filter')
  ```

- **See also:** [Custom Filter](/guide/custom-filter.html)

### Vue.component( id, [definition] )

- **Arguments:**
  - `{String} id`
  - `{Function | Object} [definition]`

- **Usage:**

  Register or retrieve a global component.

  ``` js
  // register an extended constructor
  Vue.component('my-component', Vue.extend({ /* ... */}))

  // register an options object (automatically call Vue.extend)
  Vue.component('my-component', { /* ... */ })

  // retrive a registered component (always return constructor)
  var MyComponent = Vue.component('my-component')
  ```

- **See also:** [Components](/guide/components.html).

### Vue.transition( id, [hooks] )

- **Arguments:**
  - `{String} id`
  - `{Object} [hooks]`

- **Usage:**

  Register or retrieve a global transition hooks object.

  ``` js
  // register
  Vue.transition('fade', {
    enter: function () {},
    leave: function () {}
  })

  // retrieve registered hooks
  var fadeTransition = Vue.transition('fade')
  ```

- **See also:** [Transitions](/guide/transitions.html).

### Vue.partial( id, [partial] )

- **Arguments:**
  - `{String} id`
  - `{String} [partial]`

- **Usage:**

  Register or retrieve a global template partial string.

  ``` js
  // register
  Vue.partial('my-partial', '<div>Hi</div>')

  // retrieve registered partial
  var myPartial = Vue.partial('my-partial')
  ```

- **See also:** [Special Elements - &lt;partial&gt;](#partial).

### Vue.use( plugin, [options] )

- **Arguments:**
  - `{Object | Function} plugin`
  - `{Object} [options]`

- **Usage:**

  Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method. The install method will be called with Vue as the argument.

- **See also:** [Plugins](/guide/plugins.html).

### Vue.mixin( mixin )

- **Arguments:**
  - `{Object} mixin`

- **Usage:**

  Apply a mixin globally, which affects every Vue instance created afterwards. This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**.

- **See also:** [Global Mixins](/guide/mixins.html#Global_Mixin)

## Options / Data

### data

- **Type:** `Object | Function`

- **Restriction:** Only accepts `Function` when used in `Vue.extend()`.

- **Details:**

  The data object for the Vue instance. Vue.js will recursively convert its properties into getter/setters to make it "reactive". **The object must be plain**: native objects, existing getter/setters and prototype properties are ignored. It is not recommended to observe complex objects.

  Once the instance is created, the data object can be accessed as `vm.$data`. The Vue instance also proxies all the properties found on the data object.

  Properties that start with `_` or `$` will **not** be proxied on the Vue instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`.

  If required, the original **plain** data object can be extracted by passing `vm.$data` through `JSON.parse(JSON.stringify(...))`. 

- **Example:**

  ``` js
  var data = { a: 1 }

  // direct instance creation
  var vm = new Vue({
    data: data
  })
  vm.a // -> 1
  vm.$data === data // -> true

  // must use function when in Vue.extend()
  var Component = Vue.extend({
    data: function () {
      return { a: 1 }
    }
  })
  ```

- **See also:** [Reactivity in Depth](/guide/reactivity.html).

### props

- **Type:** `Array | Object`

- **Details:**
{'fraction_non_alphanumeric': 0.16165935469539625, 'fraction_numerical': 0.000666407508191259, 'mean_word_length': 3.3050442266316042, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1306473', 'n_tokens_mistral': 5679, 'n_tokens_neox': 5459, 'n_words': 1906}