Replacing JQuery with Vue.js: No Build Step Necessary
I wouldn&#x27;t mind a build tool if it didn&#x27;t require a ton of JavaScript files <i>(looking at you Babel.js)</i>.<p>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&#x27;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 &quot;node_modules&quot; folder.<p>I felt relieved when I found that Vue.js Components don&#x27;t need to be compiled [1].<p>I also found this article interesting [2] with information on different approaches.<p>This is what I ended up with <i>(my own design)</i>:<p><pre><code>    &#x2F;project&#x2F;
    ├── 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
</code></pre>
Where &quot;app.min.js&quot; contains the basic Vue.js options like this:<p><pre><code>    var Application = function() {};
    Application.prototype.el = &#x27;#app&#x27;;
    Application.prototype.delimiters = [&#x27;${&#x27;, &#x27;}&#x27;];
    Application.prototype.data = {};
    Application.prototype.created = function() {};
    Application.prototype.methods = {};
</code></pre>
And the sub-sequent pages, like &quot;About&quot;, load a JavaScript file with this:<p><pre><code>    Vue.component(&#x27;about&#x27;, {
        template: &#x27;#about&#x27;,
        data: function() {
            return {…};
        },
        methods: {…}
    });
</code></pre>
[1] <a href="https:&#x2F;&#x2F;vuejs.org&#x2F;v2&#x2F;guide&#x2F;components.html" rel="nofollow">https:&#x2F;&#x2F;vuejs.org&#x2F;v2&#x2F;guide&#x2F;components.html</a><p>[2] <a href="https:&#x2F;&#x2F;medium.com&#x2F;js-dojo&#x2F;7-ways-to-define-a-component-template-in-vuejs-c04e0c72900d" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;js-dojo&#x2F;7-ways-to-define-a-component-temp...</a>