Nuxt.js

Installation

Installation with yarn

yarn add comfortable-nuxt

Installation with npm

npm install comfortable-nuxt

GitHub Repo

GitHub - cmftable/comfortable-nuxt: Comfortable Nuxt.js ModuleGitHub

The Nuxt.js Project

The Intuitive Vue FrameworkNuxt

Setup

nuxt.config.js

module.exports = {
  modules: [
    'comfortable-nuxt',
  ],

  comfortable: {
    apiKey: 'YOUR_TOKEN',
    repositoryApiId: 'YOUR_REPO_ID'
    // options: {
    //    useProxy: true,
    //    proxy: 'https://your-proxy.com/v1'
    // }
  }
}
  ...
}

Usage

The comfortable-nuxt module is a wrapper for the comfortable-javasctipt SDK. The documentation with methods and examples for the JavaScript SDK can be found here: https://docs.comfortable.io/sdk/javascript

The nuxt module initializes the SDK automatically and exposes API methods as $cmft as a Promise. SDK Methods like filters and sorting are exposed as $Comfortable.

Examples

For the following examples we'll use the await operator and fetch content for a page, but you can use $cmft like a regular promise with any component.

Fetching documents for a page

  export default {
    async asyncData(context) {
      const options = {
        embedAssets: true
      };
      const documents = await context.$cmft.getDocuments(options);

      return {
        documents: documents.data,
      }
    }
  }

  /**
   * With filters:
   */

   export default {
    async asyncData(context) {
      const options = {
        embedAssets: true,
        filters: new context.$Comfortable.Filter()
        .addAnd('slug', 'equal', context.params.slug)
      };
      const documents = await context.$cmft.getDocuments(options);

      return {
        documents: documents.data,
      }
    }
  }

Fetching a collection

  export default {
    async asyncData(context) {
      const options = {
        embedAssets: true
      };
      const documents = await context.$cmft.getCollection('flyingCars', options);

      return {
        documents: documents.data,
      }
    }
  }

Fetching a single document

  export default {
    async asyncData(context) {
      const options = {
        embedAssets: true
      };
      const document = await context.$cmft.getDocument('DOCUMENT_ID', options);

      return {
        document: document.data,
      }
    }
  }

Fetching a document with alias

  export default {
    async asyncData(context) {
      const options = {
        embedAssets: true
      };
      const page = await context.$cmft.getAlias('deLorean', options);

      return {
        page: page.data,
      }
    }
  }