README.md

Vuets

A Vue, TypeScript ready boilerplate using class-style components

Usage

# Download vue-cli and Vuets template
npm i -g vue-cli
vue init akiralaine/vuets <PROJECT_NAME>

# Install dependencies
cd <PROJECT_NAME>
yarn (or npm i)
yarn run dev (or npm run dev)

What's a class-style component?

Vuets uses vue-class-component to enable the following

<script lang='ts'>
import Vue from 'vue'
import Component from 'vue-class-component'
import Intro from './components/Intro'

@Component({
  components: {
    Intro
  }
})
export default class App extends Vue {
  // data
  appName : string = 'vuets'

  // lifecycle hooks
  mounted () {
    this.printToConsole()
  }

  // methods
  printToConsole () {
    console.log('Welcome to Vuets')
  }

  // computed
  get properName () {
    return `${this.appName[0].toUpperCase()}${this.appName.slice(1)}`
  }
}
</script>

What's different?

Data

Normal Syntax:

data () {
  return {
    foo: 'bar'
  }
}

Class syntax:

foo = 'bar'

Using types:

foo : string = 'bar'

Methods

Methods are the same except they don't go in a methods object

Computed

Like methods, computed properties don't go in a computed object. But you must specify a getter like so:

get someProp () {
  return 'hello'
}

using types:

get sommeProp () : string {
  return 'hello'
}

Props / Watchers / Components

Unlike everything else, the above are specified in your Component decorator.

import SomeComponent from './SomeComponent'

@Component({
  components: {
    SomeComponent
  }
  props: ['someProp'],
  watch: {
    'foo' (val) {
      console.log(val)
    }
  }
})