Snackbar Message
Vuetify component that shows a message in a snackbar.
Dependencies
Install
npm install @lipn/snackbar-message
Use
- First of all, import the plugin.
import Vue from 'vue';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import SnackbarMessage from '@lipn/snackbar-message';
Vue.use(Vuetify);
Vue.use(SnackbarMessage);
new Vue({
el: '#app',
vuetify: new Vuetify(),
// Global access to the dialog via $root.$snackbar
mounted() {
this.$root.$snackbar = this.$refs.snackbar;
},
methods: {
async save() {
console.log('saving');
this.$root.$snackbar.show('Success', {
color: 'warning', multiline: false, timeout: 4000,
close: { text: 'OK', color: 'black' }
});
}
};- Insert component where you want to use it:
<html>
<body>
<div id="app">
<v-app>
<v-container>
<!-- snackbar -->
<snackbar-message ref="snackbar"></snackbar-message>
<!-- rest of the code -->
</v-container>
</v-app>
</div>
</html>