Is it possible to call a component method in nuxt from a page? - vue.js

Question

I'm starting to work with Vue.js and I'm using Nuxt.js.
I've created a component (a snackbar) and inside this component I created a method "showSnackbar" that works passing 2 parameters: color and text.
So when I call showSnackbar(color,text), it appears.
But, I want to call this method from a page. Because I want to use this snackbar in some pages and I don't want to write the same code all the time, so that's the reason why I decided to create a component. But I can't call from a page the method inside this component.
And that's why I wonder if is it that possible to call a component method from a page (where of course I import the component)

Answer 1

There might be a couple of ways to do it, I would create a plugin.
Then you have both <snackbar/> component for placement and a global API to call the invoking method this.$snackbar.open({someOptions: '...'})
For example:
Create a folder in ./plugins/snackbar and place the following in:
./plugins/snackbar/index.js
import Vue from "vue";
import snackbar from "~/plugins/snackbar/snackbar";
Vue.use(snackbar);
This is for nuxt.config.js, to load globally. Which looks like:
...
/*
** Plugins to load before mounting the App
** Doc: https://nuxtjs.org/guide/plugins
*/
plugins: ["~/plugins/snackbar/index.js"],
...
ok, now create
./plugins/snackbar/snackbar.js
This is the plugin which holds state for the component and acts as an event proxy
import snackbar from "~/plugins/snackbar/snackbar.vue";
const Plugin = {
install(Vue, options = {}) {
/**
* Makes sure that plugin can be installed only once
*/
if (this.installed) {
return;
}
this.installed = true;
/**
* Create event bus
*/
this.event = new Vue();
/**
* Plugin methods
*/
Vue.prototype.$snackbar = {
show(options = {}) {
Plugin.event.$emit("show", options, true);
}
};
/**
* Registration of <snackbar/> component
*/
Vue.component("snackbar", snackbar);
}
};
export default Plugin;
and now...
./plugins/snackbar/snackbar.vue
Where the magic happens...
<template>
<div>
<transition name="snackbar">
<div v-if="show" :class="['snackbar', 'box-shadow', type]">
<slot>{{ options.text }}</slot>
</div>
</transition>
<pre>options: {{ options }}</pre>
<pre>show: {{ show }}</pre>
<pre>type: {{ type }}</pre>
</div>
</template>
<script>
import snackbar from "~/plugins/snackbar/snackbar";
export default {
data: () => ({
options: {
text: "",
type: ""
},
show: false,
type: "",
timer: 0
}),
beforeMount() {
snackbar.event.$on("show", options => {
this.options = options;
this.type = options.type;
this.show = true;
this.close(this.options.closeWait || 3000);
});
},
methods: {
close(timeout) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.show = false;
}, timeout);
}
}
};
</script>
<style>
.snackbar {
min-width: 300px;
margin-left: -150px;
background-color: #F48024;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
}
.snackbar.success {
background-color: rgb(71, 244, 36);
}
.snackbar.danger {
background-color: rgb(244, 36, 47);
}
.snackbar-enter-active {
animation: snackbar-in 0.8s;
}
.snackbar-leave-active {
animation: snackbar-in 0.8s reverse;
}
#keyframes snackbar-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.box-shadow {
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>
Then within any component/pages which uses it, you can place with <snackbar/>, and call the methods like:
this.$snackbar.show({
text: "Hello, snackbar!",
type: "success"
});
A working example of the above can be found here https://codesandbox.io/s/codesandbox-nuxt-oeo4h