ネットで検索して見つかるトーストは、Vue2で使えるものが多い。
今回は、Vue3で使えるトーストを探してみました。
vue toast notification
Vue3に対応していて、GitHubのウォッチ数が多いトーストとして「vue toast notification」が見つかりました。
使い方が丁寧に書かれていて、使いやすそうなトーストです。
インストール
インストール環境
今回は、以下の環境に「vue toast notification」をインストールしました。
| ソフトウェア | バージョン |
|---|---|
| PHP | 8.2.6 |
| Laravel | 10.13.5 |
| Vue.js | 3.2.37 |
インストール手順
「vue toast notification」のインストール手順です。
npm install vue-toast-notification@^3Laravelのプロジェクトで「vue toast notification」を使えるようにします。
/resources/js/app.js を編集します。
import './bootstrap';
import { createApp } from 'vue';
const app = createApp({});
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
import ToastPlugin from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-bootstrap.css';
app.use(ToastPlugin);
app.mount('#app');トースト表示
トーストを表示させる場合には、以下のようなコードを書けばOKです。
/resources/js/components/ExampleComponent.vue を編集しています。
<template>
<button type="button" @click="showToast">show toast</button>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.');
},
methods: {
showToast() {
this.$toast.success('show toast!!!');
}
}
}
</script>ExampleComponent.vue を View から呼び出します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue-toast</title>
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
</html>ビルドします。
npm run buildサイトにアクセスした結果、トーストが表示できました！
デフォルト設定では、3秒でトーストが消えます。
オプションのパラメーターを変更することで、表示時間や表示位置を変更できます。
トーストを使いたい場合、Bootstrapを使う、自分で作る...いろいろな方法がありますが、「vue toast notification」を使うことで、やりたいことが簡単に実現できます。
また、オプションのパラメーターを変化させて、トーストの動きを確認できるデモページがあるので、動きを事前に確認することもできます。
Vue3でトーストを使いたい場合、「vue toast notification」を採用してみてはどうでしょうか。
コメント