Use Vue-Headful to set page titles

This commit is contained in:
Adam Goldsmith 2019-01-04 16:11:27 -05:00
parent c6853200ab
commit a692a22a12
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',