Recently I had to start a new project and decided to use Go for the back-end and Vue.js for the front-end, but I was concerned about all the tooling that I would need to integrate just to power the front-end side of the website. More so considering that my employer's business has nothing to do with web development so all this overhead would be unjustifiable. I spent several days reading and trying to understand what every tool included by Babel.js was doing until I gave up after the +20th module. It felt like a nightmare to see the gigantic dependency tree inside the "node_modules" folder.
I felt relieved when I found that Vue.js Components don't need to be compiled [1].
I also found this article interesting [2] with information on different approaches.
This is what I ended up with (my own design):
/project/
├── docker-compose.yml
├── Dockerfile
├── README.md
├── backend
│ ├── about.go
│ ├── app.go
│ ├── home.go
│ ├── main.go
└── frontend
├── public
│ ├── app.min.js
│ ├── bootstrap.min.css
│ ├── favicon.ico
│ ├── about.min.js
│ ├── styles.min.css
│ ├── vue.min.js
│ └── vue-res.min.js
└── views
├── base.html.tpl
├── home.html.tpl
└── about.html.tpl
Where "app.min.js" contains the basic Vue.js options like this: var Application = function() {};
Application.prototype.el = '#app';
Application.prototype.delimiters = ['${', '}'];
Application.prototype.data = {};
Application.prototype.created = function() {};
Application.prototype.methods = {};
And the sub-sequent pages, like "About", load a JavaScript file with this: Vue.component('about', {
template: '#about',
data: function() {
return {…};
},
methods: {…}
});
[1] https://vuejs.org/v2/guide/components.html[2] https://medium.com/js-dojo/7-ways-to-define-a-component-temp...