Global Methods

Vue.extend( options )

• options Object

Create a subclass of the Vue class. Most instantiation options can be used here, with the exception of the el option because you can’t create multiple ViewModel instances on the same element. Also see Composing ViewModels.

Example

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

var Profile = Vue.extend({
    tagName: 'P',
    template: '{{firstName}} {{lastName}} aka {{alias}}'
})

var profile = new Profile({
    data: {
        firstName : 'Walter',
        lastName  : 'White',
        alias     : 'Heisenberg'
    }  
})

profile.$appendTo('body')

Will result in:

1

<p>Walter White aka Heisenberg</p>

Vue.config( options | key, [value] )

• options Object
• key String
• value * optional

Configure global settings. This function is overloaded:

1
2
3
4
5
6
7
8
9

// get the `debug` value
Vue.config('debug') // false
// set the `debug` value
Vue.config('debug', true)
// set multiple options
Vue.config({
    debug: true,
    prefix: 'my'
})

Here are all the options with their default values:

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

{
    // prefix for directives
    prefix: 'v',

    // log debug info
    debug: false,

    // suppress warnings
    silent: false,

    // CSS class attached for entering transition
    enterClass: 'v-enter',

    // CSS class attached for leaving transition
    leaveClass: 'v-leave',

    // Interpolate mustache bindings
    interpolate: true,

    // Interpolation delimiters
    // default value translates to {{ }} and {{{ }}}
    delimiters: ['{', '}']
}

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.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 Composing ViewModels.

Vue.effect( id, definition )

• id String
• definition Object optional

Register or retrieve a global JavaScript transition effect definition. For more details see Adding Transition Effects.

Vue.partial( id, definition )

• id String
• definition String or HTMLElement optional

Register or retrieve a global partial. The definition can be a template string, a querySelector that starts with #, or a DOM element (whose innerHTML will be used as the template string.)

Example

HTML

1
2
3

<div id="demo">
    &#123;&#123;> avatar&#125;&#125;
</div>

JavaScript

1
2
3
4
5
6
7
8

Vue.partial('avatar', '<img v-attr="src:avatarURL">')

new Vue({
    el: '#demo',
    data: {
        avatarURL: '/images/avatar.jpg'
    }    
})

Will result in:

1
2
3

<div id="demo">
    <img src="/images/avatar.jpg">
</div>

Vue.nextTick( callback )

• callback Function

Vue.js batches view updates and executes them all asynchronously. It uses requestAnimationFrame if available and falls back to setTimeout(fn, 0). This method calls the callback after the next view update, which can be useful when you want to wait until the view has been updated.

Vue.require( module )

• module String

Get access to Vue.js’ internal modules. This is intended for plugin authors and only the following modules are exposed:

• utils
• config
• transition
• observer.

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.