I encountered this issue while attempting to utilize vue-chartjs
WARN in ./node_modules/vue-chartjs/es/BaseCharts.js
"export 'default' (imported as 'Chart') was not found in 'chart.js'
In addition, I noticed the following error in devtools:
TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
Steps for recreation:
- Create a new nuxt app using:
$ yarn create nuxt-app <project_name> - Install vue-chartjs with
$ yarn add vue-chartjs chart.js - Add the code snippet below which should work based on vue-chartjs documentation
~/components/BarChart.js
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
props: ['data', 'options'],
mounted() {
this.renderChart(this.data, this.options)
},
}
~/pages/index.vue
<template>
<div class="container">
<div>
<bar-chart
:data="barChartData"
:options="barChartOptions"
:height="200"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
barChartData: {
labels: [
'2019-06',
'2019-07',
'2019-08',
'2019-09',
'2019-10',
'2019-11',
'2019-12',
'2020-01',
'2020-02',
'2020-03',
'2020-04',
'2020-05',
],
datasets: [
{
label: 'Visits',
data: [10, 15, 20, 30, 40, 50, 60, 70, 34, 45, 11, 78, 45],
backgroundColor: '#003f5c',
},
{
label: 'Pages Views',
data: [30, 24, 57, 23, 68, 72, 25, 64, 133, 143, 165, 33, 56],
backgroundColor: '#2f4b7c',
},
{
label: 'Users',
data: [45, 65, 30, 53, 34, 35, 26, 37, 34, 45, 67, 87, 98],
backgroundColor: '#665191',
},
],
},
barChartOptions: {
responsive: true,
legend: {
display: false,
},
title: {
display: true,
text: 'Google analytics data',
fontSize: 24,
fontColor: '#6b7280',
},
tooltips: {
backgroundColor: '#17BF62',
},
scales: {
xAxes: [
{
gridLines: {
display: false,
},
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
gridLines: {
display: false,
},
},
],
},
},
}
},
}
</script>
<style>
/* Sample `apply` at-rules with Tailwind CSS
.container {
@apply min-h-screen flex justify-center items-center text-center mx-auto;
}
*/
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
In my project, I'm also utilizing tailwindcss along with other nuxt project options like Axios, Git, ESlint, Prettier.