Merge pull request #1890 from clarkdo/vue-class-component-example

feat: improve vue-class-component example

examples/vue-class-component/components/Base.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <input v-model="msg">
+    <p>msg: {{msg}}</p>
+    <p>env: {{env}}</p>
+    <p>computed msg: {{computedMsg}}</p>
+    <button @click="greet">Greet</button>
+    <p><nuxt-link to="/about">About page</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Component from 'nuxt-class-component'
+
+@Component({
+  props: {
+    env: String
+  }
+})
+export default class Base extends Vue {
+  // initial data
+  msg = 123
+
+  // lifecycle hook
+  mounted () {
+    this.greet()
+  }
+
+  // computed
+  get computedMsg () {
+    return 'computed ' + this.msg
+  }
+
+  // method
+  greet () {
+    console.log('base greeting: ' + this.msg)
+  }
+}
+</script>

examples/vue-class-component/components/Child.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <input v-model="msg">
+    <p>msg: {{msg}}</p>
+    <p>env: {{env}}</p>
+    <p>computed msg: {{computedMsg}}</p>
+    <button @click="greet">Greet</button>
+    <p><nuxt-link to="/about">About page</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import Component from 'nuxt-class-component'
+import Base from '@/components/Base'
+
+@Component
+export default class Child extends Base {
+  // override parent method
+  greet () {
+    console.log('child greeting: ' + this.msg)
+  }
+}
+</script>

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

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

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

@@ -1,3 +1,6 @@
 <template>
-  <h1>About</h1>
+  <div>
+    <h1>About</h1>
+    <p><nuxt-link to="/">Home page</nuxt-link></p>
+  </div>
 </template>

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

@@ -1,41 +1,18 @@
 <template>
-  <div>
-    <input v-model="msg">
-    <p>msg: {{msg}}</p>
-    <p>env: {{env}}</p>
-    <p>computed msg: {{computedMsg}}</p>
-    <button @click="greet">Greet</button>
-    <p><nuxt-link to="/about">About page</nuxt-link></p>
-  </div>
+  <Child :env="env" ></Child>
 </template>
 
 <script>
 import Vue from 'vue'
 import Component from 'nuxt-class-component'
+import Child from '@/components/Child'
 
-@Component()
-
+@Component({
+  components: { Child }
+})
 export default class App extends Vue {
-  // initial data
-  msg = 123
-
   asyncData ({ req }) {
     return { env: req ? 'server' : 'client' }
   }
-
-  // lifecycle hook
-  mounted () {
-    this.greet()
-  }
-
-  // computed
-  get computedMsg () {
-    return 'computed ' + this.msg
-  }
-
-  // method
-  greet () {
-    console.log('greeting: ' + this.msg)
-  }
 }
 </script>