fix(pip): check for https support (#522)

Author: arashsheyda

packages/devtools/client/components/PictureInPictureButton.vue

@@ -2,6 +2,7 @@
 const client = useClient()
 
 const isInPopup = window.__NUXT_DEVTOOLS_IS_POPUP__
+const isHttps = computed(() => window.location.protocol === 'https:')
 
 const showInfo = ref(false)
 const copy = useCopy()
@@ -17,7 +18,7 @@ function popup() {
 
 <template>
   <template v-if="!isInPopup">
-    <NButton v-if="client?.devtools.popup" n="sm primary" @click="popup()">
+    <NButton v-if="client?.devtools.popup && isHttps" n="sm primary" @click="popup()">
       <div carbon-launch /> Popup
     </NButton>
     <template v-else>
@@ -45,6 +46,12 @@ function popup() {
           </NButton>
           and restart the browser.
         </p>
+        <NTip v-if="!isHttps" class="mb-4" n="orange">
+          Please note that the popup feature only works when your server is running under HTTPS.
+          <NuxtLink to="https://nuxt.com/docs/api/nuxt-config#https" target="_blank">
+            Learn how to run your server with https on Nuxt's Documentation
+          </NuxtLink>
+        </NTip>
         <div>
           <NButton @click="showInfo = false">
             Close