Vue

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

Vue single-file components render standard HTML templates, so Tabler classes work directly in your markup while @tabler/core supplies the styling. JavaScript is only needed for interactive components such as dropdowns, modals, and tooltips.

This guide uses a standard Vite-based Vue setup. You will install @tabler/core, import its CSS and JS in src/main.js, 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

Import Tabler CSS once in your Vue entry file (src/main.js):

import '@tabler/core/dist/css/tabler.min.css'

For full theme customization, import SCSS sources instead:

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

Import and initialize JavaScript

Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Import it once in src/main.js:

import '@tabler/core/dist/js/tabler.min.js'

Vue-specific note: initialize DOM-based behavior after mount, not during render. Use onMounted in components that need manual initialization:

import { onMounted } from 'vue'
import { Tooltip } from '@tabler/core'

onMounted(() => {
  const elements = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  elements.forEach((element) => new Tooltip(element))
})

Minimal working example

Create a simple src/main.js that loads Tabler assets and mounts the app:

import { createApp } from 'vue'
import App from './App.vue'
import '@tabler/core/dist/css/tabler.min.css'
import '@tabler/core/dist/js/tabler.min.js'

createApp(App).mount('#app')

Then create src/App.vue with a minimal Tabler layout and one card:

<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">Vue + 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 Vite 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

Vue