Paypal sdk integration in vue 3 - vue.js

Usecase -
I have a PayPalButton vue file where I am loading the Paypal script.
I have to load 2 forms, each containing the above PayPalButton vue in a single page. So when I am rendering the PayPalButton vue twice the Paypal script is being added twice and getting zoid destroyed al components issue.
So when I am making sure the Paypal script is loaded only once, I am not having Paypal object in the window to invoke Buttons(). Currently, the Paypal Button is only shown in 1 form.

Related

Problem with loading direct link - Vue single page app

I have problem with Vue spa.
App work fine, when I go from some page to another.
App is e commerce and when I copy direct link of some product and send to someone I take to much time lo load that page, but when I click from list of product to specific product it load immediately.
Only direct link took too much time to load - like 10 sec.
I try remove some load function from page, but it's the same problem.
Are you using lazy loading in your app? If not, Vue Router will try to load all pages when the site is first opened.
You can see browser's console on network section
If you see that the files of all pages are loaded when the site is first opened, you are not using lazy loading.
That's all I can think of from the information you provided, I hope it helps.
Vue Router Lazy Loading

How to manually embed an Instagram post in vue.js in 2021

I want to insert the publicly available embed code, provided by Instagram for one post, into my vue.js app.
Instagram provides an embed snippet for any post in the 3 dots at the top right of any Instagram post.
If I paste this in my Vue template I get this error:
"Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed."
What does this mean and how can I get round it in Vue?
I have looked at several npm packages for embedding Instagram posts in Vue, but they all appear to have stopped working with Instagram's new nightmare authentication process. If I paste this into a vanilla html page (without Vue) it works fine.
I am using Gridsome with Vuetify.
Remove <script from embed code and import it in this way https://gridsome.org/docs/head/
I don't know if you figured this out already, but loading the script (as in the accepted answer) and executing this in the component solved this problem for me:
if (window.instgrm) window.instgrm.Embeds.process()

Vue 3 - Continue uploading files in the background while browsing the website

I would like to make a page with Vue 3 where a user could start an upload of a (very large) file, and after that he's able to go to other pages while the upload is still going on in the background. A plus would be a small widget showing me progress anywhere on a website, and a notification when the upload has completed.
I may have found something, but it's written only for Vue 2: https://github.com/Akryum/vue-router-multi-view
Well, the solution was actually quite simple... I've just put the upload component outside the router component in the main app template and everything worked.

How to make a shopify app/theme extension which would get displayed in the brand's store UI?

We have an application which integrates with Shopify Clothing stores. We run our application in an iframe inside the shopify store where it interacts with the store's user.
Right now this application gets integrated with Shopify manually by inserting our script tag inside the store's product page. Can someone tell me how I can do this using a shopify app or theme extension?
Edit after David's answer
Is it also possible for me to get information about standard buttons in the theme like the Add to Cart button or Change Variants input. Ideally I would like to get the selector for these.
You would create a Shopify App that asks for permission to write ScriptTags. The Apps simply installs a script tag pointing to your App. So when the merchant installs your App, they get the script tag. Depending on what your App does in that iframe, you may need your Shopify App to provide other support, but that is not detailed in your OP, so I leave it at that.

Script Tags in shopify checkout

I'm looking at developing an app for Shopify which will add functionality to a store's checkout page. It would be ideal if the user didn't have to copy and paste code into files themselves hence I was looking at using the ScriptTag API ( http://api.shopify.com/scripttag.html ) to include a custom javascript file.
I've worked through some of the examples on the aforementioned API page and can get a custom script included on every page on my test store except for the checkout page. I've changed the src to start with 'https://' as suggested by the tutorial but my script still doesn't run or even appear in the page source for the checkout.
Does anybody have any ideas how I can get this working for the checkout? Is what I'm trying to do even possible?
The only page of the checkout that script-tags are loaded into is the Thank You page that appears after an order has been completed.
The pages for steps 1 & 2 of the checkout cannot have script-tags added to them for security reasons.