Custom vue component in markdown needs to declare a static asset from prop

[victorpoughon]

I use a custom vue component in markdown, and this component loads data from a json file to render it. This json file currently lives next to the markdown file.

# My markdown content

<MyComponent src="./landscape_0.json" />

This works fine in the dev build, but after a production build the json file is not found. Can I somehow declare the json file as a static asset?

Currently the component loads the json with a await fetch(url), but I'm open to changing that. I can't directly import the json from the component's JS code, because I need the json file to be provided by the component src prop only.

[brc-dd]

Few options -

• Refactor the component to directly accept data:

  # My markdown content
  
  <MyComponent :data="data" />
  
  <script setup>
  import data from './landscape_0.json'
  </script>

• Configure vue - Assets in custom components are not included in build #4368 (reply in thread)

  // .vitepress/config.ts
  import { defineConfig } from 'vitepress'
  
  export default defineConfig({
    vue: {
      template: {
        transformAssetUrls: {
          video: ['src', 'poster'],
          source: ['src'],
          img: ['src'],
          image: ['xlink:href', 'href'],
          use: ['xlink:href', 'href'],
          MyComponent: ['src']
        }
      }
    }
  })

• Keep the file in public directory.

[brc-dd]

Ah, no. transformAssetUrls doesn't work as expected.

[victorpoughon]

Thanks for the quick reply. I was aware of the public directory solution, but out of those I'm most interested in the 'configure vue' one. Let me give you just a bit more context:

The markdown content here is generated by nbconvert. I'm trying to build a system where I can include rendered jupyter notebooks in vitepress. The setup that I have is that I have a script that executes the notebook and converts it to markdown. This works great for rich cell outputs like images, because the generated markdown includes the images with a relative path like:

![png](landscape_3_0.png)

The png file lives next to the generated markdown because it's generated by the notebook execution, so that makes sens. The png asset is handled correctly out of the box.

I'd like the same behavior for my custom component, so that the python code can generate its data normally and write it to a json file that accompanies the notebook. That's why I more interested in the solution that makes my component behave like a normal markdown directive that points to a local asset.

I could update my notebook generation scripts to output all their json ressources to public/, but I think it's cleaner if json files live next to the notebook that they are associted with.

[brc-dd]

Yeah, makes sense. Looks like it's bug in the vite plugin. I've created an issue upstream - vitejs/vite-plugin-vue#544

[brc-dd]

You can manually specify ?url for now I guess - https://stackblitz.com/edit/vite-bukpxmwg?file=docs/index.md,docs/.vitepress/config.ts

or update the logic of component to something like

const data = ref('')

onMounted(async () => {
  try {
    data.value = JSON.parse(props.src)
  } catch {
    data.value = await (await fetch(props.src)).json()
  } catch (e) {
    data.value = { error: e.message }
  }
})

[victorpoughon]

As soon as I added ?url and transformAssetUrls I started hitting the out of memory error (like this one) when running docs:build 😮 My json file is only a few kb

[victorpoughon]

Update: even with assetsInlineLimit: 0,, still I'm getting node JavaScript heap out of memory error. Looks like the line Foo: ['src'], in transformAssetUrls is the cause. And I'm seeing that happen even with a Foo component that does nothing, just receive the src prop and display it in the template.

Edit: ok it might be related to the size of the json files. After investigation it turns out I have one of the component instance that uses a 18MB json file. Removing that one fixes the issue. So the question is why does a 18MB json file causes 2+GB memory usage...

[victorpoughon]

My bad, turns out I had forgotten to add some of the ?url. So in summary:

• Adding both ?url and transformAssetUrls as suggested works! Thank you for helping :) I guess when vite-plugin-vue/issues/544 is fixed I can remove the ?url stuff.
• Adding transformAssetUrls for the custom component, but forgetting to add ?url causes a Javascript memory error when running npm run docs:build, if a json file is large (~18MB in my case), quickly using GBs of ram until it dies.