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