Vue 3 support

Versions

• 1.7.6

Describe the bug

Currently, all examples are targeting Vue 2. As the project claims to be compatible with Vue 3, it would be great to see an example implementation.

I tried implementing my own example but failed, but this might just be because I do not have much experience with plugins or Vue in general. I am currently working on a Vue 3 project and would like to use the toast notfications in my project. However, simply bumping the dependency in the code sandbox to ^3.0.0-beta.1 does not work.

Instead, I tried to add the plugin directly into the project. The relevant parts of my project look as follows.

// App.vue

<script lang="ts">
import { provideToast } from "vue-toastification/composition";
import "vue-toastification/dist/index.css";

export default {
    name: 'App',
    components: {
        
    },
    setup() {
        // Pass the Plugin Options here
        provideToast({ timeout: 3000 });
        // This is similar to `Vue.use(Toast)`, but will not register `$toast` to the Vue instance.
    }
}
</script>

// main.ts

import { createApp } from 'vue';
import App from './App.vue';
import Router from './router';
import {store} from './store/store';
import './assets/styles/index.css';

const app = createApp(App);
app.use(Router);
app.use(store);
app.mount('#app');

stacktrace:

index.js?6c42:272 Uncaught TypeError: Cannot read property 'extend' of undefined
    at eval (index.js?6c42:272)
    at Module../node_modules/vue-toastification/dist/esm/index.js (chunk-vendors.js:2448)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (index.js?04b0:17)
    at Object../node_modules/vue-toastification/composition/index.js (chunk-vendors.js:2436)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (App.vue?1f00:2)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/index.js?!./src/App.vue?vue&type=script&lang=ts (app.js:938)

Expected behavior

The provide function should work and I should be able to then use the features.

Your Environment

“vue”: “^3.0.0-beta.1”, “vue-toastification”: “^1.7.6” (I think nothing else is relevant here, but let me know if that assumption is wrong.)

Additional context

If you got it working with Vue3, I would be very happy with a working example.

[Maronato]

Hello, @patrickfnielsen! Good news! v2.0.0-beta.3 has been released and it now supports Vue 3. Support for Vue 2 has been dropped in v2+, but will continue on v1.x.

You can try it out by installing with the next tag, yarn add vue-toastification@next.

Please take a look at the docs, since some things have changed.

[patrickfnielsen]

Vue3 is now in RC, so there should be no more breaking changes. Any update on when we can expect a version that’s compatible with Vue3?