Use Vue-Headful to set page titles

This commit is contained in:
Adam Goldsmith 2019-01-04 16:11:27 -05:00
parent e7006cfbea
commit 2ad02f9b0b
7 changed files with 23 additions and 8 deletions

13
package-lock.json generated
View File

@ -3504,6 +3504,11 @@
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true
},
"headful": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/headful/-/headful-1.0.3.tgz",
"integrity": "sha512-vF9Vfddn1QWmziliht2mji6ayI78+hUuSC+Kt0GEqLw/51zWgi1KF7oLtIQf3nlkg8sQQOlznkkIaF4W9lIt9w=="
},
"hex-color-regex": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@ -7337,6 +7342,14 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",
"integrity": "sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg=="
},
"vue-simple-headful": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/vue-simple-headful/-/vue-simple-headful-2.2.6.tgz",
"integrity": "sha512-gV/mE4rJ8O35rJpYtto7uQDIKtwUfZCsuVleeCsNtBAWr2p1BJIsnVOLyRIbOrXRUUzaKtIyjE1cum1JlTuKYg==",
"requires": {
"headful": "^1.0.0"
}
},
"vue-template-compiler": {
"version": "2.5.21",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.21.tgz",

View File

@ -21,7 +21,8 @@
"v-runtime-template": "^1.5.2",
"vue": "^2.5.21",
"vue-hot-reload-api": "^2.3.1",
"vue-router": "^3.0.2"
"vue-router": "^3.0.2",
"vue-simple-headful": "^2.2.6"
},
"devDependencies": {
"@vue/component-compiler-utils": "^2.3.1",

View File

@ -1,6 +1,6 @@
<template>
<div>
<vue-headful title="404 Not Found"> </vue-headful>
<headful title="404 Not Found"> </headful>
<h1>Error 404: Path {{ path }} not found</h1>
You seem to have gone to the wrong place, would you like to go
back to the <a href="/">Deck Index</a>?

View File

@ -1,5 +1,6 @@
<template>
<body>
<headful title="Deck Index"></headful>
<router-link to="/edit/new">Create New Deck</router-link>
<ul>
<li v-for="deck in decks">

View File

@ -1,5 +1,6 @@
<template>
<div>
<headful :title="'Editor|' + deckInfo.meta.name"> </headful>
<div id="controls">
<div>
<button type="button" @click="upload"> Save Deck </button>
@ -68,12 +69,6 @@
};
},
watch: {
deckInfo() {
document.title = "Editor|" + this.deckInfo.meta.name;
},
},
created() {
if (this.deckID !== 'new') {
fetch('/decks/' + this.deckID + '.json')

View File

@ -1,3 +1,6 @@
<head>
<title> </title>
</head>
<body>
<div id="charSheet"> </div>
<script type="text/javascript" src="index.js"></script>

View File

@ -1,5 +1,6 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueHeadful from 'vue-headful';
import App from './App.vue';
import DeckIndex from './DeckIndex.vue';
@ -7,6 +8,7 @@ import Editor from './Editor.vue';
import Err404 from './404.vue';
Vue.use(VueRouter);
Vue.component('headful', VueHeadful);
const router = new VueRouter({
mode: 'history',