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!

Nuxt Folder

Compare this to my Application.

The source code to my sample Airports Application can be found at https://github.com/sobpilot/vuespa.

Setup

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.

My typical Development Setup

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.

index.html

Vue Pages and Components are created in js files. They are Single Page Components in the sense that all of the html and javascript are in one file, but do not contain any css. This is not a problem since I use Vuetify globally. I put all of the html in a template literal string (using backticks). This allows me to use multiline strings in the editor. Now this is where the awesome Template Literal Editor comes in. In the editor place the cursor anywhere inside the html string and press control-enter. A second editor opens up with full html editing including intellisense, formatting, and anything else you use for your html. When you are finished editing your html, press control-enter again and the second window closes and all of your changes are in the original editor. Update — There is a new plugin called leet-html. I told you VS code plugins are awesome!

Using Template Literal Editor

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.

Application Folder Structure