# VuES6 - Use ES6 Classes to Define Vue.js Components
This is a small utility library that adds a mechanism for defining Vue components as ES6 templates, but in vanilla JavaScript, such that they don't have to be compiled ahead of time.
> Yes, `.vue` files provide this ability, but sometimes I don't want to set up an entire compiled repo for a small Vue.js project, but I still want Vue.js components in the form of classes. This allows ES6 classes to be turned into Vue components at runtime.
## Installation
Just include the `vues6.js` file as a module after Vue:
```html
```
## Usage
First, we need to define the components. This uses all the same parts as the normal object-literal format, just in the form of an ES6 class. Here's a very basic example component:
```javascript
import { Component } from './vues6.js'
const template = `
{{ message }} (Changes: {{ changes }})
{{ tagline }}
`
export default class HelloWorldComponent {
static get selector() { return 'hello-world' }
static get props() { return ['tagline'] }
static get template() { return template }
message = 'Hello World'
changes = 0
onClick() {
this.message += '!'
}
watch_message(new_message, old_message) {
this.changes += 1
}
}
```
There are a few important things to note here:
- The `static get selector()` defines the HTML selector used to implement the component (e.g. ``).
- Properties of the class are accessible in the template.
- Methods of the class are accessible in the template.
> **Important Note:** VuES6 uses `Object.getOwnPropertyNames` to determine the methods to bind to the Vue.js component. Thus, inherited methods are not supported at this time.
- Class methods beginning with `watch_` will not be made available as normal methods, but are instead watchers. In this example `watch_message()` defines a watcher on the `message` field.
- There is no `data()` function, however the Vue lifecycle functions can be hooked into by implementing the following methods on your class:
- `vue_on_create`
- `vue_on_update`
- `vue_on_mount`
- `vue_on_destroy`
This is the equivalent of writing this:
```javascript
Vue.component('hello-world', {
props: ['tagline'],
template: `