Vue JS processing text to components without v-html
Consider this problem — You have a CMS where users write content and format some of that content with a shortcode [the-icon-here /] to distinguish the icon. You don’t want to use v-html because at some point these shortcodes might become more feature rich and interactive. Also using v-html doesn’t always play nice with Nuxt —Which forces the the use of <client-only/>
A little more about the example in use…
Takes text from Netlify CMS
And displays this:
This was first solved by using v-html. See below
Original — And simple v-html solution
Single file components are one of my favourite things about Vue; well besides computed properties. Single file components can be used in many ways — But consider that sometimes we may need to step outside of this to solve edge case problems.
Vue after all is powered by a series of very capable APIs under the hood. I really feel like this power can be forgotten because of the simplicity we work with in single file components though.
Vue itself will compile a component definition down to a series of VNodes or text items.
When I was thinking about how to avoid using v-html — I realised why not just use a render function here. It’s an edge case — But this is far more flexible for this problem and it allows me to turn off <client-only /> in Nuxt.
Final solution:
Learnings from this (at least for me)
Consider that you can go beyond what single file components offer. Use the lower level API’s when needed. Vue render functions aren’t really all that daunting.
Relevant vue reference
- Create element https://github.com/vuejs/vue/blob/dev/src/core/vdom/create-element.js
- VNode https://github.com/vuejs/vue/blob/dev/src/core/vdom/vnode.js
Live implementation is available here:
