Create a SPA Vuejs Application Without Node, WebPack, or Any Other Build Process using Vue, Router, Vuetify, and Axios.
After getting my SPA application working in DotNet using a Razor Page, I started thinking about creating a simple Vue App without DotNet, Node, or a Backend. Why do we even need a server or backend as part of our Vue applications, especially with the existence of AWS Lambda, Azure Functions, and Google Firebase?
So without Node, the whole application is basically just a folder that is deployed to a web server on any platform. With the help of VS Code (an awesome editor!), I set out to create a simple Vue Application consisting of only html, css, and js files.
And by the way, here is all the stuff you need to download for a typical Nuxt Application. Ouch!
Compare this to my Application.
The source code to my sample Airports Application can be found at https://github.com/sobpilot/vuespa.
The plugins for VS Code are many and amazing. If there is something you want to do in the editor you can find a plugin for it. The two main plugins I use are Live Server and Template Literal Editor. I’ll explain the use of these below.
Live Server allows you to have a local web server inside of VS Code. You start it by right clicking on the file you want to run. Every time you save a file the browser automatically refreshes. Here is a view of my development desktop. Since my main HTML file is index.html, when I deploy the app to a real web server, that will be the startup file.
In the index.html file I put all of my references to css and js, and set up the Vue Routing. As I mentioned, I use CDNs so I don’t have to download and manage all those files locally.
A typical Vue Home Page
A typical Vue Toolbar Component
My folder structure is pretty typical however, you can do it anyway that works for you. The great thing about a simple application is there are no rules, no black boxes, and no conventions. Have fun and please comment.