I am getting Vue.js not detected for the latest Vue and the latest plugin version for both firefox and chrome browsers.
I am getting "not detected" for both
my Google Application Script web https://script.google.com/macros/s/AKfycbxfIx0rZbrlFcK0frgdqxb7QjXKkbPEGL0DHqRWpvgjGrDgc2fZ2NYBxHJomFu0tt-EPQ/exec
and this sample table Vue application I found https://ygnl5.csb.app/
BUT if I do mouse right button click on both pages and then inspect
- does NOT show Vue tab
- SHOWS Vue tab
So my conclusion is that iFrame that Google adds is causing the troubles
If I use the same code from my GAS application locally Vue is even detected
The code is
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// Vue.config.devtools = true
const app = Vue.createApp({
data() {
return {
vueWorks: true,
product: 'Socks',
inStockCount: 50,
}
}
})
const mountedApp = app.mount('#app')
})
</script>
<div id="app">
<p v-if="vueWorks">If you see this Vue works</p>
<p v-else>But if you see this then well Vue does not work</p>
<h1>{{ product }}</h1>
<input :value="inStockCount"> <!-- src attribute bound to the image data -->
<p v-if="inStockCount > 10">In Stock</p>
<p v-else-if="inStockCount <= 10 && inStockCount > 0">Almost sold out!</p>
<p v-else>Out of Stock</p>
</div>
</body>
</html>
