Nuxt

Set up Tabler in Nuxt and build a first working page.

Nuxt renders on the server by default, so Tabler integrates in two parts: CSS registered globally in nuxt.config.ts, and tabler.min.js loaded through a client-only plugin so it never runs during server-side rendering.

You will install @tabler/core, register the styles, add the client plugin, and render a first page with a Tabler card.

Setup

Install Tabler package

Install @tabler/core with your preferred package manager:

npm install @tabler/core

yarn add @tabler/core

pnpm install @tabler/core

bun install @tabler/core

You can also use CDN files when you need a quick setup:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js"></script>

Import styles

export default defineNuxtConfig({
  css: ['@tabler/core/dist/css/tabler.min.css'],
})

For full theme customization, import SCSS sources in your app stylesheet:

@use '@tabler/core/scss/tabler';

Import and initialize JavaScript

Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.

Nuxt-specific note: tabler.min.js accesses document, so load it only on the client. If you import it during SSR, Nuxt throws document is not defined.

Create a client-only plugin in plugins/tabler.client.ts:

export default defineNuxtPlugin(async () => {
  await import('@tabler/core/dist/js/tabler.min.js')
})

Minimal working example

Create a minimal pages/index.vue page:

<template>
  <div class="page">
    <div class="page-wrapper">
      <div class="container-xl py-4">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">Nuxt + Tabler</h3>
            <p class="text-secondary mb-0">Your Tabler setup is working.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Run the app:

npm run dev

Open the local Nuxt URL and confirm the card is styled with Tabler.

Next steps

Continue with Customize to adjust styles and build setup.
Explore Layout to choose page structures.
Browse Components to add UI building blocks.

Menu