# Composables

The composition API is the latest and greatest feature in Vue. This was supposed to be a ^3.0.0 feature, but has found its way back to Vue 2 via a plugin (opens new window). They will thankfully find there way to Vue 2 via the next Vue update (2.7). However, at the moment, there are limitations (opens new window)! Read them and proceed with caution.

# Usage

Please use the use-prefix to identify that the file is a composition. For example useRoute.js.

# Installation

# This will install the `@vue/composition-api` automatically
$ yarn add --dev @nuxtjs/composition-api

# Usage

To use it you need to update your current nuxt.config.js:

nuxt.config.js

import config from '@jdi/vue-backoffice-library/src/js/nuxt.config'
import { useRouteConvention } from '@jdi/vue-backoffice-library/src/js/composables/useRouteConvention/src/useRouteConvention'

config.plugins = ['./plugins/runtime', './plugins/axios', './plugins/element-ui', './plugins/i18n', './plugins/vue-good-table']

// This will add the `@nuxtjs/composition-api`-module and disable the migration warning for Nuxt 3
config.buildModules = ['@nuxtjs/composition-api/module']
config.capi = { disableMigrationWarning: true }

config.router = {
  // This makes the application available on `/backoffice` (optional)
  base: '/backoffice/',
  // This will implement our route convention (mandatory if you want to use the `useEntity`-composition
  extendRoutes(currentRoutes) {
    const { routes } = useRouteConvention(currentRoutes)
    return routes
  }
}

export default config

Remove the `composition-api`-plugin Advised

You should now safely remove the composition-api.js-plugin.

const plugins = [
-  './plugins/composition-api'
]

# Testing

At the moment the @vue/composition-api package has a big limitation: it is hard to use in a library as this. You can read more about that here:

At the moment we use this solution, until something better will come (a.k.a. Vue 3 ór Vue 2.7!) https://github.com/vuejs/composition-api/issues/625#issuecomment-763617536 (opens new window)

That means that the @vue/composition-api can (must) not be installed in this package.
That means that compositions can not be tested, because testing requires the library.
That means that we need a workaround. E.g. temporarily installing the package, testing, and then removing it again.

For now, the package will be automatically installed and removed in CI-environment. On your local device you will have to do this action manually.

TIP

Looking for more information about compositions? Read the Composition API-guide (opens new window).