Fix vue-class-component example

examples/vue-class-component/nuxt.config.js

@@ -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'

examples/vue-class-component/package.json

@@ -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"

examples/vue-class-component/pages/index.vue

@@ -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({
+@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' }
   }
@@ -43,7 +35,7 @@ export default class App extends Vue {
 
   // method
   greet () {
-    alert('greeting: ' + this.msg)
+    console.log('greeting: ' + this.msg)
   }
 }
 </script>