template Type: String Details: A string template to be used as the markup for the Vue instance. By default, the template will replace the mounted element. When the replace option is set to false, the template will be inserted into the mounted element instead. In both cases, any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template. If the string starts with # it will be used as a querySelector and use the selected element’s

ready Type: Function Details: Called after compilation and the $el is inserted into the document for the first time, i.e. right after the first attached hook. Note this insertion must be executed via Vue (with methods like vm.$appendTo() or as a result of a directive update) to trigger the ready hook. See also: Lifecycle Diagram

slot Attributes: name Usage: <slot> elements serve as content distribution outlets in component templates. The slot element itself will be replaced. A slot with the name attribute is called a named slot. A named slot will distribute content with a slot attribute that matches its name. For detailed usage, see the guide section linked below. See also: Content Distribution with Slots

replace Type: Boolean Default: true Restriction: only respected if the template option is also present. Details: Determines whether to replace the element being mounted on with the template. If set to false, the template will overwrite the element’s inner content without replacing the element itself. If set to true, the template will overwrite the element and merge the element’s attributes with the attributes of the component’s root node. Example: <div id="replace" class="foo">&l

Writing a Plugin Plugins usually add global-level functionality to Vue. There is no strictly defined scope for a plugin - there are typically several types of plugins you can write: Add some global methods or properties. e.g. vue-element Add one or more global assets: directives/filters/transitions etc. e.g. vue-touch Add some Vue instance methods by attaching them to Vue.prototype. A library that provides an API of its own, while at the same time injecting some combination of the above

propsData 1.0.22+ Type: Object Restriction: only respected in instance creation via new. Details: Pass props to an instance during its creation. This is primarily intended to make unit testing easier. Example: var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } })

props Type: Array | Object Details: A list/hash of attributes that are exposed to accept data from the parent component. It has a simple Array-based syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values. Example: // simple syntax Vue.component('props-demo-simple', { props: ['size', 'myMessage'] }) // object syntax with validation Vue.component('props-demo-advanced', { props: { // just type chec

We’ve covered most of the basics - now it’s time to take a deep dive! One of Vue.js’ most distinct features is the unobtrusive reactive system - models are just plain JavaScript objects, modify it and the view updates. It makes state management very simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue.js’ reactivity system. How Changes Are Tracked When you pass a p

pluralize Arguments: {String} single, [double, triple, ...] Usage: Pluralizes the argument based on the filtered value. When there is exactly one argument, plural forms simply add an “s” at the end. When there are more than one argument, the arguments will be used as array of strings corresponding to the single, double, triple … forms of the word to be pluralized. When the number to be pluralized exceeds the length of the arguments, it will use the last entry in the array. Example: {{count

parent Type: Vue instance Details: Specify the parent instance for the instance to be created. Establishes a parent-child relationship between the two. The parent will be accessible as this.$parent for the child, and the child will be pushed into the parent’s $children array. See also: Parent-Child Communication