Подключение Highcharts в Nuxt3

Недавно столкнулся при разработке с проблемой - используемый в проекте Highcharts не имел модуля для использования Nuxt3. Пришлось оформлять в виде плагина. Опишу здесь по шагам, как это делать:

1. Ставим зависимости, которые нам потребуются:

npm install highcharts highcharts-vue

2. Создаём в каталоге plugins (Nuxt3) файл нашего будущего плагина: highcharts.js

3. В файл плагина размещаем код:

import { defineNuxtPlugin } from '#app';

import Highcharts from 'highcharts';

import HighchartsVue from 'highcharts-vue';

// Подключите нужные модули, включая stock

import 'highcharts/modules/stock';

export default defineNuxtPlugin(nuxtApp => {

// Используем HighchartsVue в приложении

nuxtApp.vueApp.use(HighchartsVue);

});

4. Расширяем nuxt.config.ts, включив туда наш плагин:

plugins: [

'~/plugins/highcharts.js', // путь к вашему плагину

],

5. В pages создаём тестовый файл: hindex.vue (называйте как хотите):

<template>

<div>

<highcharts :options="chartOptions"></highcharts>

</div>

</template>

<script setup>

import { ref } from 'vue';

const chartOptions = ref({

chart: {

type: 'line'

},

title: {

text: 'Пример графика'

},

series: [

{

name: 'Серия 1',

data: [1, 2, 3, 4, 5]

}

]

});

</script>

Результат должен иметь примерно такой вид:

Итог нашей работы

Можно подключать другие модули Highcharts, такие как stock, exporting, more, и т.д. Для этого, на примере exporting, подключим и вызовем его:

import exporting from 'highcharts/modules/exporting';

exporting(Highcharts);