👨‍🏫 The Mastering Nuxt 3 course is now completed!

Discover the course
tailvue

Vue components built for Vue3 powered by Windi CSS or tailwindcss

tailvue
Vue components built for Vue3 powered by Windi CSS or tailwindcss

🚀 Features

  • 🌔 All components and classes include dark-mode support
  • 🔌 Programmatic toasts

toasts

$toast.show('this is a test');

toasts-single-action

$toast.show({
type: 'danger',
message: 'single action toast',
timeout: 6,
primary: {
label: 'UNDO',
action: () => $toast.show('you clicked UNDO')
}
})
  • 🔌 Programmatic modals

modals

$modal.show({
type: 'danger',
title: 'This is the title property',
body: 'This is the body property.',
primary: {
label: 'Primary Action',
theme: 'red',
action: () => $toast.show('Primary Button clicked'),
},
secondary: {
label: 'Secondary Action',
theme: 'white',
action: () => $toast.show('Clicked Secondary'),
},
})
  • 🎪 Interactive playground! - just run yarn; yarn dev

playground

  • ✨ Tons of other components that will be documented shortly!

Installation

NuxtJS v3

yarn add --dev @tailvue/nuxt
  • Add this to your nuxt.config.ts
modules: [
// ...
'@tailvue/nuxt',
],

Note If you are using Nuxt 2 you may need to put this in of the buildModules array

Vue3

yarn add tailvue
import { useToast, useModal } from 'tailvue'
const $toast = useToast()
const $modal = useModal()

Icons

yarn add --dev @iconify/vue

WindiCSS

  • Install WindiCSS
  • Add the following to your window.config.ts
export default defineConfig({
extract: {
include: [
...
"node_modules/tailvue/dist/tailvue.es.js",
],
},

tailwindcss

  • Install tailwindcss
  • Add the following to your tailwind.config.js
module.exports = {
content: [
...
"node_modules/tailvue/dist/tailvue.es.js",
],
}