#問題
vue-toastificationを導入したが以下のエラーが発生
client.js?06a0:102 TypeError: Cannot read properties of undefined (reading 'clear')
at VueComponent.eval (utils.js?8649:19:1)
at VueComponent.noti (index.vue?6ced:90:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
at VueComponent.invoker (vue.runtime.esm.js?2b0e:2188:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3903:1)
at VueComponent.click (vuetify.js?ce5b:2609:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2188:1)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6961:1)
#環境
package.json
{
"name": "toast_test",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.13.6",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vue-toastification": "^1.7.14",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
},
"devDependencies": {
"@nuxtjs/vuetify": "^1.12.3"
}
}
index.vue
<template>
<v-btn @click="noti">押す</v-btn>
</template>
<script>
import { TYPE } from "vue-toastification";
export default {
name: 'IndexPage',
methods: {
noti() {
this.$showToast('エラー', TYPE.ERROR);
},
}
}
</script>
全体で使える関数を作るため、pluginsディレクトリにutils.jsを作成。
※これでthis.$showToastが使用できるようになる。
参考:https://qiita.com/itouuuuuuuuu/items/bcad408842c7723e7ca3
plugins/utils.js
const fixPath = (_path) => {
return `${_path}/`;
}
import { TYPE } from "vue-toastification";
export default ({$toast}, inject) => {
inject('fixPath', fixPath);
/**
* @param _text
* @param _type TYPE(from vue-toastification)
*/
inject('showToast', (_text, _type) => {
// 既存のトーストを全削除
$toast.clear();
//if (_type == TYPE.SUCCESS) {
$toast(_text, { type: _type });
});
}
nuxt.config.js
~抜粋~
plugins: [
'@/plugins/utils',
],
#詳細
エラーメッセージからすると問題の発生は、utils.js内の $toast.clear(); の箇所。
$toastがどうも取得できていないらしい。
#解決
nuxt.config.jsのmodulesにvue-toastificationの記載がなかった。
(修正前)nuxt.config.js
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
],
(修正前)nuxt.config.js
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
"vue-toastification/nuxt",
],
#所感
最初に導入する際はmodulesの記載を忘れることなんて無いんですが、別プロジェクトを参考に持ってくると一部記述が漏れていて正常に動作しないなんてことは発生しがちですね...。
とりあえず解決です。ありがとうございました