← Back

Transform arrow symbol in Nuxt Content v3

with transformers

dev

So I'm curious if this possible and inspired by Obsidian that auto convert -> into the arrow, can we somehow transform every -> into → in Nuxt Content v3 posts? Turns out we can, with transformers! I also added support for ⇒ and ←, and make sure that if it's wrapped with code, it will get ignored.

First we create the transformer file ~/transformers/transform-arrow.js.

Where we put this transformers folder?

Since I'm using Nuxt 3 with compatibilityVersion:4, I was unsure where to put this /transformers folder, whether in the root or inside the app folder, but I put it inside /app folder and it works.

and then in nuxt.config.ts we register the transformer:

I'm not sure using transformers is the correct approach for this case, but it works nonetheless, and I know this probably can be done within the IDE like VS Code with extension, or even simply copy paste the arrow symbol into the post. But it's good to know that this is possible with transformers.

The Blog of Rizal Renaldi

2025 © rizalrenaldi.com — Made with 🖖