Query: I’m trying to load components that are built using stencil.js. The issue is I want to load all components which I’m using in my project in one API call instead of multiple calls.
Main.js in vue project
import Vue from 'vue'
import App from './App.vue'
import {
applyPolyfills,
defineCustomElements
} from "@freshworks/crayons/loader";
Vue.config.productionTip = false
applyPolyfills().then(() => defineCustomElements());
new Vue({
render: h => h(App),
}).$mount('#app')
> App.js File
<template>
<div id="app">
<fw-modal id='switchTabModal'
title-text="HI MODAL"
@fwClosed='onClose'
@fwAction='onConfirm'
:visible='isModalEnable'
/>
<button @click="onOpen">OPEN MODAL</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: "",
isModalEnable: false,
};
},
computed: {
getModelOpen() {
return this.isModalEnable;
},
getMessage(){
return ''
}
},
methods: {
onClose() {
this.isModalEnable = false;
},
onOpen() {
this.isModalEnable = true;
},
onConfirm() {
this.onOpen()
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Ref: [VueJS Integration with Stencil | Stencil](https://Stencil Framework Integration Doc with Vue)
Expected: If I can bundle and load all components in one API call, there will be room for other API calls instead of blocking my API call limit (Default parallel call supported in chrome 6).
Note: Attached network call’s image for reference.
