Global API

Vue.config

Vue.config is an object containing Vue’s global settings. Here are the list of all the avaiable settings with their default values:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
  // enable debug mode. see below for details.
  debug: true,
  // enable strict mode. see below for details.
  strict: false,
  // attribute prefix for directives
  prefix: 'v-',
  // interpolation delimiters
  // for HTML interpolations, add
  // 1 extra outer-most character.
  delimiters: ['{{', '}}'],
  // suppress warnings?
  silent: false,
  // interpolate mustache bindings?
  interpolate: true,
  // use async updates (for directives & watchers)?
  async: true,
  // allow altering observed Array's prototype chain?
  proto: true
}

You can modify them directly, for example:

1

Vue.config.debug = true // turn on debugging mode

Debug Mode

When Vue.config.debug is set to true, 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.

debug mode is not available in the minified production builds.

Strict Mode

By default, Vue components inherit all assets from both the class inheritance chain (via Vue.extend) AND their parents in the view hierarchy. In strict mode, components will only be able to inherit assets from the class inheritance chain, but NOT from their parents in the view hierarchy. When strict mode is enabled, assets should be either registered globally, or explicitly depended on by the component that needs them. When enforced, this could result in better component encapsulation and reusability in larger projects.

Changing Delimiters

When the delimiters are set for text interpolation, the delimiters for HTML interpolation will be generated by adding one outer-most symbol on both sides:

1
2
3

Vue.config.delimiters = ['(%', '%)']
// tags now are (% %) for text
// and ((% %)) for HTML

Vue.extend( options )

• options Object

Create a “subclass” of the base Vue constructor. All instantiation options can be used here. The special cases to note here are el and data, which must be functions in this case.

Internally, Vue.extend() is called on all component options before instantiating the components. For more details regarding components, see Component System.

Example

1

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 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:

1

<p>Walter White aka Heisenberg</p>

Vue.nextTick( callback )

• callback Function

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. For more details see Understanding Async Updates.

Vue.directive( id, [definition] )

• id String
• definition Function or Object optional

Register or retrieve a global custom directive. For more details see Writing Custom Directives.

Vue.elementDirective( id, [definition] )

• id String
• definition Function or Object optional

Register or retrieve a global custom element directive. For more details see Element Directives.

Vue.filter( id, [definition] )

• id String
• definition Function optional

Register or retrieve a global custom filter. For more details see Writing Custom Filters.

Vue.component( id, [definition] )

• id String
• definition Function Constructor or Object optional

Register or retrieve a global component. For more details see Component System.

Vue.transition( id, [definition] )

• id String
• definition Object optional

Register or retrieve a global JavaScript transition effect definition. For more details see the guide for JavaScript Transitions.

Vue.partial( id, [partial] )

• id String
• partial String optional

Register or retrieve a global template partial string. For more details see Partial.

Vue.use( plugin, [args…] )

• plugin Object or Function
• args… optional

Mount a Vue.js plugin. If the plugin is an Object, it must have 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. For more details, see Plugins.

Vue.mixin( mixin )

• mixin Object

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.

Vue.util

Exposes the internal util module, which contains a number of utility methods. This is intended for advanced plugin/directive authoring, so you will need to look at the source code to see what’s available.