Quick start

Getting started with the Nuxt Composition API.

Quick start

  1. First, install @nuxtjs/composition-api:

    yarn add @nuxtjs/composition-api
    
    npm install @nuxtjs/composition-api --save
    
  2. Enable the module.

    nuxt.config.js
    {
      buildModules: [
        '@nuxtjs/composition-api'
      ]
    }
    

    Note that using buildModules requires Nuxt >= 2.9. Just add it to your modules if you're on a lower version.

  3. Optional. Currently there's an issue with static site generation and async functions which means that you'll need to add time between pages being generated to allow for any async functions to resolve, if you are pre-generating any of your pages:

    nuxt.config.js
    {
      generate: {
        // choose to suit your project
        interval: 2000,
      }
    }
    
  4. You're good to go!

  • The module automatically installs @vue/composition-api as a plugin, so you do not need to enable it separately.

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

Testing with Jest

If you need to use jest tests with this module installed, just add the following lines to your jest.config.js:

jest.config.js
moduleNameMapper: {
  '@nuxtjs/composition-api': '@nuxtjs/composition-api/lib/entrypoint.js',
  // alternatively, depending on your node version
  // '@nuxtjs/composition-api': '@nuxtjs/composition-api/entrypoint',
},
Edit this page on GitHub Updated at Tue, Mar 2, 2021