Vue components built for Nuxt3|Vue3 powered by Windi CSS|tailwindcss

  • By Fume
  • Last update: Dec 28, 2022
  • Comments: 6

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
buildModules: [
    '@tailvue/nuxt',
    ...
],

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",
  ],
}

Github

https://github.com/fumeapp/tailvue

Comments(6)

  • 1

    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

  • 2

    typings do not need PropType

    typings.d.ts

    declare const PushButton: DefineComponent<{
  state: PropType<PushButtonState>
  size: PropType<PushButtonSize>
  theme: PropType<PushButtonThemeName>
  customTheme: PropType<PushButtonTheme>
}>

    can be

    declare const PushButton: DefineComponent<{
  state: PushButtonState
  size: PushButtonSize
  theme: PushButtonThemeName
  customTheme: PushButtonTheme
}>
  • 3

    nuxt3 tailwind content-include throwing error

    Hey,

    I'm getting the following error:

     22:25:01 [vite] Internal server error: /home/bennet/source/xxx/packages/dashboard/assets/css/tailwind.css:71:1: The dark: class does not exist. If dark: is a custom class, make sure it is defined within a @layer directive.
  Plugin: vite:css
  File: /home/bennet/source/xxx/packages/dashboard/assets/css/tailwind.css

    tailwind.config.js:

    const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  safelist: [{
    pattern: /(bg|text|font|max)-*/
  }],
  content: [
    `components/**/*.{vue,js,ts}`,
    `layouts/**/*.vue`,
    `pages/**/*.vue`,
    `plugins/**/*.{js,ts}`,
    "node_modules/tailvue/dist/tailvue.es.js",
  ],
  darkMode: 'class', // or 'media' or false
  theme: {
    extend: {
      fontFamily: {
        sans: ['cairo', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        light: 'var(--light)',
        dark: 'var(--dark)',
        darker: 'var(--darker)',
        primary: {
          DEFAULT: 'var(--color-primary)',
          50: 'var(--color-primary-50)',
          100: 'var(--color-primary-100)',
          light: 'var(--color-primary-light)',
          lighter: 'var(--color-primary-lighter)',
          dark: 'var(--color-primary-dark)',
          darker: 'var(--color-primary-darker)',
        },
        secondary: {
          DEFAULT: colors.fuchsia[600],
          50: colors.fuchsia[50],
          100: colors.fuchsia[100],
          light: colors.fuchsia[500],
          lighter: colors.fuchsia[400],
          dark: colors.fuchsia[700],
          darker: colors.fuchsia[800],
        },
        success: {
          DEFAULT: colors.green[600],
          50: colors.green[50],
          100: colors.green[100],
          light: colors.green[500],
          lighter: colors.green[400],
          dark: colors.green[700],
          darker: colors.green[800],
        },
        warning: {
          DEFAULT: colors.orange[600],
          50: colors.orange[50],
          100: colors.orange[100],
          light: colors.orange[500],
          lighter: colors.orange[400],
          dark: colors.orange[700],
          darker: colors.orange[800],
        },
        danger: {
          DEFAULT: colors.red[600],
          50: colors.red[50],
          100: colors.red[100],
          light: colors.red[500],
          lighter: colors.red[400],
          dark: colors.red[700],
          darker: colors.red[800],
        },
        info: {
          DEFAULT: colors.cyan[600],
          50: colors.cyan[50],
          100: colors.cyan[100],
          light: colors.cyan[500],
          lighter: colors.cyan[400],
          dark: colors.cyan[700],
          darker: colors.cyan[800],
        },
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['checked', 'disabled'],
      opacity: ['dark'],
      overflow: ['hover'],
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

    tailwind.css in assets has the following on line 71:

    @tailwind components;

    When I take out the "node_modules/tailvue/dist/tailvue.es.js", in the content section my project builds again.

    Any more information needed?

  • 4

    App Tour/On-boarding Component

    In this PR I also did some clean up...

    • Added eslint and prettier along with some IDE/VSCode configurations.
    • Reorganized src/ folder to have more structured layout for future development of component and composables
    • Updated Readme
    • Cleaned up development playground environment

    So 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
  • 5

    typing are still not matching for props in PushButton

    (property) 'push-button': DefineComponent<{
    state: PushButtonState;
    size: PushButtonSize;
    theme: PushButtonThemeName;
    customTheme: PushButtonTheme;
}, ... 10 more ..., {}>
Type '{ state: PushButtonState; customTheme: PushButtonTheme; "custom-theme": PushButtonTheme; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ state: PushButtonState; size: PushButtonSize; theme: PushButtonThemeName; customTheme: PushButtonTheme; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.
  Type '{ state: PushButtonState; customTheme: PushButtonTheme; "custom-theme": PushButtonTheme; }' is missing the following properties from type 'Omit<Readonly<{ state: PushButtonState; size: PushButtonSize; theme: PushButtonThemeName;
    image
  • 6

    matching types better

    See if we give props something like UnwrapRef<>

    Type UnwrapRef<PushButtonTheme> is not assignable to type InferPropType<PropType<PushButtonTheme>>

Popular Tag

Related