From 928b2f7843f538c56c6611deb0e05e2e1d806e49 Mon Sep 17 00:00:00 2001
From: Michael Tintiuc <michaeltintiuc@users.noreply.github.com>
Date: Sat, 2 Mar 2019 20:03:38 +0200
Subject: [PATCH]  docs(vue): add loading usage vue docs (#17661)

---
 core/src/components/loading/usage/vue.md | 48 ++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 core/src/components/loading/usage/vue.md

diff --git a/core/src/components/loading/usage/vue.md b/core/src/components/loading/usage/vue.md
new file mode 100644
index 0000000000..8d13f5f849
--- /dev/null
+++ b/core/src/components/loading/usage/vue.md
@@ -0,0 +1,48 @@
+```vue
+<template>
+  <IonVuePage :title="'Loading'">
+    <ion-button @click="presentLoading">Show Loading</ion-button>
+    <br />
+    <ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
+  </IonVuePage>
+</template>
+
+<script>
+export default {
+  props: {
+    timeout: { type: Number, default: 1000 },
+  },
+  methods: {
+    presentLoading() {
+      return this.$ionic.loadingController
+        .create({
+          message: 'Loading',
+          duration: this.timeout,
+        })
+        .then(l => {
+          setTimeout(function() {
+            l.dismiss()
+          }, this.timeout)
+          return l.present()
+        })
+    },
+    presentLoadingWithOptions() {
+      return this.$ionic.loadingController
+        .create({
+          spinner: null,
+          duration: this.timeout,
+          message: 'Please wait...',
+          translucent: true,
+          cssClass: 'custom-class custom-loading',
+        })
+        .then(l => {
+          setTimeout(function() {
+            l.dismiss()
+          }, this.timeout)
+          return l.present()
+        })
+    },
+  },
+}
+</script>
+```