feat: upgrade nuxt to 2

client/components/Footer.vue

@@ -26,7 +26,7 @@
 
 <script>
 import Vue from 'vue'
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 
 @Component
 export default class Footer extends Vue {

client/components/Headbar.vue

@@ -40,7 +40,7 @@
 <script>
 import Vue from 'vue'
 import { mapActions } from 'vuex'
-import Component, { Getter } from 'class-component'
+import { Component, Getter } from 'nuxt-property-decorator'
 
 @Component({
   methods: {

client/components/Navbar.vue

@@ -40,7 +40,7 @@
 import Vue from 'vue'
 import axios from 'axios'
 import { mapActions } from 'vuex'
-import Component, {Getter, namespace } from 'class-component'
+import { Component, Getter, namespace } from 'nuxt-property-decorator'
 
 const MenuGetter = namespace('menu', Getter)
 

client/components/examples/activity/NewActivity.vue

@@ -106,7 +106,7 @@
 
 <script>
 import Vue from 'vue'
-import Component, { Getter, namespace } from 'class-component'
+import { Component, Getter, namespace } from 'nuxt-property-decorator'
 
 const ExampleGetter = namespace('examples/index', Getter)
 

client/components/examples/charts/BarDemo.vue

@@ -1,5 +1,5 @@
 <script>
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 import { Bar } from 'vue-chartjs'
 
 @Component({

client/components/examples/charts/DoughnutDemo.vue

@@ -1,5 +1,5 @@
 <script>
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 import { Doughnut } from 'vue-chartjs'
 
 @Component({

client/components/examples/charts/LineDemo.vue

@@ -1,6 +1,6 @@
 <script>
 import Vue from 'vue'
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 import { Line } from 'vue-chartjs'
 
 /*

client/components/examples/charts/PieDemo.vue

@@ -1,5 +1,5 @@
 <script>
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 import { Pie } from 'vue-chartjs'
 
 @Component({

client/components/examples/charts/ReactiveDemo.vue

@@ -1,6 +1,6 @@
 <script>
 import Vue from 'vue'
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 import { Bar, mixins } from 'vue-chartjs'
 
 @Component({

client/components/examples/charts/ScatterDemo.vue

@@ -1,6 +1,6 @@
 <script>
 import Vue from 'vue'
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 import { Scatter } from 'vue-chartjs'
 
 @Component({

client/pages/examples/activity/create.vue

@@ -14,7 +14,7 @@
 <script>
 import Vue from 'vue'
 import NewActivity from '@/components/examples/activity/NewActivity'
-import Component, { Getter, namespace } from 'class-component'
+import { Component, Getter, namespace } from 'nuxt-property-decorator'
 
 const ActivityGetter = namespace('examples/activity', Getter)
 

client/pages/examples/activity/index.vue

@@ -78,7 +78,7 @@
 <script>
 import Vue from 'vue'
 import axios from 'axios'
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 
 @Component({
   methods: {

client/pages/examples/charts.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script>
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 import BarDemo from '@/components/examples/charts/BarDemo'
 import PieDemo from '@/components/examples/charts/PieDemo'
 import LineDemo from '@/components/examples/charts/LineDemo'

client/pages/examples/index.vue

@@ -146,7 +146,7 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
 import NewActivity from '@/components/examples/activity/NewActivity'
-import Component, {Getter, namespace } from 'class-component'
+import { Component, Getter, namespace } from 'nuxt-property-decorator'
 
 const ExampleGetter = namespace('examples/index', Getter)
 

client/pages/index.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 import ForkThis from '@/components/ForkThis'
 
 @Component({

client/pages/login.vue

@@ -46,7 +46,7 @@
 <script>
 import Vue from 'vue'
 import debounce from '@/utils/debounce'
-import Component from 'class-component'
+import { Component } from 'nuxt-property-decorator'
 
 @Component
 export default class Login extends Vue {
@@ -120,7 +120,7 @@ export default class Login extends Vue {
 
 <style scoped lang="scss">
 .login {
-  background: url(~/assets/img/login-bg.jpeg) no-repeat center center fixed;
+  background: url(~assets/img/login-bg.jpeg) no-repeat center center fixed;
   background-size: cover;
   position: absolute;
   top: 0;

nuxt.config.js

@@ -31,30 +31,17 @@ module.exports = {
   */
   build: {
     publicPath: '/hare/',
+    extractCSS: true,
     babel: {
-      plugins: ['transform-decorators-legacy', 'transform-class-properties']
-    },
-    extend (config, { isDev }) {
-      config.resolve.alias['class-component'] = '@/plugins/class-component'
+      plugins: [
+        ['@babel/plugin-proposal-decorators', { legacy: true }],
+        ['@babel/plugin-proposal-class-properties', { loose: true }]
+      ]
     },
-    vendor: [
-      'axios',
-      'element-ui',
-      'negotiator',
-      'vue-class-component',
-      'vuex-class',
-      'vue-i18n',
-      'vue-chartjs',
-      'vue-clipboards',
-      'moment',
-      'chart.js',
-      'deepmerge' // vue-chartjs dep
-    ],
-    extractCSS: true,
     filenames: {
-      vendor: 'vendor.[hash:12].js',
-      app: 'hare.[chunkhash:12].js',
-      css: 'hare.[contenthash:12].css'
+      app: ({ isDev }) => isDev ? '[name].js' : 'hare.[chunkhash:12].js',
+      chunk: ({ isDev }) => isDev ? '[name].js' : 'hare.chunk.[chunkhash:12].js',
+      css: ({ isDev }) => isDev ? '[name].css' : 'hare.[contenthash:12].css'
     },
     plugins: [
       new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh|en|fr/)

package.json

@@ -59,22 +59,19 @@
     "moment": "^2.22.0",
     "negotiator": "^0.6.1",
     "normalize.css": "^8.0.0",
-    "nuxt": "^1.4.0",
+    "nuxt": "^2.6.0",
+    "nuxt-property-decorator": "^2.1.3",
     "svg-captcha": "^1.3.11",
     "vue-chartjs": "^3.3.1",
-    "vue-class-component": "^6.2.0",
     "vue-clipboards": "^1.2.4",
     "vue-i18n": "^7.6.0",
-    "vuex-class": "^0.3.0",
     "xmlify": "^1.1.0"
   },
   "devDependencies": {
     "@nuxtjs/axios": "^5.3.1",
     "@nuxtjs/webpackmonitor": "^0.1.0",
     "ava": "^0.25.0",
     "babel-eslint": "^8.2.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "cpx": "^1.5.0",
     "cross-env": "^5.1.4",
     "eslint": "^4.19.0",