Embed a VueJS SPA in Hugo

I have a website created with Hugo, now I want to implement some logic on that site with Vuejs to maintain design and flow for the user.

The logic I am talking about will be mainly Stripe Payment and User Self service. This should happen in the content section of the page. For example as some sort of widget.

I was wondering how this could be accomplished? I search on the net but couldn’t find relevant content regarding this topic or is it that simple to just add the compiled js to the page.

You can do that, but take care to mask your API keys.

If you are hosting on Netlify etc. you can also create a microservice for that.

Not sur if this helps regarding VueJS, but you have the basic plumbing for Hugo + Stripe here

@divinerites thank you I’ll take a look. I have the JS part figured out but wanted to have something less spaghetti. En gruess!

VueJS is widget based. We call it components :wink: So what you would do is to create a workflow for your Javascript and then just add your Vue-component-tags to your templates. There is nothing that might require Hugo to interact with your components in the templates and the only thing you need to think about is how you integrate your scripts. Static or via pipe.

I remember there being the question of the way to add component tags to templates without Hugo trying to parse them when it compiles the site… Will add the link when I find it.

1 Like

this one.

1 Like

Just to follow up on my question. I have been quite on that but thinking again about vue.js SPA in a hugo site.
Is this documentation still the recommended way or do better options exist nowadays?