-
-
Notifications
You must be signed in to change notification settings - Fork 622
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom Rehype plugin import & module #1170
Comments
Unfortunately currently V2 does not support custom plugins, you can only use published packages for plugins. Note:
|
Thank you for your response. Overwriting the |
@farnabaz Would you have any documentation for overwriting the ProseImg component (or any other Nuxt Content component, for that matter?) |
@devwearsprada Thank you!! |
Now that Nuxt Image is out for Nuxt 3 has anyone gotten this to work? I would like to use a custom plugin that uses nuxt-img for all of my images in markdown. |
@devwearsprada Do you have an example of overwriting ProseImg with nuxt-img? |
@danvega Check this #911 (comment) for solution based on using rehype-plugin to change any HTML tag to anything you like, while using normal |
@danvega You can simply create |
That is what I ended up doing.
I think I need to understand what nuxt-img does a little bit better. When I reference /images in my markdown it's still looking in public/images. Is there a way I can use a relative link to the markdown file?
|
Environment
Darwin
v14.19.0
3.0.0-rc.3
yarn@1.22.17
vite
modules
,content
@nuxt/content@2.0.0
-
Reproduction
https://codesandbox.io/s/compassionate-fermat-643o1d?file=/plugins/rehype-nuxt-image.js
https://codesandbox.io/s/compassionate-fermat-643o1d?file=/nuxt.config.ts
Describe the bug
I'm trying to build a custom rehype plugin that will convert
![]()
syntax to<nuxt-img/>
as described in an older issue #911. While trying to get this to plugin running, I'm encountering two different bugs/errors. I've made a minimal reproduction on codesandbox to showcase the errors.1: Import using the tilde
~
When importing the
rehype-nuxt-image.js
from theplugins
directory using the tilde (as described in the docs. Navigating to the link doesn't work for me but its in the v2 docs under API -> markdown), I'm receiving the following error:I think I've found a workaround for now using by importing the plugin like so:
../../plugins/rehype-nuxt-image.js
. After using this to import the plugin, the following error shows up.2: ESM import error
In the
rehype-nuxt-image.js
I'm importingvisit
fromunist-util-visit
. This causes nuxt to throw an ESM import error:Again, I'm not sure but I think transpiling
unist-util-visit
is not necessary as it is an ES module. I tried transpiling with using thetranspile
option innuxt.config.ts
without any luck.This is one of my first issues ever, so let me know if you need more information or I'm just being silly for what I'm trying to do.
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: