nuxt-composition-api

Nuxt hooks for the Vue Composition API

Composition API hooks for Nuxt.

Progress

This is still an in-development package, and should definitely be regarded as alpha-level.

• Support for new Nuxt fetch()
• Access to Nuxt context
• nuxtServerInit
• test framework

Quick Start

First install nuxt-composition-api:

yarn add nuxt-composition-api

# or npm

npm install nuxt-composition-api --save

Enable the module in your nuxt.config.js

{
  buildModules: [
    'nuxt-composition-api'
  ]
}

The module automatically installs @vue/composition-api as a plugin, so you shouldn't need to do so separately.

You will now be able to access the following hooks:

useFetch

Versions of Nuxt newer than v2.12 support a custom hook called fetch that allows server-side and client-side asynchronous data-fetching.

You can access this with this package as follows:

import { defineComponent, ref, useFetch } from 'nuxt-composition-api'
import axios from 'axios'

export default defineComponent({
  setup() {
    const name = ref('')

    useFetch(async () => {
      name.value = await axios.get('https://myapi.com/name')
    })
  },
})

withContext

You can access the Nuxt context more easily using withContext, which runs synchronously within the setup function.

import { defineComponent, ref, withContext } from 'nuxt-composition-api'

export default defineComponent({
  setup() {
    withContext(({ store }) => {
      store.dispatch('myAction')
    })
  },
})

Additional @vue/composition-api functions

For convenience, this package also exports the @vue/composition-api methods and hooks, so you can import directly from nuxt-composition-api.

Contributors

Contributions are very welcome.

Clone this repo

git clone git@github.com:danielroe/nuxt-composition-api.git

Install dependencies and build project

yarn install

yarn build

Tip: You can use yarn link to test the module locally with your nuxt project.

License

MIT License - Copyright © Daniel Roe