vueschool.io

🤞

Deployments 🚀

@vueschool_io

Netlify

Connect Git repository

GitHub • GitLab • BitBucket

@vueschool_io

Netlify

Configuration

@vueschool_io

Profit 🎉

https://static-nuxt-demo.netlify.com/

💧

@vueschool_io

No Nuxt/Netlify?

@vueschool_io

SEO & meta tags 🧚‍♀️

@vueschool_io

Meta tags are defined in component's head

// pages/contact.vue
<template>...</template>

<script>
export default {
  head() {
    return {
      title: "Contact Us",
      meta: [
        { name: "twitter:title", content: "Contact us - if you want" },
        { name: "twitter:description", content: "Say something funny or bust us with questions, it's up to you." },
        { name: "twitter:card", content: "summary_large_image" },
        { name: "twitter:image", content: "https://i.imgur.com/XllovKU.png" }
      ]
    }
  }}
</script>

@vueschool_io

Twitter Card

@vueschool_io

Dynamic Content?

@vueschool_io

Blog

/posts/{id}

Generate a static file for each post
Fetch data from API for each file
Set meta information dynamically

@vueschool_io

asyncData ⚡️

@vueschool_io

asyncData

asyncData runs before loading the page component

// ExamplePage.vue

export default {
  data () {
    return { username: 'hootlex' }
  },
  async asyncData ({$axios}) {
    let posts = await $axios.$get('posts')
    return {posts}
  },
}

@vueschool_io

Dynamic Routes

@vueschool_io

Dynamic Routes in Nuxt

/posts/{id}

@vueschool_io

_id.vue

// pages/posts/_id.vue
<template>....</template>

<script>
  export default {
    head () {
      return {
        title: this.post.title,
        meta: [
          { name: 'twitter:title', content: this.post.title},
          { name: 'twitter:description', content: this.post.body}
        ]
      }
    },
    data () {
      return {
        // whatever
      }
    },
    async asyncData ({params, $axios, payload}) {
      let post = await $axios.$get(`posts/${params.id}`)
      return {post}
    }
  }
</script>

@vueschool_io

By default Nuxt will not generate static pages for dynamic routes.

@vueschool_io

The generate property

// nuxt.config.js

generate: {
    routes: [
      '/posts/1',
      '/posts/2',
      '/posts/3'
    ]
}

@vueschool_io

The generate property

Define routes as a function.

// nuxt.config.js

generate: {
  async routes () {
    let response = await axios.get('/api/posts')
    return response.data
      .map(post => ({`posts/${post.id}`}))
  }
},

@vueschool_io