# Vue

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

Install Tabler in Vue - import the CSS and JS from the @tabler/core package and render a minimal single-file component with a Tabler card.

Source: https://docs.tabler.io/ui/getting-started/frameworks/vue

---

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:

```shell
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:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/css/tabler.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/js/tabler.min.js"></script>
```

### Import styles

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

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

For full theme customization, import SCSS sources instead:

```scss
@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`:

```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:

```js
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:

```js
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:

```vue
<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:

```shell
npm run dev
```

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

### Next steps

- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
- Explore [Layout](/ui/layout) to choose page structures.
- Browse [Components](/ui/components) to add UI building blocks.