how to include a toasted property in vue

To include the Toasted property in Vue, follow these steps:

1. Install the Toasted package using npm or yarn:

npm install vue-toasted

or

yarn add vue-toasted

1. Import the Toasted package in your Vue component:

import Toasted from 'vue-toasted'

1. Register the Toasted plugin globally in your Vue application:

Vue.use(Toasted)

1. Add the Toasted component to your template where you want to display the toast messages:

<toasted></toasted>

1. Use the Toasted property in your Vue methods or computed properties. For example, you can use it to show a success message:

methods: {
  showToast() {
    this.$toasted.success("Toast message!")
  }
}

1. Customize the Toasted options if needed. You can pass an object as the second argument to the Toasted method to specify options such as position, duration, theme, etc. For example:

methods: {
  showToast() {
    this.$toasted.success("Toast message!", {
      position: 'bottom-center',
      duration: 3000,
      theme: 'bubble'
    })
  }
}

That's it! Now you have successfully included the Toasted property in Vue and can use it to display toast messages in your application.