Recibo este error al intentar hacer que vue-chartjs funcione

 WARN in ./node_modules/vue-chartjs/es/BaseCharts.js "export 'default' (imported as 'Chart') was not found in 'chart.js'

Y también esto en devtools:

 TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

Pasos para recrear:

1. Cree la aplicación nuxt con: $ yarn create nuxt-app <project_name>
2. Agregue vue-chartjs con $ yarn add vue-chartjs chart.js
3. Agregue el siguiente código que debería funcionar de acuerdo con los documentos de vue-chartjs

~/components/BarChart.js

 import { Bar } from 'vue-chartjs' export default { extends: Bar, props: ['data', 'options'], mounted() { this.renderChart(this.data, this.options) }, }

~/páginas/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>

También estoy usando tailwindcss en el proyecto y otras opciones del proyecto nuxt fueron Axios, Git, ESlint, Prettier.