Vue.js 2

https://v2.vuejs.org/
Admin
Vue.js is a progressive JavaScript framework designed for building user interfaces, known for being...
Tokens:208,452
Snippets:1,888
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Example file structure for packaging

Source: https://v2.vuejs.org/v2/cookbook/packaging-sfc-for-npm

Shows the file structure assumed for the packaging examples: package.json, build/rollup.config.js, src/wrapper.js, src/my-component.vue, and dist/.

```text
package.json  
build/  
   rollup.config.js  
src/  
   wrapper.js  
   my-component.vue  
dist/  

```

--------------------------------

### Install Vue.js with Bower

Source: https://v2.vuejs.org/v2/guide/installation

Installs the latest stable version of Vue.js using Bower.

```bash
$ bower install vue
```

--------------------------------

### Install Vue 2 via npm

Source: https://v2.vuejs.org/v2/guide/installation

Install the latest stable version of Vue 2 using npm.

```bash
$ npm install vue@^2
```

--------------------------------

### Template for watcher example

Source: https://v2.vuejs.org/v2/guide/computed

HTML template for the watcher example. It binds the question input and displays the answer.

```html
<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
```

--------------------------------

### HTML example for virtual DOM

Source: https://v2.vuejs.org/v2/guide/render-function

Example HTML structure used to explain DOM nodes.

```html
<div>  
  <h1>My title</h1>  
  Some text content  
  <!-- TODO: Add tagline  -->  
</div>  
```

--------------------------------

### Install Vue CLI and Create a Project

Source: https://v2.vuejs.org/v2/guide/typescript

Install the Vue CLI globally and create a new project. When prompted, select "Manually select features" to enable TypeScript support.

```bash
npm install --global @vue/cli  

# 2. Create a new project, then choose the "Manually select features" option  
vue create my-project-name  
```

--------------------------------

### Vue.version - Check installed Vue version

Source: https://v2.vuejs.org/v2/api

Provides the installed version of Vue as a string. This example parses the major version and branches on it, useful for community plugins and components that need different strategies for different versions.

```javascript
var version = Number(Vue.version.split('.')[0])  
  
if (version === 2) {  
  // Vue v2.x.x  
} else if (version === 1) {  
  // Vue v1.x.x  
} else {  
  // Unsupported versions of Vue  
}
```

--------------------------------

### Vue instance for custom transition classes example

Source: https://v2.vuejs.org/v2/guide/transitions

JavaScript code for the Vue instance backing the custom transition classes example. It sets the initial show state to true.

```javascript
new Vue({  
  el: '#example-3',  
  data: {  
    show: true  
  }  
})  

```

--------------------------------

### Vue.use( plugin )

Source: https://v2.vuejs.org/v2/api

Installs a Vue.js plugin. The plugin must expose an install method or be a function itself.

```APIDOC
## Vue.use( plugin )

### Description
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. This method must be called before `new Vue()`. When called on the same plugin multiple times, the plugin will be installed only once.

### Arguments
- `{Object | Function} plugin` - The plugin to install.

### See Also
Plugins
```

--------------------------------

### Rendered HTML for named slots example

Source: https://v2.vuejs.org/v2/guide/components-slots

Shows the rendered HTML output for the previous named slots example, demonstrating how the default slot catches unmatched content.

```html
<div class="container">  
  <header>  
    <h1>Here might be a page title</h1>  
  </header>  
  <main>  
    <p>A paragraph for the main content.</p>  
    <p>And another one.</p>  
  </main>  
  <footer>  
    <p>Here's some contact info</p>  
  </footer>  
</div>  

```

--------------------------------

### Good: Base component names with 'App' prefix

Source: https://v2.vuejs.org/v2/style-guide

Shows component filenames starting with 'App' to indicate base components.

```text
components/  
|- AppButton.vue  
|- AppTable.vue  
|- AppIcon.vue  

```

--------------------------------

### beforeCreate

Source: https://v2.vuejs.org/v2/api

Called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup.

```APIDOC
## beforeCreate

### Description
Called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup.

### Type
`Function`

### Usage
Define as a component option. Do not use arrow functions because `this` will not be the Vue instance.

### See Also
- Lifecycle Diagram
```

--------------------------------

### Writing a plugin with install method

Source: https://v2.vuejs.org/v2/guide/plugins

A plugin exposes an install method that receives the Vue constructor and options. It can add global methods, directives, mixins, and instance methods.

```javascript
MyPlugin.install = function (Vue, options) {  
  // 1. add global method or property  
  Vue.myGlobalMethod = function () {  
    // some logic ...  
  }  
  
  // 2. add a global asset  
  Vue.directive('my-directive', {  
    bind (el, binding, vnode, oldVnode) {  
      // some logic ...  
    }  
    ...  
  })  
  
  // 3. inject some component options  
  Vue.mixin({  
    created: function () {  
      // some logic ...  
    }  
    ...  
  })  
  
  // 4. add an instance method  
  Vue.prototype.$myMethod = function (methodOptions) {  
    // some logic ...  
  }  
}  

```

--------------------------------

### Good: Base component names with 'Base' prefix

Source: https://v2.vuejs.org/v2/style-guide

Shows component filenames starting with 'Base' to indicate base components.

```text
components/  
|- BaseButton.vue  
|- BaseTable.vue  
|- BaseIcon.vue  

```

--------------------------------

### Initial data values for future properties

Source: https://v2.vuejs.org/v2/guide/instance

Provides an example of setting initial values for properties that will be needed later.

```javascript
data: {  
  newTodoText: '',  
  visitCount: 0,  
  hideCompletedTodos: false,  
  todos: [],  
  error: null  
}  
```

--------------------------------

### CSS Transition Example: Vue Instance

Source: https://v2.vuejs.org/v2/guide/transitions

Vue instance for the slide-fade transition example. Sets the initial data property 'show' to true.

```javascript
new Vue({  
  el: '#example-1',  
  data: {  
    show: true  
  }  
})  

```

--------------------------------

### Good: Component names with highest-level word first (duplicate)

Source: https://v2.vuejs.org/v2/style-guide

Shows the same good example as before, with components like 'SearchButtonClear.vue' and 'SettingsCheckboxTerms.vue', to contrast with the bad example.

```text
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
```

--------------------------------

### Good: Base component names with 'V' prefix

Source: https://v2.vuejs.org/v2/style-guide

Shows component filenames starting with 'V' to indicate base components.

```text
components/  
|- VButton.vue  
|- VTable.vue  
|- VIcon.vue  

```

--------------------------------

### Simple computed properties: Good example - split into simpler properties

Source: https://v2.vuejs.org/v2/style-guide

This example shows the recommended way to split a complex computed property into smaller, well-named computed properties for better testability and readability.

```javascript
computed: {  
  basePrice: function () {  
    return this.manufactureCost / (1 - this.profitMargin)  
  },  
  discount: function () {  
    return this.basePrice * (this.discountPercent || 0)  
  },  
  finalPrice: function () {  
    return this.basePrice - this.discount  
  }  
}  
```

--------------------------------

### Multi-attribute elements: Good example - multiple lines with one attribute per line

Source: https://v2.vuejs.org/v2/style-guide

This example shows the recommended way to write elements with multiple attributes, each on its own line for better readability.

```html
<img  
  src="https://vuejs.org/images/logo.png"  
  alt="Vue Logo"  
>  
```

```html
<MyComponent  
  foo="a"  
  bar="b"  
  baz="c"  
/>  
```

--------------------------------

### v-bind shorthand examples

Source: https://v2.vuejs.org/v2/guide/syntax

Shorthands for v-bind: full syntax, shorthand with colon, and shorthand with dynamic argument (2.6.0+).

```html
<!-- full syntax -->  
<a v-bind:href="url"> ... </a>  
  
<!-- shorthand -->  
<a :href="url"> ... </a>  
  
<!-- shorthand with dynamic argument (2.6.0+) -->  
<a :[key]="url"> ... </a>
```

--------------------------------

### v-on usage examples

Source: https://v2.vuejs.org/v2/api

Comprehensive v-on examples covering method handlers, dynamic events, inline statements, shorthand, modifiers (stop, prevent, capture, self, key, native, once, left, right, middle, passive), and object syntax. Note that object syntax does not support modifiers.

```html
<!-- method handler -->  
<button v-on:click="doThis"></button>  
  
<!-- dynamic event (2.6.0+) -->  
<button v-on:[event]="doThis"></button>  
  
<!-- inline statement -->  
<button v-on:click="doThat('hello', $event)"></button>  
  
<!-- shorthand -->  
<button @click="doThis"></button>  
  
<!-- shorthand dynamic event (2.6.0+) -->  
<button @[event]="doThis"></button>  
  
<!-- stop propagation -->  
<button @click.stop="doThis"></button>  
  
<!-- prevent default -->  
<button @click.prevent="doThis"></button>  
  
<!-- prevent default without expression -->  
<form @submit.prevent></form>  
  
<!-- chain modifiers -->  
<button @click.stop.prevent="doThis"></button>  
  
<!-- key modifier using keyAlias -->  
<input @keyup.enter="onEnter">  
  
<!-- key modifier using keyCode -->  
<input @keyup.13="onEnter">  
  
<!-- the click event will be triggered at most once -->  
<button v-on:click.once="doThis"></button>  
  
<!-- object syntax (2.4.0+) -->  
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>  

```

--------------------------------

### v-on shorthand examples

Source: https://v2.vuejs.org/v2/guide/syntax

Shorthands for v-on: full syntax, shorthand with @, and shorthand with dynamic argument (2.6.0+).

```html
<!-- full syntax -->  
<a v-on:click="doSomething"> ... </a>  
  
<!-- shorthand -->  
<a @click="doSomething"> ... </a>  
  
<!-- shorthand with dynamic argument (2.6.0+) -->  
<a @[event]="doSomething"> ... </a>
```

--------------------------------

### GoogleMapLoader.vue data initialization (real-world example)

Source: https://v2.vuejs.org/v2/cookbook/practical-use-of-scoped-slots

Data initialization for the GoogleMapLoader component, setting google and map to null.

```javascript
data() {  
  return {  
    google: null,  
    map: null  
  }  
},  

```

--------------------------------

### createElement return example

Source: https://v2.vuejs.org/v2/guide/render-function

Shows the basic usage of createElement to return a VNode for an h1 element with dynamic text.

```javascript
return createElement('h1', this.blogTitle)
```

--------------------------------

### package.json with main, module, unpkg, and browser fields

Source: https://v2.vuejs.org/v2/cookbook/packaging-sfc-for-npm

Sample package.json that specifies multiple entry points: main for legacy builds, module for modern bundlers, unpkg for CDN, and browser to map an alias to the .vue file. This is the minimum configuration for the discussion.

```json
{  
  "name": "my-component",  
  "version": "1.2.3",  
  "main": "dist/my-component.umd.js",  
  "module": "dist/my-component.esm.js",  
  "unpkg": "dist/my-component.min.js",  
  "browser": {  
    "./sfc": "src/my-component.vue"  
  },  
  ...  
}  

```

--------------------------------

### Instance properties and methods with $ prefix

Source: https://v2.vuejs.org/v2/guide/instance

Shows how to access instance properties like $data and $el, and use the $watch method.

```javascript
var data = { a: 1 }  
var vm = new Vue({  
  el: '#example',  
  data: data  
})  
  
vm.$data === data // => true  
vm.$el === document.getElementById('example') // => true  
  
// $watch is an instance method  
vm.$watch('a', function (newValue, oldValue) {  
  // This callback will be called when `vm.a` changes  
})  
```

--------------------------------

### Install ButterCMS with npm

Source: https://v2.vuejs.org/v2/cookbook/serverless-blog

Run this command in your terminal to install the ButterCMS package for your Vue.js project.

```bash
npm install buttercms --save  
```

--------------------------------

### Transition between multiple states with dynamic key and computed

Source: https://v2.vuejs.org/v2/guide/transitions

Alternative to the previous example using a single button with a dynamic key bound to docState and a computed property for the message.

```html
<transition>
  <button v-bind:key="docState">
    {{ buttonMessage }}
  </button>
</transition>
```

```javascript
// ...
computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case 'saved': return 'Edit'
      case 'edited': return 'Save'
      case 'editing': return 'Cancel'
    }
  }
}
```

--------------------------------

### vm.$watch keypath and function examples

Source: https://v2.vuejs.org/v2/api

Shows two forms of vm.$watch: watching a dot-delimited keypath and watching a function that returns a computed expression. The callback receives new and old values; for complex expressions use the function form.

```javascript
// keypath  
vm.$watch('a.b.c', function (newVal, oldVal) {  
  // do something  
})  
  
// function  
vm.$watch(  
  function () {  
    // every time the expression `this.a + this.b` yields a different result,  
    // the handler will be called. It's as if we were watching a computed  
    // property without defining the computed property itself  
    return this.a + this.b  
  },  
  function (newVal, oldVal) {  
    // do something  
  }  
)  
```

--------------------------------

### HTML template for Vue.nextTick example

Source: https://v2.vuejs.org/v2/guide/reactivity

This is the HTML element used in the Vue.nextTick example. It is the target element that will be updated when the data changes.

```html
<div id="example">{{ message }}</div>
```

--------------------------------

### Vue CLI serve command for development

Source: https://v2.vuejs.org/v2/cookbook/packaging-sfc-for-npm

Starts a development server with hot module reloading for a Vue SFC. Use this for development instead of the packaging build.

```bash
vue serve --open src/my-component.vue  
```

--------------------------------

### Removed `attached` hook example

Source: https://v2.vuejs.org/v2/guide/migration

The `attached` hook is removed in Vue 2.0. This example shows the old usage that needs to be replaced.

```javascript
attached: function () {  
  doSomething()  
}  

```

--------------------------------

### Axios GET request with error handling

Source: https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis

Performs an Axios GET request and logs any errors to the console using the catch method.

```javascript
axios  
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')  
  .then(response => (this.info = response.data.bpi))  
  .catch(error => console.log(error))
```

--------------------------------

### Example component tree for a todo app

Source: https://v2.vuejs.org/v2/guide/instance

Shows a possible component tree for a todo app, illustrating that Vue components are also Vue instances.

```text
Root Instance  
└─ TodoList  
   ├─ TodoItem  
   │  ├─ TodoButtonDelete  
   │  └─ TodoButtonEdit  
   └─ TodoListFooter  
      ├─ TodosButtonClear  
      └─ TodoListStatistics  
```

--------------------------------

### CSS Animation Example: Vue Instance

Source: https://v2.vuejs.org/v2/guide/transitions

Vue instance for the bounce animation example. Sets the initial data property 'show' to true.

```javascript
new Vue({  
  el: '#example-2',  
  data: {  
    show: true  
  }  
})  

```

--------------------------------

### GoogleMapLoader.vue template (real-world example)

Source: https://v2.vuejs.org/v2/cookbook/practical-use-of-scoped-slots

Template for the GoogleMapLoader component in the real-world example. It only contains a container div for the map, without the scoped slot.

```html
<template>  
  <div>  
    <div class="google-map" ref="googleMap"></div>  
  </div>  
</template>  

```

--------------------------------

### Good: Component styles with CSS modules

Source: https://v2.vuejs.org/v2/style-guide

Shows a good example using CSS modules to scope styles, with class names accessed via $style.

```html
<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- Using CSS modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
```

--------------------------------

### Template for watch vs computed example

Source: https://v2.vuejs.org/v2/guide/computed

HTML template for the watch and computed property comparison examples. It binds the fullName data property to the page.

```html
<div id="demo">{{ fullName }}</div>
```

--------------------------------

### created

Source: https://v2.vuejs.org/v2/api

Called synchronously after the instance is created. At this stage, data observation, computed properties, methods, and watch/event callbacks have been set up, but mounting has not started.

```APIDOC
## created

### Description
Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the `$el` property will not be available yet.

### Type
`Function`

### Usage
Define as a component option. Do not use arrow functions because `this` will not be the Vue instance.

### See Also
- Lifecycle Diagram
```

--------------------------------

### GoogleMapLoader.vue script props (real-world example)

Source: https://v2.vuejs.org/v2/cookbook/practical-use-of-scoped-slots

Script portion for the GoogleMapLoader component in the real-world example, showing the import and props definition for mapConfig and apiKey.

```javascript
import GoogleMapsApiLoader from 'google-maps-api-loader'  
  
export default {  
  props: {  
    mapConfig: Object,  
    apiKey: String,  
  },  

```

--------------------------------

### Directive shorthands: Bad example - mixing shorthands and full directives

Source: https://v2.vuejs.org/v2/style-guide

This example shows inconsistent use of directive shorthands, mixing v-bind: and :, v-on: and @, and v-slot: and #.

```html
<input  
  v-bind:value="newTodoText"  
  :placeholder="newTodoInstructions"  
>  
```

```html
<input  
  v-on:input="onInput"  
  @focus="onFocus"  
>  
```

```html
<template v-slot:header>  
  <h1>Here might be a page title</h1>  
</template>  
  
<template #footer>  
  <p>Here's some contact info</p>  
</template>  
```

--------------------------------

### extends option example

Source: https://v2.vuejs.org/v2/api

Demonstrates the extends option to declaratively extend another component without Vue.extend. The example uses placeholder ellipses for the component bodies.

```javascript
var CompA = { ... }  
  
// extend CompA without having to call `Vue.extend` on either  
var CompB = {  
  extends: CompA,  
  ...  
}  

```

--------------------------------

### Vue instance with transitionComplete method

Source: https://v2.vuejs.org/v2/api

Shows how to define a method that handles the `after-enter` event, receiving the DOM element as an argument, and mount the Vue instance to the `#transition-demo` element.

```javascript
new Vue({  
  ...  
  methods: {  
    transitionComplete: function (el) {  
      // for passed 'el' that DOM element as the argument, something ...  
    }  
  }  
  ...  
}).$mount('#transition-demo')  
```

--------------------------------

### Simple expressions in templates: Bad example - complex expression in template

Source: https://v2.vuejs.org/v2/style-guide

This example shows a complex expression directly in the template, which is not recommended because it makes templates less declarative.

```html
{{  
  fullName.split(' ').map(function (word) {  
    return word[0].toUpperCase() + word.slice(1)  
  }).join(' ')  
}}  
```

--------------------------------

### Custom transition classes with Animate.css

Source: https://v2.vuejs.org/v2/guide/transitions

HTML example using custom transition classes (enter-active-class, leave-active-class) to apply Animate.css animations. Requires the Animate.css stylesheet link.

```html
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">  

<div id="example-3">  
  <button @click="show = !show">  
    Toggle render  
  </button>  
  <transition  
    name="custom-classes-transition"  
    enter-active-class="animated tada"  
    leave-active-class="animated bounceOutRight"  
  >  
    <p v-if="show">hello</p>  
  </transition>  
</div>  

```

--------------------------------

### Good: Component styles with BEM convention

Source: https://v2.vuejs.org/v2/style-guide

Shows a good example using BEM class naming convention to scope styles, with prefixed class names.

```html
<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- Using the BEM convention -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>
```

--------------------------------

### Quoted attribute values: Bad example - unquoted or single-quoted attributes

Source: https://v2.vuejs.org/v2/style-guide

This example shows incorrect attribute value quoting: unquoted values and single quotes in JSX-like syntax.

```html
<input type=text>  
```

```html
<AppSidebar :style={width:sidebarWidth+'px'}>  
```

--------------------------------

### Simple computed properties: Bad example - complex computed property

Source: https://v2.vuejs.org/v2/style-guide

This example shows a complex computed property that calculates price in one function, which is harder to test and read.

```javascript
computed: {  
  price: function () {  
    var basePrice = this.manufactureCost / (1 - this.profitMargin)  
    return (  
      basePrice -  
      basePrice * (this.discountPercent || 0)  
    )  
  }  
}  
```

--------------------------------

### Manually mount a Vue instance with vm.$mount

Source: https://v2.vuejs.org/v2/api

Shows three ways to mount a Vue instance manually: with $mount('#app'), with the el option, or off-document and appended via native DOM API.

```javascript
var MyComponent = Vue.extend({  
  template: '<div>Hello!</div>'  
})  
  
// create and mount to #app (will replace #app)  
new MyComponent().$mount('#app')  
  
// the above is the same as:  
new MyComponent({ el: '#app' })  
  
// or, render off-document and append afterwards:  
var component = new MyComponent().$mount()  
document.getElementById('app').appendChild(component.$el)  
```

--------------------------------

### Simple expressions in templates: Good example - computed property

Source: https://v2.vuejs.org/v2/style-guide

This example shows the recommended approach: using a simple template expression and moving the complex logic into a computed property.

```html
<!-- In a template -->  
{{ normalizedFullName }}  
```

```javascript
// The complex expression has been moved to a computed property  
computed: {  
  normalizedFullName: function () {  
    return this.fullName.split(' ').map(function (word) {  
      return word[0].toUpperCase() + word.slice(1)  
    }).join(' ')  
  }  
}  
```

--------------------------------

### Good: Full-word component filenames

Source: https://v2.vuejs.org/v2/style-guide

Shows full-word component filenames, which are recommended for clarity.

```text
components/  
|- StudentDashboardSettings.vue  
|- UserProfileOptions.vue  
```

--------------------------------

### vm.$mount( [elementOrSelector] )

Source: https://v2.vuejs.org/v2/api

Manually start the mounting of an unmounted Vue instance. If no element or selector is provided, the template is rendered off-document.

```APIDOC
## vm.$mount( [elementOrSelector] )

### Description
Manually start the mounting of an unmounted Vue instance. If no element or selector is provided, the template is rendered off-document and you must insert it into the DOM yourself.

### Method
vm.$mount

### Arguments
- **elementOrSelector** (Element | string) - Optional - The DOM element or CSS selector to mount to.
- **hydrating** (boolean) - Optional - Whether to hydrate an existing DOM.

### Returns
- **vm** - The instance itself, allowing chaining.

### Example
```js
var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// create and mount to #app (will replace #app)
new MyComponent().$mount('#app')

// the above is the same as:
new MyComponent({ el: '#app' })

// or, render off-document and append afterwards:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)
```
```

--------------------------------

### Multi-attribute elements: Bad example - single line with multiple attributes

Source: https://v2.vuejs.org/v2/style-guide

This example shows the incorrect way to write elements with multiple attributes on a single line, which is harder to read.

```html
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">  
```

```html
<MyComponent foo="a" bar="b" baz="c"/>  
```

--------------------------------

### Bad: Base component names without prefix

Source: https://v2.vuejs.org/v2/style-guide

Shows component filenames that do not start with a base prefix like Base, App, or V.

```text
components/  
|- MyButton.vue  
|- VueTable.vue  
|- Icon.vue  

```

--------------------------------

### Prop name casing: Good example - camelCase declaration with kebab-case in template

Source: https://v2.vuejs.org/v2/style-guide

This example shows the recommended way to declare a prop using camelCase in the props object and use kebab-case in the template.

```javascript
props: {  
  greetingText: String  
}  
```

```html
<WelcomeMessage greeting-text="hi"/>  
```

--------------------------------

### Quoted attribute values: Good example - quoted attributes

Source: https://v2.vuejs.org/v2/style-guide

This example shows the recommended way to quote attribute values, using double quotes for HTML attributes and double quotes for the style binding.

```html
<input type="text">  
```

```html
<AppSidebar :style="{ width: sidebarWidth + 'px' }">  
```

--------------------------------

### Using a plugin with Vue.use()

Source: https://v2.vuejs.org/v2/guide/plugins

Call Vue.use(MyPlugin) before creating the root Vue instance. This invokes MyPlugin.install(Vue).

```javascript
// calls `MyPlugin.install(Vue)`  
Vue.use(MyPlugin)  
  
new Vue({  
  //... options  
})  

```

--------------------------------

### Example of a component-based app template

Source: https://v2.vuejs.org/v2/guide

An imaginary example of a large application's template structure using Vue components like app-nav, app-view, app-sidebar, and app-content to divide the app into manageable components.

```html
<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>
```

--------------------------------

### Good: Separate component files (JS)

Source: https://v2.vuejs.org/v2/style-guide

Shows a directory structure with each component in its own .js file.

```text
components/  
|- TodoList.js  
|- TodoItem.js  

```

--------------------------------

### Watcher example with axios and lodash

Source: https://v2.vuejs.org/v2/guide/computed

Full watcher example using axios and lodash. It debounces the question input and fetches a yes/no answer from the yesno.wtf API. Requires the CDN scripts for axios and lodash.

```html
<!-- Since there is already a rich ecosystem of ajax libraries    -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also   -->
<!-- gives you the freedom to use what you're familiar with.      -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // whenever question changes, this function will run
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // _.debounce is a function provided by lodash to limit how
    // often a particularly expensive operation can be run.
    // In this case, we want to limit how often we access
    // yesno.wtf/api, waiting until the user has completely
    // finished typing before making the ajax request. To learn
    // more about the _.debounce function (and its cousin
    // _.throttle), visit: https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})
</script>
```

--------------------------------

### Build Docker image

Source: https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app

Builds the Docker image with the tag vuejs-cookbook/dockerize-vuejs-app from the current directory.

```bash
docker build -t vuejs-cookbook/dockerize-vuejs-app .
```
Tokens:
Raw