Example with vue-class-component

This commit is contained in:
Sebastien Chopin 2017-04-14 16:47:21 +02:00
parent b5330a063d
commit f89722e7c8
5 changed files with 89 additions and 0 deletions

View File

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

View File

@ -0,0 +1,13 @@
{
"name": "nuxt-class-component",
"dependencies": {
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"nuxt": "latest",
"vue-class-component": "^5.0.1"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}

View File

@ -0,0 +1,3 @@
<template>
<h1>About</h1>
</template>

View File

@ -0,0 +1,49 @@
<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>
</div>
</template>
<script>
import Vue from 'vue'
import Component from 'nuxt-class-component'
@Component({
props: {
propMessage: String
}
})
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' }
}
// lifecycle hook
mounted () {
this.greet()
}
// computed
get computedMsg () {
return 'computed ' + this.msg
}
// method
greet () {
alert('greeting: ' + this.msg)
}
}
</script>

View File

@ -0,0 +1,14 @@
import Component from 'vue-class-component'
Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave',
'asyncData',
'fetch',
'middleware',
'layout',
'transition',
'scrollToTop'
])
export default Component