Running a Vue app from within a Golang/Gin template

Question

I am specifically running Vue and Golang/Gin, but this question can be viewed more broadly as "running a JS framework within a web framework's templating flow"

I've been tasked with converting a startup's somewhat complex Golang/Gin app to a more modern web app. As these things typically go, the Gin app is much too complicated to be outright converted to a SPA with an API, so we have to choke out individual features piece by piece. Like most websites, The Gin app's HTML pages all have a layout with header, footer, and sidebar in common, with the "content" area changing from page to page. The content area is usually static CRUD stuff, but there is a good amount of custom vanilla JS mixed into many of the views, which gums up the works a bit when trying to incorporate a modern JS framework.

WHAT I WOULD LIKE TO DO is run a Vue app within that "content" div, which seems simple, but this has proven a bit challenging for me. I am keeping all my view code in a subdirectory of the Gin repo because I do not want the app code and build a pipeline to conflict with the existing vanilla JS assets By default, Vue apps build to an index.html file, so I tried to just include that as a template, go Gin was not a fan of that and kept giving me an error that the template couldn't be found

I'm thinking that the best solution is probably to compile my Vue app to an index.js file, that targets an element in the template by ID, and runs the Vue app there. Then I could simply include that JS file in a script tag in the template.

What's setting me back is that I am a bit overwhelmed by the webpack/babel/JS build pipeline, so I'm not exactly sure how I should be pulling this off or what tools I should be using to make it happen. I've been looking into 'vue-loader' which seems to be at least partially what I want (transpile Vue into pure JS), but I'm still scratching my head a bit.

Any help is appreciated. I tried to be as clear as possible about my problem here, but am happy to answer any follow-up questions. Attached is a visual aid of what I'd like to accomplish. Thank you and happy coding!

Here is a diagram showing what I'd like to do

What I'm trying to accomplish:

kaymation kaymation · Accepted Answer · 2021-09-22T21:08:38

Was able to get it working by using vue-loader and webpack, compiling my app to a single index.js file, with an entry point that looks like this:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#webapp')

then invoking in a template like this:

<div id="webapp">Failed to load Vue</div>

<script src=/webapp/dist/index.js></script>

It only works if the script tag is AFTER the div, or Vue wont be able to find the element. I also had to add the following in main.go so that it could read the JS

r.Static("/webapp", "./webapp")

All in all, ended up being a fairly simple solution, the minutiae of config just held me up! I'm sure I'll run into some type of issue taking this to production, but that is tomorrow's problem

Running a Vue app from within a Golang/Gin template

1 Answers