head-elements example

examples/head-elements/README.md

@@ -0,0 +1,85 @@
+# Updating headers with Nuxt.js
+
+Nuxt.js uses [`vue-meta`](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your applications.
+
+Nuxt.js configures `vue-meta` with these options:
+```js
+{
+  keyName: 'head', // the component option name that vue-meta looks for meta info on.
+  attribute: 'n-head', // the attribute name vue-meta adds to the tags it observes
+  ssrAttribute: 'n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
+  tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
+}
+```
+
+## Updating the title
+
+To update the title of the page, just add `head.title` in your page component.
+
+`pages/index.vue`
+```html
+<template>
+  <h1>Home page 🚀</h1>
+</template>
+
+<script>
+export default {
+  head: {
+    title: 'Home page 🚀'
+  }
+}
+</script>
+```
+
+## Meta tags and more
+
+To know the list of options you can give to `head`, take a look at [`vue-meta` documentation](https://github.com/declandewet/vue-meta#recognized-metainfo-properties).
+
+## Using `data` values inside `head`
+
+You might want to use the component data to display different headers, like a post title for example. Just use `head` as a function and you can use `this` inside to access your component data.
+
+Example of displaying the post title:
+```html
+<script>
+export default {
+  data ({ params }) {
+    // fetch the post from the API
+    return axios.get(`https://my-api/posts/${params.id}`)
+    .then((res) => {
+      return { title: res.data.title }
+    })
+  },
+  head () {
+    return {
+      title: this.title
+    }
+  }
+}
+</script>
+```
+
+## Defaults metas
+
+Nuxt.js let you define all the defaults metas for your application inside the `nuxt.config.js`, use the same field `head`:
+```js
+module.exports = {
+  head: {
+    titleTemplate: '%s - Nuxt.js',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: 'Meta description' }
+    ]
+  }
+}
+```
+
+## Demo
+
+```bash
+npm install
+npm start
+```
+
+Go to [http://localhost:3000](http://localhost:3000) and navigate trough the app. Notice how the page's title changes between the pages and is also server-side rendered.

examples/head-elements/components/twitter-head-card.vue

@@ -0,0 +1,24 @@
+<template>
+  <a :href="href">Share on twitter</a>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    href: 'https://twitter.com/intent/tweet?url=' + encodeURIComponent('https://head-elements.now.sh/about')
+  }),
+  head: {
+    meta: [
+      { name: 'twitter:card', content: 'summary' },
+      { name: 'twitter:site', content: '@nuxt_js' },
+      { name: 'twitter:title', content: 'Nuxt.js Twitter Card' },
+      { name: 'twitter:description', content: 'Nuxt.js lets you handle custom headers for your app with vue-meta' },
+      { name: 'twitter:image', content: 'https://avatars0.githubusercontent.com/u/23360933?v=3' },
+      { name: 'twitter:image:alt', content: 'Nuxt.js logo' }
+    ]
+  }
+}
+</script>
+
+<style lang="css">
+</style>

examples/head-elements/components/twitter-head.vue

@@ -1,16 +0,0 @@
-<template>
-  <span v-if="false"></span>
-</template>
-
-<script>
-export default {
-  head: {
-    meta: [
-      { name: 'lol', content: 'hello' }
-    ]
-  }
-}
-</script>
-
-<style lang="css">
-</style>

examples/head-elements/pages/about.vue

@@ -1,23 +1,24 @@
 <template>
   <div class="container">
     <h1>About page</h1>
-    <router-link to="/">Go to /</router-link>
-    <twitter-head></twitter-head>
+    <p>Click below to see the custom meta tags added with our custom component <code>twitter-head-card</code></p>
+    <twitter-head-card></twitter-head-card>
+    <p><router-link to="/">Home page</router-link></p>
   </div>
 </template>
 
 <script>
-import TwitterHead from '~components/twitter-head.vue'
+import TwitterHeadCard from '~components/twitter-head-card.vue'
 
 export default {
   head: {
-    title: 'About 2',
+    title: 'About Page',
     meta: [
       { hid: 'description', name: 'description', content: 'About page description' }
     ]
   },
   components: {
-    TwitterHead
+    TwitterHeadCard
   }
 }
 </script>

examples/head-elements/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <h1>Home page 🚀</h1>
-    <router-link to="/about">Go to /about</router-link>
+    <router-link to="/about">About page</router-link>
   </div>
 </template>