stuck at initializing product designer

[yensama7]

i tried integrating this in vue, but it kept loading and saying "initializing product designer" and didn't change from there

<script> export default { name: "TshirtDesigner", data() { return { fpd: null, appOptions: { productsJSON: './data/products/product-categories.json', designsJSON: './data/designs/design-categories.json', layouts: './data/layouts/data.json', langJSON: './data/langs/default.json', initialActiveModule: 'products', modalMode: '#open-modal', mainBarModules: [ 'products', 'images', 'text', 'designs', 'manage-layers', 'text-layers', 'save-load' ], fonts: [ { name: 'Lobster', url: 'google' }, { name: 'Aller', url: 'public/css/fonts/Aller.ttf', variants: { 'n7': 'fonts/Aller__bold.ttf', 'i4': 'fonts/Aller__italic.ttf', 'i7': 'fonts/Aller__bolditalic.ttf' } }, { name: 'Pacifico', url: 'fonts/Pacifico.ttf' }, ], textTemplates: [ { text: "Text Template Content", properties: { fontSize: 30, fontFamily: "Lobster" } }, { text: "Another Text Template", properties: { fontSize: 50, fontFamily: "Pacifico" } } ], fileServerURL: '', //enter the url to the file-handler.php, see https://github.com/radykal/fpd-js-server facebookAppId: '', instagramClientId: '', instagramRedirectUri: './data/html/instagram_auth.html', instagramTokenUri: '', //enter the url to the instagram-token.php, see https://github.com/radykal/fpd-js-server colorPickerPalette: ["#000", "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc", '#5f27cd', '#222f3e', '#10ac84'], pixabayApiKey: '', pixabayLang: 'en', pixabayHighResImages: false, elementParameters: {}, customImageParameters: { removable: true, draggable: true, resizable: true, autoCenter: true, price: 10, maxSize: 10, autoSelect: true, advancedEditing: true }, customTextParameters: { autoCenter: true, draggable: true, removable: true, colors: true, }, } } }, mounted() { try{ console.log("Initializing FancyProductDesigner..."); this.fpd = new FancyProductDesigner( document.getElementById('fpd-target'), this.pluginOpts, this.opts, ); // Listen for the ready event this.fpd.addEventListener('ready', () => { console.log("FancyProductDesigner is ready"); }); }catch (error) { console.error("Failed to initialize FancyProductDesigner:", error); } }, methods: { saveDesign() { // Get design data as a Data URL (base64 encoded image) const designDataURL = this.editor.toDataURL(); const accessToken = this.$store.state.accessToken || localStorage.getItem("accessToken"); // Send design to the backend using axios axios.post('http://localhost:8000/api/save-tshirt-design/', { image: designDataURL, }, { headers: { Authorization: `JWT ${accessToken}`, "Content-Type": "application/json", }, }) .then((response) => { if (response.data.status === "success") { alert("Design saved successfully!"); } else { alert("Failed to save the design."); } }) .catch((error) => console.error("Error:", error)); }, }, }; </script> <style scoped> /* Add your custom styling here */ #fpd-target { width: 100%; height: 100vh; } </style>