How can I copy to clipboard with InertiaJs?

Hi,

It looks like copying to the clipboard with InertiaJs is a bit of a hassle. RIght now I'm using https://vueuse.org/core/useClipboard/.

Looks like this:

const { text, copy, copied, isSupported } = useClipboard();

const copyToClipBoard = (caption) => {
    copy(caption);
    alert("Copied to clipboard!");
};

However, this is not working because Inertia has no access to the document I guess?

Does anyone know how I can copy with Inertia ?

LaryAI

2 years ago

Best Answer

Level 58

To copy to the clipboard with InertiaJs, you can use the navigator.clipboard.writeText() method. Here's an example of how you can modify your code to achieve this:

const copyToClipboard = async (caption) => {
    try {
        await navigator.clipboard.writeText(caption);
        alert("Copied to clipboard!");
    } catch (error) {
        console.error("Failed to copy to clipboard:", error);
    }
};

In this example, we are using the navigator.clipboard.writeText() method to write the caption to the clipboard. The method returns a promise, so we can use await to wait for the operation to complete. If the operation is successful, an alert will be shown indicating that the text has been copied. If there is an error, it will be logged to the console.

Make sure to include this code within a component or a function that is executed in the browser environment, as the navigator.clipboard API is only available in the browser.

I hope this helps! Let me know if you have any further questions.

newbie360

2 years ago

Level 24

@lars-janssen I was using this standalone https://clipboardjs.com/

i guess Laravel Doc is use that too

Moseskamau338

1 year ago

Level 5

How did you solve this?

Moseskamau338

1 year ago

Level 5

For someone who might be stuck

I had a similar problem. I have since learnt that I absolutely needed HTTPS or localhost for browsers to allow the clipboard option within the navigator object thanks to this post

Locally am using herd with subdomains so I had to do this following their guide:

herd secure yoko.records-2.test

Everything now works as expected!

Please or to participate in this conversation.