Vue.js+UIkit3 Notificaton Sample

by Nobuhiko Futagami

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.24/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.24/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.24/js/uikit-icons.min.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app" class="uk-section uk-section-secondary" uk-height-viewport>

  <div class="uk-flex uk-flex-center uk-flex-middle">
    <div class="uk-inline">
      <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
      <input class="uk-input" type="text" v-model="text">
    </div>
    <button class="uk-button uk-button-primary" type="button" @click="set">set</button>
  </div>

  <ul class="uk-list uk-text-center">
    <li v-for="m in messages">{{m}}</li>
  </ul>

  <button class="demo uk-button uk-button-primary uk-position-center" type="button" @click="show">Notification</button>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    text: "",
    messages: [
    	'add message here.'
    ]
  },
  methods: {
    set() {
        this.messages.push(this.text);
        this.text = "";
      },
      show() {
        this.messages.forEach(m => UIkit.notification(m, {
          status: 'success'
        }));
        this.messages = [];
      }
  }
})