Vue components built for Vue3 powered by Windi CSS or tailwindcss
๐
Features
-
๐ All components and classes include dark-mode support -
๐ Programmatic toasts
$toast.show('this is a test');
$toast.show({
type: 'danger',
message: 'single action toast',
timeout: 6,
primary: {
label: 'UNDO',
action: () => $toast.show('you clicked UNDO')
}
})
-
๐ Programmatic 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 runyarn; yarn dev
-
โจ Tons of other components that will be documented shortly!
Installation
NuxtJS v3
yarn add --dev @tailvue/nuxt
- Add this to your
nuxt.config.ts
buildModules: [
'@tailvue/nuxt',
...
],
Vue3
yarn add tailvue
import { useToast, useModal } from 'tailvue'
const $toast = useToast()
const $modal = useModal()
Icons
- All Icons are brought in via the Iconify Vue Component
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",
],
}
Nuxt 3 document is not defined when refresh
i use const $toast = useToast() in section if i refresh page then document is not defined. but if i use $toast = useToast() in function and execute it toast and modals work is fine. what is my problem? sorry for bad english
typings do not need PropType
typings.d.ts
can be
nuxt3 tailwind content-include throwing error
Hey,
I'm getting the following error:
tailwind.config.js:
tailwind.css in assets has the following on line 71:
When I take out the
"node_modules/tailvue/dist/tailvue.es.js",
in the content section my project builds again.Any more information needed?
App Tour/On-boarding Component
In this PR I also did some clean up...
eslint
andprettier
along with some IDE/VSCode configurations.src/
folder to have more structured layout for future development of component and composablesSo most of the files changes where due to some minor linting stuff and of file movement, the main files you can checkout to view this feature are the following:
src
components
src/components/AppTour.vue
src/components/AppTourStep.vue
composables
src/composables/useAppTour.ts
types
src/types/tour.d.ts
index.ts
typings.ts
playground
playground/src/components/tour.vue
typing are still not matching for props in PushButton
matching types better
See if we give props something like UnwrapRef<>