Tv Modal

This requires Nuxt.js with the Tailwind CSS module

Quick Setup

1. Add the nuxt-tailvue dependency to your Nuxt.js project

   npm install nuxt-tailvue
   # OR
   yarn add nuxt-tailvue
   

2. Add nuxt-tailvue to the modules section of nuxt.config.js

   {
     modules: [
    ['nuxt-tailvue', {modal: true}],
     ]
   }
   

3. If you're using Purge, add this module to the content section of tailwind.config.js

module.exports = {
    content: [
      'node_modules/tv-*/dist/tv-*.umd.min.js'
    ] 
  }

To use with Nuxt Windi CSS, add this module to your windi.config.js

import { defineConfig } from  'windicss/helpers'
    export  default  defineConfig({
    extract: {
        include: ['node_modules/tv-*/dist/tv-*.umd.min.js'],
    },
})

Usage

• Actions are buttons from tv-button
• Combining toasts from tv-toast

 this.$modal.show({
    type: 'danger',
    title: 'This is the title property',
    body: 'This is the body property.  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam laudantium explicabo pariatur iste dolorem animi vitae error totam.',
    primary: {
      label: 'Primary Action',
      theme: 'red',
      action: () => this.$toast.success('Primary Button clicked'),
    },
    secondary: {
      label: 'Secondary Button',
      theme: 'white',
      action: () => this.$toast.info('Clicked Secondary'),
    },
  })

Options

type String

• Optional, Default: info
• Acceptable: success, info, danger, warning

  title String

• Optional, Default: false

  body String

• Required

  primary Object

• Optional, Default: false
• Example: { label: 'Button Face', theme: 'indigo-light', action: () => console.log('clicked') }

  secondary Object

• Optional, Default: false
• Example: { label: 'Button Face', theme: 'indigo-light', action: () => console.log('clicked') }