Use Vue to create a SPA without any Node modules

In this guide I will show you to create a static single-page application with VueJS and ES6 Modules.

A friend of mine was trying to use AWS Cloud9 to build his SPA, but he found working with Node to be cumbersome due to the way Cloud9 works. I had designed a way to build a complex web application without using Node at all while at work. I passed the knowledge on to him and he took to it.

The idea is that you can build a "static-first" web application with optional build tooling later if you wish.

Rather than using Node's module system, you can use the one that's built into JavaScript. This module system shipped in version 6.

This allows you to send your files to the browser exactly as they are. There is no setup. You can clone a git repository directly to /var/www/html on Apache and start developing.

You can use Vanilla JavaScript, but I've found Vue.js does the heavy lifting that I'd have to do anyway in a moderately complex app.

You will need a server to host your static files. I recommend fenix.

You will need to use a browser that supports ES6, such as Opera.

You can see the final code here.

I have encountered problems with Edge when using this methodology, but Rollup.js has been very useful when preparing the app to work cross-browser.

I am in the process of building a CLI that will automate these steps.

Step 1 - Creating your index.html file.

For the most part, your index.html file will remain untouched as most of your work will be done in JavaScript.

1. Create a project folder with a name of your choosing. Serve it from whatever static fileserver you wish.
2. Inside the project folder, create an index.html file.
3. Add html, head, and body tags, then include this line of code between your body tags:

<script type="module" src="main.js">

You can optionally include 'crossorigin' if you run into a 499 error in the console. There is more information in this forum post.

1. Above the line of code you just wrote, add the following:

<div id="app"></div>

You can call the id whatever you want, as long as it matches with the Vue instance we're about to create.

Step 2 - App entry point, and Vue integration.

Vue can be imported as an ES6 module. All components will be able to make use of it.

You should be in a directory that a single file, which is the index.html file you just created.

1. Create a main.js file.
2. Create a vue.js file.
3. Go to this cdn and select vue.esm.browser.js
4. Copy and paste the JavaScript code into the vue.js file you just created in your project.
5. Go to main.js and enter the following code:

import Vue from './vue.js'

Alternatively, you can do this:

import Vue from 'https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.esm.browser.min.js'

Thanks to Mohamed Safouan Besrour on Github for the suggestion and Pull Request!

1. Immediately after this line, add the Vue instance:

new Vue({
  el: '#app', // This should be the same as your <div id=""> from earlier.
  components: {
    'navbar': Navbar
  },
  template: MainTemplate
})

We've referenced two external files, one component, and one template. We will be importing both. The 'navbar' component has its own template, which it will import on its own, without it having to be imported into main.js

This is important as we want to practice separation of concerns within our componentized app.

Step 3 - Adding templates.

For the apps I have built with this methodology, I have kept all templates in a separate folder structure that mirrors the component folder structure. You can change this around if you want. There is no reason why you can't give each component its own folder with template, and .js file. This is similar to the approach taken by Angular.

1. Create a templates directory. This should be the only subfolder in your application directory.
2. Create a file called main-template.js
3. Add the following code:

// Note that these are backticks.

const MainTemplate = `
    <div>
    <navbar></navbar>
    All content will appear below the horizontal line.
    <hr>
    </div>
`

export { MainTemplate }

1. In the templates folder, create a navbar-template.js file.
2. Add the following code:

const NavbarTemplate = `<nav>

<a href="#/">Home</a>
<a href="#/about">About</a>

</nav>`

export { NavbarTemplate }

We have finished creating our templates.

Step 4 - Adding components.

We need a navbar component to attach our template to.

1. In the root directory of your project, create a 'components' directory.
2. Create a navbar.js file.
3. Add the following code:

import { NavbarTemplate } from '../templates/navbar-template.js'

const Navbar = {
  template: NavbarTemplate,
}

export { Navbar }

1. Return to main.js

Step 5 - Importing our components.

We are almost ready to view the first version of our web application.

1. In main.js, add the following code between the Vue import, and the Vue instantiation:

import {
  Navbar
} from './components/navbar.js'

import {
  MainTemplate
} from './templates/main-template.js'

1. Save the file and view your web application in your browser. The URL will depend on your server settings.

We have a web application that can optionally be turned into a SPA. We will do this now.

Step 6 - Adding routing.

We need to import Vue Router. This is optional, but again it does much of the heavy lifting for you when it comes to routing.

1. Navigate to the vue-router CDN. There doesn't appear to be an ES6 Modules compatible version, so we'll import as CDN.
2. Copy the link, and add it as a dependency in index.html above the module import:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.js"></script>

1. Return to main.js and add the following code:

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [{
    path: '/about',
    component: About,
    name: "About Us Page"
  }]
})

1. In the Vue instance add 'router' above main template:

router,
template: MainTemplate

1. Create an about template, an about component, and then import the component into main.js
2. Underneath the hr tag in main-template.js, add:

<router-view></router-view>

1. Look at your app home page, and then use the navbar to route to the about page.

Add new components and templates to expand your app.

Check the console. If you see any errors, or the app is not rendering the way you expected, check that you followed the steps correctly. If it still does not work, leave a comment below the post.

The main point of this methodology is to show that you don't necessarily need to setup a complex build environment with Node in order to develop a SPA. I believe that this type of development will become more sustainable as module developers release ES6-compatible versions of their software.

A future blog post will focus on using Rollup.js to package this type of app, and setting up CI/CD.

I found another bug with the V2 editor. It causes the numbering to reset after a code block. Notice how my numbers are now 1. after every code block is closed. I will reach out to DEV on Twitter concerning the bug.

I hope this helps anyone who was hoping to build a complex web application with just HTML, CSS, and JavaScript.

Thank you.