A Nuxt module for Wick Charts. It registers the @wick-charts/vue components and composables, so a page uses charts with no imports. For chart blocks themed by shadcn-vue, see the shadcn-vue blocks.
01 — ADD THE MODULE
Run
npx nuxi module add @wick-charts/nuxt. It installs the package and adds it to modules in nuxt.config.ts. The module brings @wick-charts/vue with it.export default defineNuxtConfig({ modules: ['@wick-charts/nuxt'],});02 — USE THE COMPONENTS
Every component has a
Wick prefix: ChartContainer becomes <WickChartContainer>, Tooltip becomes <WickTooltip>. The prefix keeps short names such as Title and Legend apart from your own components. Import types, themes and helpers from @wick-charts/vue.<script setup lang="ts">import type { OHLCData } from '@wick-charts/vue'; const { data: candles } = await useFetch<OHLCData[]>('/api/candles');</script> <template> <div class="h-96"> <WickChartContainer> <PriceTitle /> <WickCandlestickSeries id="price" :data="candles ?? []" /> <WickCrosshair /> <WickTooltip /> <WickYAxis /> <WickTimeAxis /> </WickChartContainer> </div></template>03 — COMPOSABLES WITH NO IMPORT
useChartInstance, useVisibleRange, useYRange, useLastYValue, usePreviousClose and useCrosshairPosition are auto-imported. Call them in a component inside <WickChartContainer>. Import useTheme from @wick-charts/vue: Vuetify and other UI kits auto-import the same name.<!-- components/PriceTitle.vue --><script setup lang="ts">const chart = useChartInstance();const last = useLastYValue(chart, 'price');</script> <template> <WickTitle>BTC {{ last?.value.toFixed(2) }}</WickTitle></template>04 — SERVER RENDERING
The chart draws on a canvas in the browser. On the server, Nuxt renders the chart container with its size and theme background, so the page does not jump when the chart appears. You do not need a
<ClientOnly> wrapper, and data from useFetch is ready on the first paint.05 — OPTIONS
Set a different component prefix, or turn off the composable auto-imports. The module works with Nuxt 3.12 and later, and with Nuxt 4.
export default defineNuxtConfig({ modules: ['@wick-charts/nuxt'], wickCharts: { prefix: 'Chart', // <ChartLineSeries>, <ChartTooltip> composables: false, },});