From 8aa1198ad824ef47a3483efbe0ec309fa0affe45 Mon Sep 17 00:00:00 2001
From: haroonth <kittisak.ma@logicspark.com>
Date: Mon, 11 Nov 2024 10:29:39 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Update=20how=20to=20validate=20V?=
 =?UTF-8?q?PV's=20license?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppPdfViewer.vue | 95 ++++++++++++++++-----------------
 1 file changed, 47 insertions(+), 48 deletions(-)

diff --git a/src/components/AppPdfViewer.vue b/src/components/AppPdfViewer.vue
index b7126d5..49311f6 100644
--- a/src/components/AppPdfViewer.vue
+++ b/src/components/AppPdfViewer.vue
@@ -1,54 +1,53 @@
 <script>
-  import { defineComponent } from 'vue'
-  import { VPdfViewer, VPVBaseProps, useLicense } from '@vue-pdf-viewer/viewer';
-  export default defineComponent({
-    components: { VPdfViewer },
-    props: {
-      ...VPVBaseProps,
-      title: {
-        type: String,
-      },
-    },
-    data () {
-      return {
-        // Initially, we assume the license is not validated
-        isValidated: false,
-        // License information will be stored here once the `useLicense` hook is called
-        license: null
-      }
-    },
-    watch: {
-      license(v) {
-        // Watch the `license` data property
-        // When `license` is updated, check if it contains a valid `licenseKey`
-        if (v?.licenseKey) {
-          // If the `licenseKey` is present, mark the license as validated, or you can add your logic
-          this.isValidated = true
-        }
-      }
-    },
-    mounted() {
-      // Call the `useLicense` hook with the license key inside the `mounted` lifecycle hook
-      const licenseKey = 'your-license-key';
+	import { defineComponent } from "vue";
+	import { VPdfViewer, VPVBaseProps, useLicense } from "@vue-pdf-viewer/viewer";
+	export default defineComponent({
+		components: { VPdfViewer },
+		props: {
+			...VPVBaseProps,
+			title: {
+				type: String,
+			},
+		},
+		data() {
+			return {
+				// Initially, we assume the license is not validated
+				isValidated: false,
+				// License information will be stored here once the `useLicense` hook is called
+				license: null,
+			};
+		},
+		watch: {
+			license(v) {
+				// Watch the `license` data property
+				// When `license` is updated, check if it contains a valid `licenseKey`
+				if (v?.licenseKey) {
+					// If the `licenseKey` is present, mark the license as validated, or you can add your logic
+					this.isValidated = true;
+				}
+			},
+		},
+		beforeMount() {
+			// Call the `useLicense` hook with the license key inside the `beforeMount` lifecycle hook
+			const licenseKey = "your-license-key";
 
-      // This calls `useLicense` which typically returns an object with license data
-      const res = useLicense({ licenseKey });
-
-      // Assign the license data to the component's `license` property
-      // which will trigger the watcher when the data is updated
-      this.license = res.license;
-    }
-  })
+			// This calls `useLicense` which typically returns an object with license data
+			const res = useLicense({ licenseKey });
+			// // Assign the license data to the component's `license` property
+			// // which will trigger the watcher when the data is updated which you can log to see how it looks like
+			this.license = res.license;
+		},
+	});
 </script>
 
 <template>
-  <div>
-    <h2>
-      {{ title }}
-    </h2>
-    <!-- If the license is validated, show the VPdfViewer component, so the watermark will be gone -->
-    <div v-if="isValidated" :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
-      <VPdfViewer v-bind="$props" />
-    </div>
-  </div>
+	<div>
+		<h2>
+			{{ title }}
+		</h2>
+		<!-- If the license is validated, show the VPdfViewer component, so the watermark will be gone -->
+		<div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
+			<VPdfViewer v-bind="$props" />
+		</div>
+	</div>
 </template>