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') }