Get Started with Taco Vue

Taco Vue is a free and open-source components library for using Tailwind CSS.

Installation

Learn how to use @ct-taco/vue components from this documentation to quickly and easily create elegant and flexible pages using Tailwind CSS.

@ct-taco/vue is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation.

Icons

You can use font awesome font family for the project by following their installation guide - Tailwind CSS Installation.

Using NPM

Install @ct-taco/vue as a dependency using NPM by running the following command:

npm i @ct-taco/vue

TailwindCSS Configurations

Once you install @ct-taco/vue you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/vue/utils (installed automatically by installing this package)

const withMT = require("@material-tailwind/html/utils/withMT");
module.exports = withMT({
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}",
    "node_modules/@ct-taco/vue/**/*.{js,jsx,ts,tsx,vue}",
  ],
  theme: {
    extend: {
      gridTemplateRows: {
        "template-auto": "auto",
      },
    },
  },
  plugins: [],
});

Vite Configurations

Once you install @ct-taco/vue you need to add a plugin for CommonJS dependencies in your vite config.

import { fileURLToPath, URL } from "node:url";
import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
      
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), viteCommonjs()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

Example

Now you're good to go and use @ct-taco/vue in your project.

        
<script setup>
    import { Button } from "@ct-taco/vue"
</script>
<template>
    <Button color="blue" ripple="light" variant="gradient" size="lg">
        Button
    </Button>
</template>