vueschool.io
@vueschool_io
Connect Git repository
GitHub • GitLab • BitBucket
@vueschool_io
Configuration
@vueschool_io
@vueschool_io
@vueschool_io
@vueschool_io
// 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
@vueschool_io
@vueschool_io
/posts/{id}
@vueschool_io
@vueschool_io
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
@vueschool_io
@vueschool_io
/posts/{id}
@vueschool_io
// 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
// nuxt.config.js
generate: {
routes: [
'/posts/1',
'/posts/2',
'/posts/3'
]
}
@vueschool_io
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
@vueschool_io
@vueschool_io
@vueschool_io
@vueschool_io
@vueschool_io
@vueschool_io
image from vensi.com
@vueschool_io
@vueschool_io
@vueschool_io
@vueschool_io
@vueschool_io
Challenging thoughts?
@vueschool_io
@vueschool_io
@vueschool_io
Evan You
patreon.com/evanyou
Chris Fritz
patreon.com/chrisvuefritz
Guillaume Chau
patreon.com/akryum
Nuxt.js
opencollective.com/nuxtjs
Supports