@codamic/nuxt-vuetify-snack-stack v1.0.3
Nuxt Vuetify Snack Stack
This is a nuxt module which allows you to show stackable vuetify snacks from anywhere in your application
Dependencies
- Nuxt 2 with nuxt-bridge
- @nuxtjs/vuetify
Setup
- Make sure you have
@nuxt/vuetify
installed on your nuxt project - If you haven't yet activate the nuxt store (simply put a empty index.ts in /store folder)
- Add
@codamic/nuxt-vuetify-snack-stack
dependency to your project
npm install @codamic/nuxt-vuetify-snack-stack
- Add
@codamic/nuxt-vuetify-snack-stack
to themodules
section ofnuxt.config.js
{
modules: [
// Simple usage
'@codamic/nuxt-vuetify-snack-stack',
// With options
['@codamic/nuxt-vuetify-snack-stack', { /* module options */ }]
]
}
- Add the
<NuxtVuetifySnackStack />
component to your nuxt layout
Using top level options
{
modules: [
'@codamic/nuxt-vuetify-snack-stack'
],
snackStack: {
/* module options */
}
}
Configuration
default configuration
snackStack: {
timeout: 5000,
types: {
error: {
icon: 'mdi-alert-circle-outline',
color: 'error',
},
info: {
icon: 'mdi-information-outline',
color: 'info',
},
warning: {
icon: 'mdi-alert-outline',
color: 'warning',
},
success: {
icon: 'mdi-check-circle-outline',
color: 'success',
},
},
}
timeout: Number
set a new default timeout for all snacks
types: Object
Yout can simply add new types and change the existing one in your nuxt.config.ts
snackStack: {
types: {
custom: {
icon: 'custom-icon',
color: 'custom-color',
},
info: {
icon: 'custom-info-icon',
color: 'custom-info-color',
timeout: 3000
}
}
}
Usage
Options API
You can call the snack plugin from any component in your project with $snack
(or under your custom defined namespace)
show a snack
this.$snack.showSnack('Awesome Message')
show a snack with options
this.$snack.showSnack({
text: 'Error Message',
type: 'error',
timeout: 4242,
})
Compositions API
useSnack().showSnack('Awesome Message')
const { showSnack, ... } = useSnack()
Methods
.showSnack(msg: SnackMessage | string)
show Snack
.showSnackWithType(type: string, msg: SnackMessage | string)
show Snack
.showInfoSnack(msg: SnackMessage | string)
show info snack
.showErrorSnack(msg: SnackMessage | string)
show error snack
.showWarningSnack(msg: SnackMessage | string)
show warning snack
.showSuccessSnack(msg: SnackMessage | string)
show success snack
SnackMessage
{
text: String,
timeout: Number,
icon: String,
color: String, // Vuetify color or HEX RGB RGBA color value
}
Development
- Clone this repository
- Install dependencies using
npm install
Test
- Clone this repository
- Install dependencies using
npm install
- run unit tests
npm run test
License
Copyright (c) Codamic Innovations GmbH