Tabler Vue

The tabler-vue-example project provides several npm scripts for development and production workflows. Use these commands to install dependencies, run a local development server with hot reloading, or build the project for production.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

To run the project locally and view the demo website with live browser reloading, follow these steps:

1. Clone the repository: git clone https://github.com/tabler/tabler-vue.git
2. Install dependencies using yarn in the root folder: yarn install
3. Start the development server: yarn dev

The development server will run the example website located in the /example folder (which is a vue-cli webpack based demo), allowing you to see changes made to components in the /src folder in real-time.

To use TablerVue components and directives in your application, install the TablerVuePlugin using Vue's Vue.use() method. This will automatically register all available Tabler components and directives globally.

import TablerVuePlugin from 'tabler-vue';

Vue.use(TablerVuePlugin);

The src/components/Site/index.js file serves as a central export point for the core layout components used to build a Tabler-based website structure. You can import these components to compose a standard site layout including the wrapper, header, logo, and navigation.

import {
    SiteHeader,
    SiteLogo,
    SiteNav,
    SiteWrapper
} from 'tabler-vue';

The src/components/Nav/index.js entrypoint exports the Nav and NavItem components, which are used to build navigation structures within the Tabler Vue ecosystem.

import { Nav, NavItem } from 'tabler-vue';

The ClickOutside directive can be exported from the directives entrypoint and used in Vue templates to detect clicks occurring outside of a specific element. This is useful for implementing UI patterns like dropdowns, modals, or tooltips that should close when a user clicks elsewhere on the page.

import { ClickOutside } from 'tabler-vue';

// In your component:
export default {
  directives: {
    clickOutside: ClickOutside
  }
}

The tabler-vue package provides a set of modular components for building HTML tables. You can import these components individually or as a group to construct structured tables using the standard HTML table hierarchy (Table > TableHead/TableBody > TableRow > TableCel).

import {
    Table,
    TableHead,
    TableBody,
    TableRow,
    TableCel
} from './components/Table';

The TablerVuePlugin object is the default export of the library. It contains:

• An install method: A Vue plugin installation function that iterates through all internal components and directives, registering them globally via Vue.component and Vue.directive.
• components: A spread collection of all Tabler Vue components.
• directives: A spread collection of all Tabler Vue directives.

The Card component suite provides a structured way to build card layouts using a composition pattern. You can import the individual sub-components to build a complete card structure including a header, body, and footer.

Available components:

• Card: The main container component.
• CardHeader: The top section of the card.
• CardBody: The primary content area of the card.
• CardFooter: The bottom section of the card.

import {
    Card,
    CardHeader,
    CardBody,
    CardFooter
} from 'tabler-vue';

The Grid module provides GridRow and GridCol components to implement the Tabler grid system in your Vue applications. Use GridRow as a wrapper for columns and GridCol to define the width and behavior of individual grid items.

<template>
  <GridRow>
    <GridCol>
      <!-- Content -->
    </GridCol>
  </GridRow>
</template>

<script setup>
import { GridRow, GridCol } from 'tabler-vue'
</script>

The src/components/Page entrypoint exports a set of components used to structure page layouts in a Tabler-based application. You can import these components to build consistent page structures including headers and wrappers.

import {
    Page,
    PageHeader,
    PageWrapper
} from 'tabler-vue/src/components/Page';

You can import the entire collection of Tabler Vue components via the components object exported from src/components/index.js. This object contains all available UI components, including Alerts, Buttons, Cards, Grids, Navigations, Tables, and more. This is useful for global registration in a Vue application.

import { components } from 'tabler-vue';

// Example: Registering all components globally in a Vue instance
const app = createApp(App);
app.component('Alert', components.Alert);
// Or if components are exported as namespaces/objects:
Object.entries(components).forEach(([name, component]) => {
  app.component(name, component);
});