要は Snackbar や toasts などのメッセージを $on と $emit を使ってグローバルなイベントのやり取りをする感じ。
（これを global event bus というらしい）
npm install
- Nuxt (v2.6.3)
- Vuetify (v1.5.13)
- （Snackbar & toasts Component — Vuetify.js） を利用
- ほか適宜必要なライブラリ
plugins/event-bus.client.js 作成
import Vue from 'vue'
export default (ctx, inject) => {
inject('bus', new Vue())
}
nuxt.config.js にプラグイン登録
plugins: [
'~/plugins/event-bus.client.js'
]
Snackbars.vue コンポーネントを作成
<template>
<v-snackbar
v-model="isEnabled"
:color="color"
:multi-line="true"
:timeout="timeout"
top
>
{{ text }}
<v-btn
dark
flat
@click="isEnabled = false"
>
<v-icon>
close
</v-icon>
</v-btn>
</v-snackbar>
</template>
<script>
export default {
data () {
return {
isEnabled: false,
text: '',
color: 'success',
timeout: 5000
}
},
created () {
this.$bus.$on('snackbar:success', (text) => {
this.isEnabled = !!text
this.text = text
})
this.$bus.$on('snackbar:error', (text) => {
this.isEnabled = !!text
this.text = text
this.color = 'error'
this.timeout = 0
})
}
}
</script>
layouts/default.vue
<template>
<v-app>
<v-content>
<nuxt />
</v-content>
<Snackbars />
</v-app>
</template>
<script>
import Snackbars from '@/components/common/Snackbars'
export default {
components: {
Snackbars
}
}
</script>
pages/index.vue
<template>
<v-btn
@click="successBtn"
>
successBtn
</v-btn>
<v-btn
@click="errorBtn"
>
errorBtn
</v-btn>
</template>
<script>
export default {
methods: {
successBtn () {
this.$bus.$emit('snackbar:success', 'success!!!1')
}
errorBtn () {
this.$bus.$emit('snackbar:error', 'error!!!1')
}
}
}
</script>
これで successBtn と errorBtn を押すと Snackbars でメッセージが表示されるはず。