Home ยป WordPress with NUXT ( VueJS )

WordPress with NUXT ( VueJS )

fullstackdevelopment-vuejs

NUXT

Nuxt is a framework for creating Universal Vue.js Applications and in many ways it feels like working on a WordPress theme. It has a folder for your pages/templates, a hook API, support for plugins and components (or template parts if your thinking WordPress). Nuxt follows a philosophy of convention over configuration, drop Vue components in their respective folders and Nuxt will bind everything together.

Create an empty directory

> mkdir [project-name]
> cd [project-name]

The project needs a package.json file to specify how to start nuxt:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

scripts will launch Nuxt.js via npm run dev

Once the package.json has been created, add nuxt to the project via npm:

npm install --save nuxt

WP-API

To use all features of node-wpapi we need to add wp-nuxt dependency using npm to your project.

npm install wp-nuxt

You can use the API of WP-API using the injected ‘app.$wp’. (s. example)

<script>
export default {
  async asyncData ({ app, store, params }) {
    return { articles: await app.$wp.posts().perPage(10) }
  }
}
</script>

2 thoughts on “WordPress with NUXT ( VueJS )”

Leave a Reply