Passing relative URLs as component props?

[cdauth]

I'm in the process of migrating from vuepress v1 to vuepress v2.

On some pages of my documentation, I am embedding some video files. Because each of these video files are only used on one page, they are in the same folder as the Markdown file of that page. I have a custom Vue component called Screencast that will render the video with the desired attributes and formatting.

With vuepress v1 I was able to pass the video URL to the Screencast component by using <Screencast :src="require('./video.mp4')"></Screencast>. With vuepress v2 using ESM, require is obviously not available anymore, but I haven’t been able to find a replacement yet. I have tried to do import('./video.mp4'), but there is an error that the file cannot be found (probably the compiled Markdown file is executed in a different folder than the video). Also, the $withBase function seems to only be for files in the public directory.

Is there any way to achieve this with vuepress v2?

[meteorlxy]

Currently importing things in markdown via relative path is not supported.

probably the compiled Markdown file is executed in a different folder than the video

Yes it is. You definitely got the point. We put the compiled md file into the temp directory, but the asset files are still in their original place, so we could not find it via relative path then.

As a workaround you can try to use absolute path with @src alias, e.g. import('@src/path/to/video.mp4'). The @src path is set to the root of your docs.

And your use case is not such common, so we did not put it into our documentation.

It's a known limitation that we always want to fix, but I personally don't have bandwidth yet. I'll try to figure out a way to get rid of it.