Never-ending Pumpkin Mulch

    @thinknimble/vue3-alert-alert

    0.0.6 • Public • Published

    🚨 Alert! Alert! for VueJS

    A minimalist alert plugin for VueJS projects.

    Install from npm:

    npm install vue-alert-alert
    

    Add the plugin to your Vue project (don't forget to include the css file as well!):

    import '@thinknimble/vue3-alert-alert/dist/vue3-alert-alert.css'
    import AlertAlert from '@thinknimble/vue-alert-alert'
    
    createApp(App).use(AlertPlugin,configuration).mount('#app')

    Add the <alert-alert> component to the root of your app (ex: App.vue):

    <template>
      <div id="app">
        <alert-alert />
      
      </div>
    </template>

    Use the plugin (options api)

    this.$Alert.alert({
      type: 'success',
      message: `
        <h2>Success!</h2>
        <p>Your work has been saved.</p>
      `,
      timeout: 6000,
    })

    Use the plugin (composition api)

    const $Alert = inject('$alert')
    
    $Alert.alert({
      type: 'success',
      message: `
        <h2>Success!</h2>
        <p>Your work has been saved.</p>
      `,
      timeout: 6000,
    })

    Use the plugin (composition api TS)

    import import { $alert } from '@/plugins'
    
    const $Alert = inject($alert)
    
    $Alert.alert({
      type: 'success',
      message: `
        <h2>Success!</h2>
        <p>Your work has been saved.</p>
      `,
      timeout: 6000,
    })

    Additional Configuration (set some defaults)

    let configuration = {
        type:'error',
        timeout:1000,
        message:'<h3>Add a default message </h3>'
    }
    
    createApp(App).use(AlertPlugin,configuration).mount('#app')
    <template>
      <div id="app">
        <alert-alert position="lt"/>
      
      </div>
    </template>

    Available Options

    • type - May be: 'info', 'success', 'warning', or 'error'. This sets the CSS class on the alert with an appropriate color. Defaults to 'info'.
    • message - The text to show in the alert. You may use HTML mark-up. Defaults to 'No Content'
    • timeout - Auto-dismiss the alert after the given timeout (in milliseconds). Defaults to null.
    • position rt', 'lt', 'rb', 'lb'

    Keywords

    none

    Install

    npm i @thinknimble/vue3-alert-alert

    DownloadsWeekly Downloads

    7

    Version

    0.0.6

    License

    none

    Unpacked Size

    773 kB

    Total Files

    10

    Last publish

    Collaborators

    • ezraschwartz
    • web3wes
    • mertozka
    • bwennuh
    • oudeismetis
    • nimble-william
    • pb1646atn
    • thinknimbleneil
    • bruno-thinknimble
    • itsmikaelokay
    • jpdephillips
    • mkeeley96