More Related Content
Similar to Nuxt.js + microCMS + netlify (20)
Nuxt.js + microCMS + netlify
- 19. pages/news/_id.vue
<template>
<div class="news">
<h1>{{ news.title }}</h1>
<div class="contents" v-html="news.body">
</div>
</template>
<script>
export default {
asyncData({ $axios, params: { id } }) {
const url = `https://watti.microcms.io/api/v1/news/${id}`
const { content } = await $axios.$get(url)
return { news: content }
},
data () { return { news: {} }}
}
</script> 1919
- 20. NuxtSSGRoutes
Netlifyなので nuxt generate で静的コンテンツ⽣成
静的ページは⾃動で⽣成される
動的ページは nuxt.config.js の generate.routes
に Array or Promise を返す関数 or callback 関数
export default {
generate: {
routes: ['/news/hoge', '/news/fuga', '/news/piyo']
}
}
2020
- 27. 静的ページのpayload対応
静的ページのroutesは⾃動⽣成
exclude した上で route と payload を指定する
const url = 'https://watti.microcms.io/api/v1/news'
export default {
generate: {
exclude: ['/news'],
routes() {
axios.get(url).then(response => {
return { route: '/news', payload: response.data.contents }
})
}
}
} 2727