Currently delving into Vue and Vue 3 while coding an application on Google Apps Script.
Following tutorials from Vue Mastery and stumbled upon a remarkable example by @brucemcpherson of a Vue 2 app functioning on GAS, which proved to be too challenging in certain aspects for me to grasp.
GitHub: https://github.com/brucemcpherson/bmVuetemplate
Encountering difficulty with components in GAS and Vue interplay, seeking assistance.
Here are the files I'm working with:
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<h1>{{ product }}</h1>
</my-component></my-component>
</div>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d6d5c5e0938e908e908dc2c5d4c18e9192">[email protected]</a>/dist/vue.global.js"></script>
<?!= include("main-js"); ?>
<?!= include("my-component"); ?>
<script>
const mountedApp = app.mount('#app')
</script>
</body>
</html>
utils.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
main-js.html
<script>
const app = Vue.createApp({
data() {
return {
product: 'Socks'
}
}
})
</script>
my-component.html
<script>
app.component('my-component', {
template: `<div>My component content</div>`,
data() {
return {
product: 'Boots'
}
}
})
</script>
Seeing a warning on the console:
dropping postMessage.. was from host https://script.google.com but expected host https://n-jogxx7ovu3afq6djr4pskwjsglfwozzlkf5baay-0lu-script.googleusercontent.com
In both scenarios, nothing appears to happen: my component doesn't display when index.html is loaded.
Any insights on what the issue might be? Appreciate any help provided! Thanks!