Example with vue-class-component

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

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

examples/vue-class-component/package.json

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

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

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

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

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

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

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