Create Simple Static Website With Vue.js CLI

I wanted to create a simple static one page website.

Why do I use Vue.js for this purpose?

Vue cli comes with a hot reload server
It comes with webpack configuration to merge JavaScript + CSS
I am familiar with the Vue.js and Vue cli toolchain

NOTE: If you need a blog-like website, use Hugo or VuePress or other static website generator.

Setup Vue Cli 3 for Development

npm install -g @vue/clivue create PROJECT_NAMEcd PROJECT_NAMEnpm run serve

Convert Vue.js to static html

vue-cli-plugin-prerender-spa is a vue plugin which allow pre-rendering of the Vue application. It is based on prerender-spa-plugin.

Just install the plugin and answer a few question.

vue add prerender-spa

The pre-rendered html will be generated when you run the build.

npm run build

Convert image to embeded base64 image

It seems the plugin convert some of the smaller images to base64 encoding as well, reducing network call but increase html size.

Bootstrap

I only need the Bootstrap CSS (without JavaScript).

Include the following in main.js.

import 'bootstrap/scss/bootstrap.scss';

If you need to import the variable, you can opt for the following in .vue file.

<style scoped lang="scss">
@import '~bootstrap/scss/bootstrap.scss';
@include media-breakpoint-down(sm) {
  .hero {
    font-size: 1.5rem;
  }
}
</style>

If you need the complete Bootstrap, refer to Setup Bootstrap 4 With Vue Cli 3 Webpack.

Remove JavaScript dependency

I don't need JavaScript for my static website,

Remve/Comment <noscript> from public/index.html.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <link rel="icon" href="<%= BASE_URL %>favicon.ico">    <title>Lua Software - passion for building apps</title>    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">    <link rel="manifest" href="<%= BASE_URL %>manifest.json">  </head>  <body>    <!--    <noscript>      <strong>We're sorry but luasoftware doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>    </noscript>     -->    <div id="app"></div>    <!-- built files will be auto injected -->  </body></html>

Remove .js link in dist/index.html manually.

...<link rel="icon" href="/favicon.ico"><title>Lua Software - passion for building apps</title><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"><link rel="manifest" href="/manifest.json"><link href="/css/app.6552000c.css" rel="preload" as="style"><!-- <link href="/js/app.e7870909.js" rel="preload" as="script"><link href="/js/chunk-vendors.f5e39c64.js" rel="preload" as="script">--><link href="/css/app.6552000c.css" rel="stylesheet"></head><body><div id="app">...<!-- <script src="/js/chunk-vendors.f5e39c64.js"></script><script src="/js/app.e7870909.js"></script> --></body></html>

Google PageSpeed Insights

My website scores 99 for Mobile and 100 for Desktop. I think the main reasons are:

There is no JavaScript dependency
Vue cli and prerender-spa plugin helps with some optimization
Google App Engine hosting & configuration
Image optimisation