Vue Tailwind Components

kreejzak
1

Easy to use vue.js components using tailwindcss

this package is deprecated (for now)

I maybe plan to revive this package in the future for vue 3 and tailwind 3+, but for now I'm not in need of samey looking components.

Vue Tailwind Components

Easy to use vue components utilizing tailwindcss. (Vue 2.6 +, Tailwindcss 1.1 +)

Components

Navbar
Burger
more to come (lol)

Demo

You can find demo here.

Installation

yarn add @kreejzak/vue-tailwind-components

Usage

Import styles and components you want to use and register them in your components object.

import '@kreejzak/vue-tailwind-components/dist/vue-tailwind-components.css'
import { VtcNavbar } from '@kreejzak/vue-tailwind-components'
export default {
    components: {
        VtcNavbar
    }
}

* Styles are not necessary but following components may not function properly:

Burger

VtcNavbar

Responsive Navbar component. Use slots: logo, menu, burger for placing content into corresponding place of this component. You have showMobileMenu variable at your disposal on every slot. Use the vtcClass variable on the root element in menu slot for proper function of the mobile menu.

Props

name	type	description
value	Boolean	This prop controls mobile menu from outside of the component (using `v-model` is recommended)
mobileBreakpoint	String	Tailwindcss breakpoint for switching to desktop version (undefined = always mobile version)
burgerColor	String	Tailwindcss color name for the lines of default Burger
scrolledThreshold	Number	Number of pixels scrolled from top of page fires event
unscrolledClass	String	class applied to Navbar when `window.scrollY` < `scrolledThreshold`
scrolledClass	String	class applied to Navbar when `window.scrollY` >= `scrolledThreshold`

<VtcNavbar
    class="py-2"
    unscrolledClass="bg-white"
    scrolledClass="bg-blue-100 shadow"
    mobileBreakpoint="md"
    burgerColor="red-500"
    :scrolledThreshold="100"
    v-model="openMobileMenu"
>

    <template #logo="{ showMobileMenu, scrolled }">

        <div
            class="font-bold uppercase py-2"
            :class="{
                'text-red-500 md:text-black': showMobileMenu
            }"
        >
             logo
        </div>

    </template>

    <template #menu="{ showMobileMenu, scrolled, vtcClass }">

        <div
            :class="[
                vtcClass,
                {
                    'bg-blue-100 md:bg-transparent': showMobileMenu
                }
            ]"
        >

            <div class="container mx-auto px-4">

                <ul class="flex flex-col md:flex-row justify-end -mx-4">

                    <li class="ml-4">item 1</li>

                    <li class="ml-4">item 2</li>

                    <li class="ml-4">item 3</li>

                    <li class="ml-4">item 4</li>

                </ul>

            </div>

        </div>

    </template>

</VtcNavbar>

VtcBurger

Default Burger component for mobile version of navbar.

Props

name	type	description
value	Boolean	Controls state of burger (using `v-model` instead is recommended)
color	String	Tailwindcss color name for the lines of Burger

<VtcBurger color="blue-500" v-model="showMobileMenu" />

Top categories