Vuets: A Vue.js and TypeScript ready boilerplate

Vuets

A boilerplate for Vue.js available through the vue-cli with TypeScript support. Vuets uses vue-class-component, ES / TypeScript decorator for class-style Vue components, vue plugin options, and webpack.

What's a class-style component?

Vuets is enabling different syntax. Different data class syntax, Methods are the same except they don't go in a method's object, computed properties are like methods, and 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'
}

Reagarding 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)
    }
  }
})

Usage

To start working with the Vuets boilerplate download vue-cli and the 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)

The installation creates a project with the following structure.

After starting the server you get a page with the following message:

Welcome to Vuets This is the Home page

That is it! Vuets can help you begin your project real quick. If you are looking for more head to the project's repository, available on GitHub.