Creating a Website with Nuxt.js and WordPress REST API

Part 1, What’s Nuxt.js ?

Part 2, Initial Setup

npm install -g vue-cli
vue init nuxt-community/starter-template <project-name>
initial nuxt.config.js file for my vue-meetup talk
folder structure for a nuxt project

Part 3, Going Deeper

index.js inside /store folder with some example mutations and nuxtServerInit
asyncData returns a new data property in the local .vue page
we can commit new data from an API to the store with fetch
no-ssr runs the enclosed code only client-side (no SSR)

Part 4: dealing with WordPress CMS and API calls

add_filter( 'rest_cache_skip', function( $skip, $request_uri ) {
if ( ! $skip && false !== stripos( $request_uri, 'contact-form-7' )) {
return true;
}
return $skip;
}, 10, 2 );
this.$route.params.<dynamic-param>
this.$route.params.destination === ‘mexico’
async fetch ({app, store, params}) {
// this gives you acess to route params with the shorthand params
// but also to the store and the other app values
// check all fields at
https://nuxtjs.org/api/context/
}
vuex store
add this extension to axios and add the axios.js plugin to nuxt.config.js

Part 5: How about deploying the app?

not bad

Part 6: What’s Next for Vue and Nuxt?

It’s a wrap

Thanks from the cat

Frontend Developer / UX / Design / Vue.js Advocate / Nuxt.js Supporter / AI Lover

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