vue and vuetify in shopify app theme extension

I tried Vue and Vuetify CDN to load a v-btn in a .liquid file for shopify app extension but I'm facing an error Blocked script execution in 'https://online-store-web.shopifyapps.com/themes?embedded=...' because the document's frame is sandboxed and the 'allow-scripts' permission is not set. <div style="width: 80%; display:flex; align-items: center; justify-content: center;"> <v-btn color="primary" @click="onClickAction">Click Me</v-btn> </div> <!-- Vuetify 3 CSS --> <link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.css" rel="stylesheet"> <!-- Vue 3 and Vuetify 3 JS --> <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { const app = Vue.createApp({ data() { return {}; }, methods: { onClickAction() { console.log("hello"); } } }); app.use(Vuetify); app.mount('#app'); }); </script>

Comment (0)

You’ll be in good company