update nuxt sample and readme;

Author: Cube-J

1.hello-world/8.read-video-nuxtjs/.gitignore

@@ -6,3 +6,4 @@ node_modules
 .output
 .env
 dist
+.DS_Store

1.hello-world/8.read-video-nuxtjs/README.md

@@ -33,19 +33,16 @@ const showImgDecode = () => {
 
 <template>
   <div className="helloWorld">
+    <h1>Hello World for Nuxt</h1>
     <div class="btn-group">
-      <ClientOnly>
-        <button :style="{ marginRight: '10px', backgroundColor: bShowScanner ? 'rgb(255,174,55)' : 'white' }"
-          @click="showScanner">Video Decode</button>
-        <button :style="{ backgroundColor: bShowImgDecode ? 'rgb(255,174,55)' : 'white' }" @click="showImgDecode">Image
-          Decode</button>
-      </ClientOnly>
+      <button :style="{ marginRight: '10px', backgroundColor: bShowScanner ? 'rgb(255,174,55)' : 'white' }"
+        @click="showScanner">Video Decode</button>
+      <button :style="{ backgroundColor: bShowImgDecode ? 'rgb(255,174,55)' : 'white' }" @click="showImgDecode">Image
+        Decode</button>
     </div>
     <div class="container">
-      <ClientOnly>
-        <VideoDecode v-if="bShowScanner"></VideoDecode>
-        <ImgDecode v-if="bShowImgDecode"></ImgDecode>
-      </ClientOnly>
+      <VideoDecode v-if="bShowScanner"></VideoDecode>
+      <ImgDecode v-if="bShowImgDecode"></ImgDecode>
     </div>
   </div>
 </template>
@@ -65,6 +62,10 @@ button {
   width: 80vw;
 }
 
+.applogo {
+  height: 25px;
+}
+
 .helloWorld {
   display: flex;
   flex-direction: column;
@@ -75,4 +76,8 @@ button {
   height: 100%;
   color: #455a64;
 }
-</style>
+
+h1 {
+  font-size: 1.5em;
+}
+</style>

1.hello-world/8.read-video-nuxtjs/components/HelloWorld.vue

@@ -45,4 +45,4 @@ onBeforeUnmount(async () => {
   height: 90%;
   border: 1px solid black
 }
-</style>
+</style>

1.hello-world/8.read-video-nuxtjs/components/ImgDecode.vue

@@ -221,4 +221,4 @@ onBeforeUnmount(async () => {
     top: 97%;
   }
 }
-</style>
+</style>

1.hello-world/8.read-video-nuxtjs/components/VideoDecode.vue

@@ -9,8 +9,8 @@ BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
 /** 
  * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. 
  * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
- * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.10&utm_source=github#specify-the-license or contact [email protected].
+ * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.11&utm_source=github#specify-the-license or contact [email protected].
  * LICENSE ALERT - THE END 
  */
 
-BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/[email protected].10/dist/";
+BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/[email protected].11/dist/";

1.hello-world/8.read-video-nuxtjs/dbr.ts

@@ -8,9 +8,9 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "^3.2.0"
+    "nuxt": "^3.2.3"
   },
   "dependencies": {
-    "dynamsoft-javascript-barcode": "9.6.10"
+    "dynamsoft-javascript-barcode": "^9.6.11"
   }
 }

1.hello-world/8.read-video-nuxtjs/package.json

@@ -68,7 +68,6 @@ Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programm
 
 This sample shows how to use the SDK in a web page based on ES6 (also known as ECMAScript 2015 or ECMAScript 6).
 
-
 ## Hello World with WebView
 
 This sample shows how to use Mobile SDK in web pages through webview, you can read more in moblie samples repository:[Android](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/main/android/JavaScript/WebViewBarcodeScanning)/[iOS](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/main/ios/JavaScript/WebViewBarcodeScanning).