Customising Content in Nuxt


I’m playing around with Ghost with an intent of using it within my site in different ways (blog, recipes etc), with the site itself built in Nuxt.js.

I’ve got it working and the content pulling through but now I’m playing around trying to figure out how I can use this in practice. Ideally I want to be able to separate content within Ghost to then decide how that is laid out on the site. For example I want to be able to have separate sections for ingredients, instructions, nutritional info etc (and I’m using recipes as an example here, have a similar need for other content type but different aspects obviously).

I’ve looked around and can see that custom fields are not a thing so that’s my first idea shot.

I then thought about using the snippets functionality to at least build all the content in Ghost but then split it out as required on my end but as I’m binding the HTML (e.g. below) I can’t figure out how to exclude certain parts from the main part and put it in a sidebar. For example if I set a snippet to have the id “ingredients” I want to exclude that from the main body but display only that in the sidebar.

<div v-html="post.html" class="col-span-2" />

I may be going about it the wrong way but that’s the only approach I can think of at the moment but thought I’d reach out.

I appreciate I think my potential solution is more Vue than it is Ghost but figured someone out there may well have a better way for me to do it!