Add vue-chartjs example

examples/vue-chartjs/README.md

@@ -0,0 +1,3 @@
+# Vue-ChartJS with Nuxt.js
+
+https://nuxtjs.org/examples

examples/vue-chartjs/components/bar-chart.js

@@ -0,0 +1,8 @@
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})

examples/vue-chartjs/nuxt.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  build: {
+    vendor: ['axios', 'moment', 'chart.js', 'vue-chartjs']
+  }
+}

examples/vue-chartjs/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "hello-nuxt",
+  "dependencies": {
+    "axios": "^0.16.2",
+    "chart.js": "^2.6.0",
+    "moment": "^2.18.1",
+    "nuxt": "latest",
+    "vue-chartjs": "^2.8.2"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt"
+  }
+}

examples/vue-chartjs/pages/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="bar-chart">
+    <bar-chart :data="barChartData" :options="{ maintainAspectRatio: false }"/>
+  </div>
+</template>
+
+<script>
+import BarChart from '~/components/bar-chart'
+import axios from 'axios'
+import moment from 'moment'
+
+export default {
+  async asyncData() {
+    const res = await axios.get('https://api.github.com/repos/nuxt/nuxt.js/stats/commit_activity')
+    return {
+      barChartData: {
+        labels: res.data.map((stat) => moment(stat.week * 1000).format('GGGG[-W]WW')),
+        datasets: [
+          {
+            label: 'Nuxt.js Commit Activity',
+            backgroundColor: '#41b883',
+            data: res.data.map((stat) => stat.total)
+          }
+        ]
+      }
+    }
+  },
+  components: {
+    BarChart
+  }
+}
+</script>
+
+<style>
+.bar-chart {
+  position: fixed;
+  left: 10%;
+  top: 10%;
+  width: 80%;
+  height: 80%;
+}
+</style>