Vue.js 2

https://v2.vuejs.org/v2/
Admin
Vue.js is a progressive JavaScript framework for building user interfaces with reactive data binding...
Tokens:126,762
Snippets:1,338
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Define dynamic component logic

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

Example Vue instance setup for managing dynamic component switching.

```javascript
new Vue({  
  el: '#transition-components-demo',  
  data: {  
    view: 'v-a'  
  },  
  components: {  
    'v-a': {  
      template: '<div>Component A</div>'  
    },  
    'v-b': {  
      template: '<div>Component B</div>'  
    }  
  }  
})  
```

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

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

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

Manually start the mounting of an unmounted Vue instance.

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

### Description
If a Vue instance didn’t receive the el option at instantiation, it will be in an unmounted state. This method manually starts the mounting process.

### Parameters
- **elementOrSelector** (Element | string) - Optional - The DOM element or selector to mount to.
- **hydrating** (boolean) - Optional - Whether to perform hydration.

### Returns
- **vm** (Object) - The Vue instance itself.
```

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

### Template and CSS for dynamic directive example

Source: https://v2.vuejs.org/v2/guide/custom-directive

HTML structure and CSS styling for the pinned element example.

```html
<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[position]="200">I am pinned onto the page at 200px to the left.</p>
</div>
```

```css
#dynamicexample {
  height: 700px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  color: #304455;
}
```

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

### CSS Transition Example

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

Demonstrates a basic CSS transition using the transition component with custom class names.

```html
<div id="example-1">  
  <button @click="show = !show">  
    Toggle render  
  </button>  
  <transition name="slide-fade">  
    <p v-if="show">hello</p>  
  </transition>  
</div>  
```

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

```css
/* Enter and leave animations can use different */  
/* durations and timing functions.              */  
.slide-fade-enter-active {  
  transition: all .3s ease;  
}  
.slide-fade-leave-active {  
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);  
}  
.slide-fade-enter, .slide-fade-leave-to  
/* .slide-fade-leave-active below version 2.1.8 */ {  
  transform: translateX(10px);  
  opacity: 0;  
}  
```

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

### Vue.version

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

Provides the installed version of Vue as a string.

```APIDOC
## Vue.version

### Description
Provides the installed version of Vue as a string. This is useful for community plugins and components to handle version-specific strategies.
```

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

### Configure Parent Component Script

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

Setup the parent component with necessary imports and map configuration.

```javascript
<script>  
import GoogleMapLoader from './GoogleMapLoader'  
import { mapSettings } from '@/constants/mapSettings'  
  
export default {  
  components: {  
    GoogleMapLoader  
  },  
  
  computed: {  
    mapConfig () {  
      return {  
        ...mapSettings,  
        center: { lat: 0, lng: 0 }  
      }  
    },  
  },  
}  
</script>
```

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

### Vue.use(plugin)

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

Installs a Vue.js plugin. If the plugin is an Object, it must expose an install method; if it is a function, it is treated as the install method.

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

### Description
Install a Vue.js plugin. This method must be called before calling new Vue().

### Arguments
- **plugin** (Object | Function) - Required - The plugin to install.
```

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

### CSS Animation Example

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

Demonstrates using CSS keyframe animations with the transition component.

```html
<div id="example-2">  
  <button @click="show = !show">Toggle show</button>  
  <transition name="bounce">  
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>  
  </transition>  
</div>  
```

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

```css
.bounce-enter-active {  
  animation: bounce-in .5s;  
}  
.bounce-leave-active {  
  animation: bounce-in .5s reverse;  
}  
@keyframes bounce-in {  
  0% {  
    transform: scale(0);  
  }  
  50% {  
    transform: scale(1.5);  
  }  
  100% {  
    transform: scale(1);  
  }  
}  
```

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

### Real-World Component Example

Source: https://v2.vuejs.org/v2/cookbook/unit-testing-vue-components

A more complex component displaying a welcome message and a conditional error message for username validation.

```html
<template>  
  <div>  
    <div class="message">  
      {{ message }}  
    </div>  
    Enter your username: <input v-model="username">  
    <div  
      v-if="error"  
      class="error"  
    >  
      Please enter a username with at least seven letters.  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'Foo',  
  
  data () {  
    return {  
      message: 'Welcome to the Vue.js cookbook',  
      username: ''  
    }  
  },  
  
  computed: {  
    error () {  
      return this.username.trim().length < 7  
    }  
  }  
}  
</script>
```

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

### Define todo-item component and Vue instance

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

Component definition and Vue instance setup for the todo list example.

```javascript
Vue.component('todo-item', {  
  template: '\  
    <li>\  
      {{ title }}\  
      <button v-on:click="$emit(\'remove\')">Remove</button>\  
    </li>\  
  ',  
  props: ['title']  
})  
  
new Vue({  
  el: '#todo-list-example',  
  data: {  
    newTodoText: '',  
    todos: [  
      {  
        id: 1,  
        title: 'Do the dishes',  
      },  
      {  
        id: 2,  
        title: 'Take out the trash',  
      },  
      {  
        id: 3,  
        title: 'Mow the lawn'  
      }  
    ],  
    nextTodoId: 4  
  },  
  methods: {  
    addNewTodo: function () {  
      this.todos.push({  
        id: this.nextTodoId++,  
        title: this.newTodoText  
      })  
      this.newTodoText = ''  
    }  
  }  
})
```

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

### Implement a todo list with components

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

A complete example showing a todo list using v-for and component-based items.

```html
<div id="todo-list-example">  
  <form v-on:submit.prevent="addNewTodo">  
    <label for="new-todo">Add a todo</label>  
    <input  
      v-model="newTodoText"  
      id="new-todo"  
      placeholder="E.g. Feed the cat"  
    >  
    <button>Add</button>  
  </form>  
  <ul>  
    <li  
      is="todo-item"  
      v-for="(todo, index) in todos"  
      v-bind:key="todo.id"  
      v-bind:title="todo.title"  
      v-on:remove="todos.splice(index, 1)"  
    ></li>  
  </ul>  
</div>
```

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

### Using Base Components

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

Example of using a base component that forwards attributes to an internal input element.

```html
<base-input
  label="Username:"
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>
```

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

### Initialize Vue TypeScript Project

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

Commands to install the Vue CLI and generate a new project with manual feature selection to enable TypeScript support.

```bash
npm install --global @vue/cli
vue create my-project-name
```

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

### Registering a Vue Plugin

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

Use the Vue.use() global method to install a plugin. This must be executed before creating the Vue instance.

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

```javascript
Vue.use(MyPlugin, { someOption: true })
```

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

### Naming Base Components with Prefixes

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

Provides examples of naming base or presentational components using consistent prefixes like 'Base', 'App', or 'V' to improve discoverability and organization.

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

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

### Install Vue.js via NPM

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

This command installs the latest stable version of Vue.js (v2) using NPM. This is the recommended installation method for large-scale applications, especially when used with module bundlers like Webpack or Browserify.

```bash
# latest stable
$ npm install vue@^2
```

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

### Install ButterCMS

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

Install the ButterCMS package via npm.

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

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

### Base component template usage

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

Example of using base components within a template.

```html
<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>
```

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

### Initializing Reactive Properties

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

Shows how to define initial values for properties that might be added later to ensure they are reactive from the start. Properties not present initially are not reactive.

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

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

### Provide and Inject Basic Usage

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

Demonstrates the basic setup for providing a value in a parent component and injecting it into a child component.

```javascript
// parent component providing 'foo'  
var Provider = {  
  provide: {  
    foo: 'bar'  
  },  
  // ...  
}  
  
// child component injecting 'foo'  
var Child = {  
  inject: ['foo'],  
  created () {  
    console.log(this.foo) // => "bar"  
  }  
  // ...  
}  
```

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

### Local registration setup

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

Define components as plain objects and register them within the components option of a Vue instance.

```javascript
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
```

```javascript
new Vue({  
  el: '#app',  
  components: {  
    'component-a': ComponentA,  
    'component-b': ComponentB  
  }  
})
```

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

### Manual base component registration

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

Example of manually importing and registering multiple base components in a single component file.

```javascript
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
```

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

### Serve Vue CLI Application

Source: https://v2.vuejs.org/v2/cookbook/debugging-in-vscode

Start your Vue.js application using Vue CLI in the terminal to prepare for debugging.

```bash
npm run serve
```

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

### Demonstrating Slots vs Children

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

An example showing the structural difference between children and named slots in a functional component context.

```html
<my-functional-component>  
  <p v-slot:foo>  
    first  
  </p>  
  <p>second</p>  
</my-functional-component>
```

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

### Defining a Vue Plugin

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

Create a plugin by exposing an install method that receives the Vue constructor and optional configuration.

```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 ...  
  }  
}
```

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

### Global registration example

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

Globally registered components are available to any root Vue instance and its subcomponents.

```javascript
Vue.component('my-component-name', {  
  // ... options ...  
})
```

```javascript
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
  
new Vue({ el: '#app' })
```

```html
<div id="app">  
  <component-a></component-a>  
  <component-b></component-b>  
  <component-c></component-c>  
</div>
```

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

### Multi-Target Build Configuration in package.json

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

An example package.json configuration using Rollup to generate UMD, ESM, and IIFE builds in a single command, including necessary devDependencies.

```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"
  },
  "scripts": {
    "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/my-component.umd.js",
    "build:es": "rollup --config build/rollup.config.js --format es --file dist/my-component.esm.js",
    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/my-component.min.js"
  },
  "devDependencies": {
    "rollup": "^1.17.0",
    "@rollup/plugin-buble": "^0.21.3",
    "@rollup/plugin-commonjs": "^11.1.0",
    "rollup-plugin-vue": "^5.0.1",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10"
  }
}
```

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

### Full SVG Icon Component Implementation

Source: https://v2.vuejs.org/v2/cookbook/editable-svg-icons

A complete example including the HTML template, CSS styling, and Vue component registration.

```html
<div id="app">
  <p>Click me:</p>
  <animated-icon-scissors />
</div>

<script type="text/x-template" id="scissors">
  <svg @click="startScissors"
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 100 100"
    width="100" 
    height="100" 
    id="iconScissors"
    aria-labelledby="scissors"
    role="presentation"
    >
    <title id="scissors" lang="en">Scissors Animated Icon</title>
    <path id="bk" fill="#fff" d="M0 0h100v100H0z"/>
    <g ref="leftscissor">
      <path d="M57.6 47h-8.7v4.7H53l1.5 45h1.1a24.9 24.9 0 0 0 2-49.7zm1.5 45l-1.5-40.4a20.3 20.3 0 0 1 18.3 20.2c0 10.5-6.5 19.2-16.8 20.2z" fill="#30374b"/>
      <path d="M53.9 50.7l1.5 45.1h.2a24 24 0 0 0 1.9-47.9h-8v2.9zm3.8 0a21.1 21.1 0 0 1 19.1 21.1c0 11.4-7.2 20.1-17.6 21.1h-.9l-1.6-42.3z" fill="none"/>
      <path d="M75 71.8a19.3 19.3 0 0 0-16.5-19.2L60 91c8.9-1.3 15-9.1 15-19.2z" fill="none"/>
      <path d="M59.2 92.9c10.4-1 17.6-9.7 17.6-21.1a21.1 21.1 0 0 0-19.1-21.1h-1L58.3 93zM75 71.8c0 10.1-6.1 17.9-15 19.2l-1.5-38.4A19.3 19.3 0 0 1 75 71.8z" fill="#7f756b"/>
      <path d="M58.5 46.2V46h-9v1.8h8a24 24 0 0 1-1.9 47.9h-.2l-1.5-45h-4.4v1.8h2.7l1.5 45h1.9a25.8 25.8 0 0 0 2.9-51.4z" fill="#7f756b"/>
      <path fill="#a2a1a2" d="M54.6 51.3l.6-49.1-9.6 49.1h9z"/>
      <path d="M55.5 52.1H44.6L54.3 2l1.8.2zm-8.8-1.7h7l.5-38.5z" fill="#7f756b"/>
    </g>
    <g ref="rightscissor">
      <path d="M42.3 46.9a24.9 24.9 0 0 0 0 49.8h1l1.6-45h4v-4.8zM38.8 92C28.5 91 22 82.3 22 71.8a20.3 20.3 0 0 1 18.3-20.2z" fill="#30374b"/>
      <path d="M18.3 71.8a24 24 0 0 0 24 24h.2L44 50.7h5.5v-2.9h-7.2a23.9 23.9 0 0 0-24 24zM39.6 93h-.9c-10.4-1-17.6-9.7-17.6-21.1a21.1 21.1 0 0 1 19.1-21.2h1z" fill="none"/>
      <path d="M22.9 71.8c0 10.1 6.1 17.9 15 19.2l1.5-38.4a19.3 19.3 0 0 0-16.5 19.2z" fill="none"/>
      <path d="M21.1 71.8c0 11.4 7.2 20.1 17.6 21.1h.9l1.6-42.4h-1a21.1 21.1 0 0 0-19.1 21.3zM37.9 91c-8.9-1.3-15-9.1-15-19.2a19.3 19.3 0 0 1 16.5-19.2z" fill="#7f756b"/>
      <path d="M44 50.7l-1.5 45.1h-.2a24 24 0 0 1 0-48h7.2V46h-7.2a25.8 25.8 0 0 0 0 51.6h1.9l1.5-45h3.8v-1.9z" fill="#7f756b"/>
      <path fill="#d3d9df" d="M43.2 51.3l-.6-49.1 9.5 49.1h-8.9z"/>
      <path d="M53.2 52.1H42.3l-.6-49.9 1.7-.2zm-9.1-1.7h7l-7.5-38.5z" fill="#7f756b"/>
    </g>
    <circle cx="48.6" cy="44.5" r="3.7" fill="#e5e8ec"/>
    <path d="M48.6 49.1a4.6 4.6 0 1 1 0-9.1 4.6 4.6 0 0 1 0 9.1zm0-7.4a2.8 2.8 0 0 0-2.8 2.8 2.7 2.7 0 0 0 2.8 2.8 2.8 2.8 0 0 0 2.8-2.8 2.9 2.9 0 0 0-2.8-2.8z" fill="#7f756b"/>
  </svg>
</script>
```

```css
#app {
  margin: 50px 0;
  color: #666;
  text-align: center;
}

#iconScissors {
  margin: 0 auto;
  display: table;
  cursor: pointer;
}
```

```javascript
Vue.component('AnimatedIconScissors', {
  template: '#scissors',
  methods: {
    startScissors() {
      this.scissorAnim(this.$refs.rightscissor, 30)
      this.scissorAnim(this.$refs.leftscissor, -30)
    },
    scissorAnim(el, rot) {
      TweenMax.to(el, 0.25, {
        rotation: rot,
        repeat: 3,
        yoyo: true,
        svgOrigin: '50 45',
        ease: Sine.easeInOut
      })
    }
  }
});
```

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

### Vue.js Directive Shorthands

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

Provides examples of the shorthand syntax for v-bind and v-on directives, including support for dynamic arguments.

```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>
```

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

### Create Simple Dockerfile for Vue.js

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

Defines a Dockerfile that installs dependencies, builds the Vue.js application, and serves it using a simple HTTP server. This is suitable for prototyping and local development.

```dockerfile
FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]
```

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

### Render Function Basic Usage

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

A simple example demonstrating how to render an H1 element with dynamic content using the createElement function.

```javascript
render: function (createElement) {
  return createElement('h1', this.blogTitle)
}
```

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

### Vue Component Wrapper for Auto-Installation

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

A wrapper script that exports a Vue component and provides an install function, allowing it to be registered automatically when loaded via a script tag or imported as a module.

```javascript
import component from './my-component.vue';

export function install(Vue) {
	if (install.installed) return;
	install.installed = true;
	Vue.component('MyComponent', component);
}

const plugin = {
	install,
};

let GlobalVue = null;
if (typeof window !== 'undefined') {
	GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
	GlobalVue = global.Vue;
}
if (GlobalVue) {
	GlobalVue.use(plugin);
}

export default component;
```

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

### Create Vue Instance

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

Demonstrates the basic syntax for creating a new Vue instance using the `Vue` constructor and passing an options object.

```javascript
var vm = new Vue({
  // options
})
```

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

### Using v-bind for Attribute and Prop Binding

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

Demonstrates dynamic attribute binding, shorthand syntax, class/style objects, and component prop passing.

```html
<!-- bind an attribute -->  
<img v-bind:src="imageSrc">  
  
<!-- dynamic attribute name (2.6.0+) -->  
<button v-bind:[key]="value"></button>  
  
<!-- shorthand -->  
<img :src="imageSrc">  
  
<!-- shorthand dynamic attribute name (2.6.0+) -->  
<button :[key]="value"></button>  
  
<!-- with inline string concatenation -->  
<img :src="'/path/to/images/' + fileName">  
  
<!-- class binding -->  
<div :class="{ red: isRed }"></div>  
<div :class="[classA, classB]"></div>  
<div :class="[classA, { classB: isB, classC: isC }]"></div>  
  
<!-- style binding -->  
<div :style="{ fontSize: size + 'px' }"></div>  
<div :style="[styleObjectA, styleObjectB]"></div>  
  
<!-- binding an object of attributes -->  
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>  
  
<!-- DOM attribute binding with prop modifier -->  
<div v-bind:text-content.prop="text"></div>  
  
<!-- prop binding. "prop" must be declared in my-component. -->  
<my-component :prop="someThing"></my-component>  
  
<!-- pass down parent props in common with a child component -->  
<child-component v-bind="$props"></child-component>  
  
<!-- XLink -->  
<svg><a :xlink:special="foo"></a></svg>  
```

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

### Axios GET Request with Basic Error Handling

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

Demonstrates a basic Axios GET request to fetch data and uses the .catch() method to log any errors encountered during the request. This is useful for simple error logging.

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

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

### Initialize Router with Vue Instance

Source: https://v2.vuejs.org/v2/guide/migration-vue-router

Replaces the deprecated router.start method by passing a router property directly to the Vue instance.

```javascript
router.start({  
  template: '<router-view></router-view>'  
}, '#app')
```

```javascript
new Vue({  
  el: '#app',  
  router: router,  
  template: '<router-view></router-view>'  
})
```

```javascript
new Vue({  
  el: '#app',  
  router: router,  
  render: h => h('router-view')  
})
```

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

### Vue Anchored Heading Component Example

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

A complete Vue.js component example demonstrating the use of createElement to render an anchored heading. It includes a helper function to extract text content for generating the heading ID and uses props for the heading level.

```javascript
var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

Vue.component('anchored-heading', {
  render: function (createElement) {
    var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^-|-$)/g, '')

    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
```

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

### Configure component data and imports

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

Sets up the component registration and data structures required for markers and lines.

```javascript
import { mapSettings } from '@/constants/mapSettings'  
  
export default {  
  components: {  
    GoogleMapLoader,  
    GoogleMapMarker,  
    GoogleMapLine  
  },  
  
  data () {  
    return {  
      markers: [  
      { id: 'a', position: { lat: 3, lng: 101 } },  
      { id: 'b', position: { lat: 5, lng: 99 } },  
      { id: 'c', position: { lat: 6, lng: 97 } },  
      ],  
      lines: [  
        { id: '1', path: [{ lat: 3, lng: 101 }, { lat: 5, lng: 99 }] },  
        { id: '2', path: [{ lat: 5, lng: 99 }, { lat: 6, lng: 97 }] }  
      ],  
    }  
  },  
  
  computed: {  
    mapConfig () {  
      return {  
        ...mapSettings,  
        center: this.mapCenter  
      }  
    },  
  
    mapCenter () {  
      return this.markers[1].position  
    }  
  },  
}  
```

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

### Component Template Definition

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

Example of a component template containing a default class attribute.

```html
<input type="date" class="form-control">
```

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

### Check Vue Version

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

Vue.version provides the installed version as a string, useful for conditional logic in plugins or components.

```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  
}
```

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

### Implement simple routing from scratch

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

Use a computed property to dynamically render components based on the current window location path.

```javascript
const NotFound = { template: '<p>Page not found</p>' }  
const Home = { template: '<p>home page</p>' }  
const About = { template: '<p>about page</p>' }  
  
const routes = {  
  '/': Home,  
  '/about': About  
}  
  
new Vue({  
  el: '#app',  
  data: {  
    currentRoute: window.location.pathname  
  },  
  computed: {  
    ViewComponent () {  
      return routes[this.currentRoute] || NotFound  
    }  
  },  
  render (h) { return h(this.ViewComponent) }  
})
```

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

### Mounting a Vue.extend subclass

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

Demonstrates creating a component subclass and mounting it to a DOM element.

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

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

```html
<p>Walter White aka Heisenberg</p>
```

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

### Using v-on Shorthand in Vue.js

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

Demonstrates the transition from the full v-on syntax to the shorthand '@' syntax. It also shows how to use dynamic event names with the shorthand notation.

```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>
```

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

### Incorrect data definition

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

An example of an invalid data definition that would cause shared state across component instances.

```javascript
data: {  
  count: 0  
}  
```

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

### Transition Between Elements

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

Demonstrates transitioning between elements using v-if/v-else and the importance of unique key attributes.

```html
<transition>  
  <table v-if="items.length > 0">  
    <!-- ... -->  
  </table>  
  <p v-else>Sorry, no items found.</p>  
</transition>  
```

```html
<transition>  
  <button v-if="isEditing" key="save">  
    Save  
  </button>  
  <button v-else key="edit">  
    Edit  
  </button>  
</transition>  
```

```html
<transition>  
  <button v-bind:key="isEditing">  
    {{ isEditing ? 'Save' : 'Edit' }}  
  </button>  
</transition>  
```

```html
<transition>  
  <button v-if="docState === 'saved'" key="saved">  
    Edit  
  </button>  
  <button v-if="docState === 'edited'" key="edited">  
    Save  
  </button>  
  <button v-if="docState === 'editing'" key="editing">  
    Cancel  
  </button>  
</transition>  
```

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

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

### Directive Modifiers

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

Modifiers are special postfixes denoted by a dot that provide special behavior to directives. For example, `.prevent` for `v-on`.

```APIDOC
## Directive Modifiers

### Description
Applies special behavior to directives using postfixes starting with a dot.

### Method
N/A (Template directive)

### Endpoint
N/A (Template directive)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<form v-on:submit.prevent="onSubmit"> ... </form>
```

### Response
#### Success Response (200)
N/A (DOM manipulation)

#### Response Example
N/A (DOM manipulation)
```

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

### Implement Icon Component Usage

Source: https://v2.vuejs.org/v2/cookbook/editable-svg-icons

Shows how to wrap specific icon paths within the base icon component.

```html
<icon-base icon-name="write"><icon-write /></icon-base>  
```

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

### vm.$on( event, callback )

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

Listen for a custom event on the current vm instance. Events can be triggered by vm.$emit.

```APIDOC
## vm.$on( event, callback )

### Description
Listen for a custom event on the current vm instance. The callback will receive all additional arguments passed into the event-triggering method.

### Parameters
- **event** (string | Array<string>) - Required - The event name or array of event names.
- **callback** (Function) - Required - The function to execute when the event is triggered.
```

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

### Vue.js Multiple Select Example

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

Shows how to use v-model with a multiple select element, binding the selected options to an array.

```html
<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
```

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

### Create Production-Ready Multi-Stage Dockerfile

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

Uses Docker multi-stage builds to separate the build environment from the production environment. The final image uses NGINX to serve the static files, optimizing for performance and image size.

```dockerfile
# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

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

### Access Key and Index in Object Iteration

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

Provides examples for accessing the property name (key) and the iteration index when looping over objects.

```html
<div v-for="(value, name) in object">  
  {{ name }}: {{ value }}  
</div>  
```

```html
<div v-for="(value, name, index) in object">  
  {{ index }}. {{ name }}: {{ value }}  
</div>  
```

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

### Standardize Single-File Component Structure

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

Consistent ordering of <script>, <template>, and <style> tags improves readability. It is recommended to place <style> tags last as they are optional in some configurations.

```html
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
```

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

### Define computed properties with getters and setters

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

Computed properties are cached based on reactive dependencies. This example demonstrates both read-only and read-write computed properties.

```javascript
var vm = new Vue({  
  data: { a: 1 },  
  computed: {  
    // get only  
    aDouble: function () {  
      return this.a * 2  
    },  
    // both get and set  
    aPlus: {  
      get: function () {  
        return this.a + 1  
      },  
      set: function (v) {  
        this.a = v - 1  
      }  
    }  
  }  
})  
vm.aPlus   // => 2  
vm.aPlus = 3  
vm.a       // => 2  
vm.aDouble // => 4  
```

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

### Accessing and Passing Slots

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

Provides examples for accessing static and scoped slots via $slots and $scopedSlots, and passing scoped slots to child components.

```javascript
render: function (createElement) {
  return createElement('div', [
    createElement('child', {
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}
```

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

### Configure Production Mode in Browserify

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

Use envify to set the environment variable and strip development code during bundling.

```bash
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js  
```

```javascript
// Use the envify custom module to specify environment variables  
var envify = require('envify/custom')  
  
browserify(browserifyOptions)  
  .transform(vueify)  
  .transform(  
    // Required in order to process node_modules files  
    { global: true },  
    envify({ NODE_ENV: 'production' })  
  )  
  .bundle()  
```

```javascript
// Use the envify custom module to specify environment variables  
var envify = require('envify/custom')  
  
browserify: {  
  dist: {  
    options: {  
      // Function to deviate from grunt-browserify's default order  
      configure: b => b  
        .transform('vueify')  
        .transform(  
          // Required in order to process node_modules files  
          { global: true },  
          envify({ NODE_ENV: 'production' })  
        )  
        .bundle()  
    }  
  }  
}  
```

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

### Build and Run Docker Containers

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

Commands to build a Docker image from a Dockerfile and execute it as a container. These commands map ports and manage container lifecycles.

```bash
docker build -t vuejs-cookbook/dockerize-vuejs-app .
docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app
```

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

### Migrate ready hook to mounted

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

The ready hook is replaced by mounted. To ensure elements are in-document, wrap logic in $nextTick.

```javascript
mounted: function () {
  this.$nextTick(function () {
    // code that assumes this.$el is in-document
  })
}
```

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

### Applying slot-scope to a Todo List Component

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

An example of using slot-scope with destructuring to render a list of todo items with conditional logic based on the todo object properties.

```html
<todo-list v-bind:todos="todos">  
  <template slot="todo" slot-scope="{ todo }">  
    <span v-if="todo.isComplete">✓</span>  
    {{ todo.text }}  
  </template>  
</todo-list>
```

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

### Vue.js Slot with Component Content

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

Demonstrates passing another Vue.js component as content to a slot. In this example, a `<font-awesome-icon>` component is used as the content for the slot within `<navigation-link>`.

```Vue
<navigation-link url="/profile">
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>
```

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

### Using Abbreviated Default Slot Syntax

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

Demonstrates how to use v-slot directly on a component when only the default slot is provided. This syntax is concise but cannot be mixed with named slots.

```html
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>
```

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

### Prevent Infinite Recursion in Components

Source: https://v2.vuejs.org/v2/guide/components-edge-cases

Provides an example of a component that causes a stack overflow error due to unconditional recursive invocation, highlighting the need for conditional rendering.

```javascript
name: 'stack-overflow',  
template: '<div><stack-overflow></stack-overflow></div>'
```

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

### Vue Instance Template vs Render Function

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

Demonstrates the difference between using the template compiler (Full build) and the render function (Runtime-only build). The render function is preferred for smaller bundle sizes.

```javascript
// this requires the compiler
new Vue({
  template: '<div>{{ hi }}</div>'
})

// this does not
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
```

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

### Initialize Vue Instance

Source: https://v2.vuejs.org/v2/cookbook/editable-svg-icons

Basic initialization of a Vue instance targeting an element with the ID 'app'.

```javascript
new Vue({
  el: '#app'
})
```

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

### Initialize a root Vue instance

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

Mounts the Vue instance to the DOM element with the specified ID.

```javascript
new Vue({ el: '#components-demo' })  
```

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

### Organizing Components into Separate Files

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

Illustrates the recommended project structure where each Vue component is contained within its own dedicated file for better maintainability.

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

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

### Vue.js Single Select Example

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

Demonstrates a single select dropdown using v-model. It binds the selected option to a data property and includes a disabled option for initial state.

```html
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
```

```javascript
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})
```

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

### Manage Loading State with Route Watcher

Source: https://v2.vuejs.org/v2/guide/migration-vue-router

Demonstrates manual loading state management using a watcher and an external data fetching library like axios.

```javascript
data: function () {  
  return {  
    posts: [],  
    isLoading: false,  
    fetchError: null  
  }  
},  
watch: {  
  '$route': function () {  
    var self = this  
    self.isLoading = true  
    self.fetchData().then(function () {  
      self.isLoading = false  
    })  
  }  
},  
methods: {  
  fetchData: function () {  
    var self = this  
    return axios.get('/api/posts')  
      .then(function (response) {  
        self.posts = response.data.posts  
      })  
      .catch(function (error) {  
        self.fetchError = error  
      })  
  }  
}  
```

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

### computed

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

Computed properties are cached based on their reactive dependencies and are used to perform complex logic on data. They can be defined as simple getter functions or objects with both get and set methods.

```APIDOC
## computed

### Description
Computed properties are mixed into the Vue instance. They are cached and only re-computed on reactive dependency changes.

### Type
`{ [key: string]: Function | { get: Function, set: Function } }`

### Usage
```javascript
computed: {
  aDouble: function () {
    return this.a * 2
  },
  aPlus: {
    get: function () { return this.a + 1 },
    set: function (v) { this.a = v - 1 }
  }
}
```
```
Tokens:
Raw