StaticShield + Vue.js

Protect a single page

Coming really really soon

Till then you can try to add the snippet in the head tag of the page with the help of vue-head NPM package.

If you happen to succeed using vue-head, please contribute to the docs by clicking the link in the footer 😀

Password protect a whole app

First, go grab the Vue.js snippet from the dasboard

You will have to add that script on the <head> of public/index.html of the Vue app.

A password protected Vue app's public/index.html looks like

// public/index.html
<!DOCTYPE html>
<html lang="">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
.staticshield-div {
display: none;
content="0; url="
<body class="staticshield-div">
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
<div id="app"></div>
<!-- built files will be auto injected -->

The <DATA-SITE-ID> and <CAPTION> fields will be prefilled in the dashbaord. You will just have to copy paste 😍