3 gotchas when moving from Vue to Nuxt

Server Side Rendering

Routing and project structure

Fetching data

asyncData({ $axios }) {
const endpoints = [
{url: '/api/posts', title: 'posts'},
{url: '/api/comments', title: 'comments'},
]
const promises = endpoints.map((endpoint) => {
return $axios.$get(endpoint.url)
})
return Promise.all(promises).then((res) => {
const data = {}
endpoints.forEach((endpoint, index) => {
return data[endpoint.title] = res[index]
})
// Returns to the data() on the component, how convenient!
return data
}).catch((error) => {
console.log(error)
})
}

Rendering components client-side

Not exactly clear what went wrong here.

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store