Fix vue-class-component example

This commit is contained in:
Sébastien Chopin 2017-04-17 18:15:55 +02:00
parent 2eecb8c0de
commit 0bea10b857
3 changed files with 6 additions and 13 deletions

View File

@ -1,7 +1,7 @@
module.exports = {
build: {
babel: {
plugins: ['transform-decorators-legacy']
plugins: ['transform-decorators-legacy', 'transform-class-properties']
},
extend (config) {
config.resolve.alias['nuxt-class-component'] = '~plugins/nuxt-class-component'

View File

@ -1,6 +1,7 @@
{
"name": "nuxt-class-component",
"dependencies": {
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"nuxt": "latest",
"vue-class-component": "^5.0.1"

View File

@ -1,13 +1,11 @@
<template>
<div>
<input v-model="msg">
<p>prop: {{propMessage}}</p>
<p>msg: {{msg}}</p>
<p>env: {{env}}</p>
<p>helloMsg: {{helloMsg}}</p>
<p>computed msg: {{computedMsg}}</p>
<button @click="greet">Greet</button>
<nuxt-link to="/about">About page</nuxt-link>
<p><nuxt-link to="/about">About page</nuxt-link></p>
</div>
</template>
@ -15,18 +13,12 @@
import Vue from 'vue'
import Component from 'nuxt-class-component'
@Component({
props: {
propMessage: String
}
})
@Component()
export default class App extends Vue {
// initial data
msg = 123
// use prop values for initial data
helloMsg = 'Hello, ' + this.propMessage
asyncData ({ req }) {
return { env: req ? 'server' : 'client' }
}
@ -43,7 +35,7 @@ export default class App extends Vue {
// method
greet () {
alert('greeting: ' + this.msg)
console.log('greeting: ' + this.msg)
}
}
</script>