Working with external library in gutenberg block

So the important thing to understand here is that while the block editor is React based, and can use React components, the data it saves is purely HTML. So your block will simply save the HTML output of its save() function to the post’s content in the database. When that content is output on the front end this HTML is what will be printed, without the involvement of any of your block’s code.

What this means is that you need a save method that prints some placeholder HTML for the block, and a separate script that takes the placeholder and converts it into the live element that you want.

So your save method should look something like:

import { useBlockProps } from "@wordpress/block-editor";
import { Player, Youtube } from "@vime/react";

export default function save({ attributes }) {
    return (
        <div {...useBlockProps.save()}>
            <div className="vime" data-video-id="DyTCOwB0DVw"></div>
        </div>
    );
}

Then you would need a separate script that looks for .vime elements and takes the data-video-id and does whatever the Vime library requires to turn that into a video player.

Looking at the Vime documentation, the best approach would likely be to just use the HTML from their HTML example in your save method:

import { useBlockProps } from "@wordpress/block-editor";

export default function save({ attributes }) {
    return (
        <div {...useBlockProps.save()}>
            <vm-player controls>
                <vm-youtube video-id="DyTCOwB0DVw"></vm-youtube>
            </vm-player>
        </div>
    );
}

Then, on the front end, you would just need to load the appropriate scripts and stylesheets as per their HTML Example.