JSFiddle - React, Tailwind, and code Playground

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
  <el-button plain @click="open3">
    Success
  </el-button>
  <el-button plain @click="open4">
    Warning
  </el-button>
  <el-button plain @click="open5">
    Info
  </el-button>
  <el-button plain @click="open6">
    Error
  </el-button>
</template>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

Babel + JSX

var Main = {
    methods: {
      open3() {
        this.$notify({
          //title: 'Success',
          message: 'This is a success message',
          //type: 'success'
        });
      },

      open4() {
        this.$notify({
          title: 'Warning',
          message: 'This is a warning message',
          type: 'warning'
        });
      },

      open5() {
        this.$notify.info({
          title: 'Info',
          message: 'This is an info message'
        });
      },

      open6() {
        this.$notify.error({
          title: 'Error',
          message: 'This is an error message'
        });
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')