feat(SEO): add vue-meta to manipulate html-header tags and attributes (…

…#10) closes: #2
vuesion · Dec 30, 2017 · 1d9b687 · 1d9b687
1 parent 6f31bd9
commit 1d9b687
Show file tree

Hide file tree

Showing 17 changed files with 69 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -121,6 +121,7 @@
     "serve-favicon": "^2.4.5",
     "vue": "^2.5.13",
     "vue-i18n": "^7.3.3",
+    "vue-meta": "^1.4.0",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.13",
     "vuex": "^3.0.1",

diff --git a/src/app/App.vue b/src/app/App.vue
@@ -34,7 +34,7 @@
   import VueButton from './shared/VueButton/VueButton.vue';
   import VueGrid from './shared/VueGrid/VueGrid.vue';
   import VueGridItem from './shared/VueGridItem/VueGridItem.vue';
-  import { loadLanguageAsync } from '../i18n';
+  import { loadLanguageAsync } from './plugins/i18n';
 
   export default {
     components: {

diff --git a/src/app/app.ts b/src/app/app.ts
@@ -3,7 +3,7 @@ import { sync } from 'vuex-router-sync';
 import App from './App.vue';
 import { store } from './store';
 import { router } from './router';
-import { i18n } from '../i18n';
+import { i18n } from './plugins/i18n';
 import { VueRouter } from 'vue-router/types/router';
 import { Store } from 'vuex';
 

diff --git a/src/app/components/Components/Components.spec.ts b/src/app/components/Components/Components.spec.ts
@@ -1,6 +1,6 @@
 import { mount, createLocalVue } from 'vue-test-utils';
 import Vuex from 'vuex';
-import { i18n } from '../../../i18n';
+import { i18n } from '../../plugins/i18n';
 import Components from './Components.vue';
 import $style from 'identity-obj-proxy';
 

diff --git a/src/app/components/Components/Components.vue b/src/app/components/Components/Components.vue
@@ -210,6 +210,9 @@
   import VueInput from '../../shared/VueInput/VueInput';
 
   export default {
+    metaInfo: {
+      title: 'Components'
+    },
     components: {
       VueGrid,
       VueGridItem,

diff --git a/src/app/counter/Counter/Counter.spec.ts b/src/app/counter/Counter/Counter.spec.ts
@@ -1,6 +1,6 @@
 import { mount, createLocalVue } from 'vue-test-utils';
 import Vuex from 'vuex';
-import { i18n } from '../../../i18n';
+import { i18n } from '../../plugins/i18n';
 import Counter from './Counter.vue';
 import $style from 'identity-obj-proxy';
 

diff --git a/src/app/counter/Counter/Counter.vue b/src/app/counter/Counter/Counter.vue
@@ -19,6 +19,9 @@
   import VueButton from '../../shared/VueButton/VueButton';
 
   export default {
+    metaInfo: {
+      title: 'Counter'
+    },
     components: {
       VueGrid,
       VueGridItem,

diff --git a/src/app/home/Home/Home.vue b/src/app/home/Home/Home.vue
@@ -18,6 +18,9 @@
   import VueGridItem from '../../shared/VueGridItem/VueGridItem';
 
   export default {
+    metaInfo: {
+      title: 'Home'
+    },
     components: {
       VueGrid,
       VueGridItem,

diff --git a/src/app/index.template.html b/src/app/index.template.html
@@ -1,6 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html data-vue-meta-server-rendered {{{ meta.inject().htmlAttrs.text() }}}>
 <head>
+  {{{ meta.inject().meta.text() }}}
+  {{{ meta.inject().title.text() }}}
+  {{{ meta.inject().link.text() }}}
+  {{{ meta.inject().style.text() }}}
+  {{{ meta.inject().script.text() }}}
+  {{{ meta.inject().noscript.text() }}}
   <meta charset="utf-8">
   <title>vue-starter</title>
   <meta name="mobile-web-app-capable" content="yes">

diff --git a/src/i18n.spec.ts → src/app/plugins/i18n.spec.ts b/src/i18n.spec.ts → src/app/plugins/i18n.spec.ts
diff --git a/src/i18n.ts → src/app/plugins/i18n.ts b/src/i18n.ts → src/app/plugins/i18n.ts
@@ -8,7 +8,7 @@ export const i18n = new VueI18n({
   locale: 'en',
   fallbackLocale: 'en',
   messages: {
-    en: require('../i18n/en.json'),
+    en: require('../../../i18n/en.json'),
   },
 });
 

diff --git a/src/app/router.ts b/src/app/router.ts
@@ -1,10 +1,12 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import Meta from 'vue-meta';
 import { homeRoutes } from './home/routes';
 import { counterRoutes } from './counter/routes';
 import { componentsRoutes } from './components/routes';
 
 Vue.use(VueRouter);
+Vue.use(Meta);
 
 export const router = new VueRouter({
   mode: 'history',

diff --git a/src/async-component.d.ts b/src/async-component.d.ts
diff --git a/src/custom-typings.d.ts b/src/custom-typings.d.ts
@@ -9,3 +9,8 @@ declare module 'identity-obj-proxy' {
   const $style: any;
   export = $style;
 }
+
+declare module 'vue-meta' {
+  const meta: any;
+  export = meta;
+}
diff --git a/src/server/isomorphic.ts b/src/server/isomorphic.ts
@@ -6,6 +6,9 @@ export default (context: any) => {
     const { app, router, store }: IApp = createApp();
 
     router.push(context.url);
+
+    context.meta = app.$meta();
+
     router
       .onReady(() => {
         const matchedComponents: Component[] = router.getMatchedComponents();

diff --git a/src/vue.plugins.d.ts b/src/vue.plugins.d.ts
@@ -0,0 +1,20 @@
+/* tslint:disable:no-shadowed-variable */
+
+import Vue from 'vue';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $meta?: any;
+  }
+
+  interface VueConstructor {
+    prefetch?: (options: any) => {};
+  }
+}
+
+declare module 'vue/types/options' {
+  interface ComponentOptions<V extends Vue> {
+    metaInfo?: any;
+    prefetch?: any;
+  }
+}