Navigate Docs

Server-side Rendering

Learn how to handle server-side rendering with client-side-only charts in your Nuxt application.

Important: Nuxt Charts is based on Unovis, which uses D3.js and is not optimized for server-side rendering.

Solutions for SSR Compatibility

1. Use the .client.vue file naming convention

Create chart components with the .client.vue suffix to prevent them from being imported on the server side.

2. Use the ClientOnly wrapper

Wrap your chart components with the <ClientOnly> tag to ensure they only render on the client side.

Warning: Don't wrap individual chart components inside a component that already uses charts. Instead, wrap the entire parent component.

This will fail:
This will work:

3. Disable SSR Globally in nuxt.config.ts

You can disable server-side rendering for your entire Nuxt app by setting ssr: false in your nuxt.config.ts:

Note: Disabling SSR globally is only recommended if your entire application does not require server-side rendering. For most use cases, prefer the .client.vue convention or <ClientOnly> wrapper for specific components.

Best Practices

✅

Use the .client.vue naming convention for chart components.

✅

Wrap entire components that contain charts with the <ClientOnly> tag.

❌

Don't nest <ClientOnly> tags within components that already use charts.

Ready to build something amazing?

All components are built with Nuxt UI v3, TypeScript, and Tailwind CSS for maximum flexibility

Frequently Asked Questions

Everything you need to know about our templates

How do I get access to the Nuxt Dashboard?

What's included in the All-Access Pass?

Can I customize the charts and components?

Do I need specific technical skills?

What chart types are available?

Can I use this for commercial projects?

What's the difference between the pricing tiers?

Do you offer refunds?