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==", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true "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": { "hex-color-regex": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "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", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",
"integrity": "sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==" "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": { "vue-template-compiler": {
"version": "2.5.21", "version": "2.5.21",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.21.tgz", "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", "v-runtime-template": "^1.5.2",
"vue": "^2.5.21", "vue": "^2.5.21",
"vue-hot-reload-api": "^2.3.1", "vue-hot-reload-api": "^2.3.1",
"vue-router": "^3.0.2" "vue-router": "^3.0.2",
"vue-simple-headful": "^2.2.6"
}, },
"devDependencies": { "devDependencies": {
"@vue/component-compiler-utils": "^2.3.1", "@vue/component-compiler-utils": "^2.3.1",

View File

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

View File

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

View File

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

View File

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

View File

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