# vue-twack

> Tailwind Snackbar plugin for Vue.JS

Latest version **0.1.4** (published 2020-07-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-twack
pnpm add vue-twack
yarn add vue-twack
bun add vue-twack
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2020-07-03 |
| First published | 2020-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 46.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Codepotato Limited |
| Maintainers | codepotatoltd |
| Keywords | vue plugin, snackbar, tailwind |

## Links

- npm: https://www.npmjs.com/package/vue-twack
- Repository: https://github.com/codepotatoltd/vue-twack
- Homepage: https://github.com/codepotatoltd/vue-twack#readme
- Issues: https://github.com/codepotatoltd/vue-twack/issues
- npm.io page: https://npm.io/package/vue-twack

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2020-07-03
- 0.1.3 — 2020-07-03
- 0.1.2 — 2020-07-03
- 0.1.1 — 2020-07-03
- 0.1.0 — 2020-07-03
- 0.0.1 — 2020-07-03

## README

# Vue Twackbar

A Vue.JS plugin for creating and displaying [snackbars](https://material.io/design/components/snackbars.html) styled using [TailwindCSS](https://tailwindcss.com).

Heavily inspired by [zerodois/vue-snack](https://github.com/zerodois/vue-snack) (Thank you!)

# Install

Install from npm:
```console
npm install --save vue-twack
```
```javascript
import Vue from 'vue'
import VueTwack from 'vue-twack' 
import 'vue-twack/dist/vue-twack.min.css'

Vue.use(VueTwack, options = { position: 'bottom-right', time: 3000 })
```

# Use
The plugin provides the `$twack` property in all components, this property contains all the methods configured to display the desired snackbar.

By default, the plugin contains three main display methods: `success`,` danger` and `show`. These methods present snackbars with preconfigured colors for success messages, error messages and standard messages, respectively. The text of the message in all cases have the same color, but the action button present in the snackbar varies in color depending on the method called.

Each method receives as a parameter a message string, or a configuration object. In case a string is received, the snackbar is only displayed with the text entered, without displaying an action button.

```javascript
/**** Using ****/

vm.$twack.metodo('My Message') // Displays a snackbar without action button

vm.$twack.metodo(config) // Displays a snackbar according to the given object

```

## Configure

The configuration object used in the presentation is simple and has the following structure:
```javascript
config = {
  text: String, // default ''
  button: String, // Default null
  action: Function // default null
}
```

## Personalize

### Creating methods

During the installation of the plugin, a configuration object is optional. The object in question can contain the `"methods"` key, which has the methods that can be executed from the `$snack` in each component. Each method in array must contain an associated color.

In addition, it is possible to inform the location that the snackbar will appear. Another configuration parameter is `"time"`, which specifies how many milliseconds the snackbar should be displayed. According to Google, a snackbar should last at least 5 and at most 10 seconds. The default value is 7.5 seconds.

Based on the new Gmail layout, the option to close the snackbar was made available. To the close icon be displayed, the `"close"` key must be set to `true` (the default is `false`).

The following is an example of a configuration object. If the `"methods"` key is undefined, the available methods are ` show`, `success` and` danger`, as previously stated.


```javascript
{
  // Possible values: 'top', 'top-left', 'top-right', 'bottom', 'bottom-left'
  // default 'bottom'
  position: String,
  // default 7500
  time: Number,
  // default false
  close: Boolean,
  // default []
  methods: [
    {
      // default ''
      name: String,
      // Any valid HTML color
      // default '#ecf0f1'
      color: String
    }
  ]
}
```

---
_Source: https://npm.io/package/vue-twack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._