vue toast

In this example below you will see how to do a vue toast with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0x00dec0de, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0x00dec0de ©
  • HTML
  • CSS
  • JavaScript
    <div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul class='tudus'>
    <transition-group name="list">
    <todo-item
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)">
      
      </todo-item>
     </transition-group> 
  </ul>
</div>

<!-- v-on:remove="todos.splice(index, 1)" !> 

/*Downloaded from https://www.codeseek.co/0x00dec0de/vue-toast-YvwOjE */
    .tudus {
  position: absolute; 
  right: 10px; 
  bottom: 10px; 
  overflow: hiden;
}

.list-enter-active {
  transition: all .2s ease;
}
.list-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.list-enter, .list-leave-to
{
  transform: translateX(10px);
  opacity: 0;
}


/*Downloaded from https://www.codeseek.co/0x00dec0de/vue-toast-YvwOjE */
    Vue.component('todo-item', {
  template: `
    <li v-on:mouseover="stopTimer()" v-on:mouseleave="startTimer()">
      {{ title }}
      <button v-on:click="$emit('remove') ">Remove</button>
    </li>
  `,
  data() {
    return {
      timer: '' 
    }
  },
  mounted() {this.startTimer()},
  methods:{
      stopTimer(){
        clearTimeout(this.timer ) 
      },
      startTimer(){
        this.timer =  setTimeout(function(){this.$emit('remove')}.bind(this), 5000)}
  },
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [],
    nextTodoId: 0
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

Comments