fix: ensure ad fallback content is visible when ads are blocked (#401)

Co-authored-by: Harlan Wilton <[email protected]>

Author: nexoscreator

playground/pages/third-parties/google-adsense/nuxt-scripts.vue

@@ -67,12 +67,17 @@ watch(() => route.query.format, (newFormat) => {
         >
           <template #awaitingLoad>
             <div class="text-white text-xl">
-              ...waiting
+              ...waiting to Ads
             </div>
           </template>
           <template #loading>
             <div class="text-white text-xl">
-              ...loading
+              ...Loading Ads
+            </div>
+          </template>
+          <template #error>
+            <div class="text-white text-xl">
+              ...Ad-Blocker detected
             </div>
           </template>
         </ScriptGoogleAdsense>

src/runtime/components/ScriptGoogleAdsense.vue

@@ -74,19 +74,20 @@ const rootAttrs = computed(() => {
 </script>
 
 <template>
-  <ins
-    ref="rootEl"
-    class="adsbygoogle"
-    style="display: block;"
-    :data-ad-client="addClient"
-    :data-ad-slot="dataAdSlot"
-    :data-ad-format="dataAdFormat"
-    :data-ad-layout="dataAdLayout"
-    :data-full-width-responsive="dataFullWidthResponsive"
-    v-bind="rootAttrs"
-  >
+  <div>
+    <ins
+      ref="rootEl"
+      class="adsbygoogle"
+      style="display: block;"
+      :data-ad-client="addClient"
+      :data-ad-slot="dataAdSlot"
+      :data-ad-format="dataAdFormat"
+      :data-ad-layout="dataAdLayout"
+      :data-full-width-responsive="dataFullWidthResponsive"
+      v-bind="rootAttrs"
+    />
     <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
     <slot v-else-if="status === 'loading'" name="loading" />
     <slot v-else-if="status === 'error'" name="error" />
-  </ins>
+  </div>
 </template>