@bounteous/vue-storefront-aem

    0.0.1 • Public • Published

    Vue Storefront AEM Integration

    The following guide walks you through setting up the Adobe Experience Manager (AEM) integration with Vue Storefront.

    The main feature at this point is being able to make GraphQL queries to AEM which then returns Content Fragment data as JSON so that it can be rendered in Vue Storefront.

    Installation


    Install the module into your app:

    npm install @bounteous/vue-storefront-aem --save

    or

    yarn add @bounteous/vue-storefront-aem

    Setup


    Register the module in the nuxt.config.js file:

    export default {
      //...
      modules: [
        '@bounteous/vue-storefront-aem/nuxt',
      ]
      //...
    }

    Additionally, in the nuxt.config.js, you need to register the AEM module as a rawSource under the @vue-storefront/nuxt module:

    export default {
      //...
      buildModules: [
        // ...
        ['@vue-storefront/nuxt', {
          useRawSource: {
            dev: [
              // ...
              '@bounteous/vue-storefront-aem',
              // ...
              ],
            prod: [
              // ...
              '@bounteous/vue-storefront-aem',
              // ...
              ],
          },
        }],
        // ...
      ]
      //...
    }

    Next, in middleware.config.js, configure the connection to your AEM instance:

    module.exports = {
      integrations: {
        // ...
        aem: {
          location: '@bounteous/vue-storefront-aem/server',
          configuration: {
            serviceURL: 'http://localhost:4503',
            endpoint: '/content/_cq_graphql/global/endpoint.json',
            // Provide credentials if necessary (for example on Author)
            // See https://github.com/adobe/aem-headless-client-nodejs for more info.
            //auth: [process.env.AEM_USER, process.env.AEM_PW]
          },
        },
      }
    }

    Note that for real use cases you'll need to point the configuration to an AEM Publish instance because otherwise images won't render.

    Content Rendering


    First, copy the RenderContent.vue component from the integration package. You can later customize this to your needs.

    cp node_modules/@bounteous/vue-storefront-aem/components/RenderContent.vue cms/

    You may need to create the cms folder if it doesn't already exist in your project. Then add the package and Vue component import wherever you want to use it, for example in the Home.vue:

    import { useContent } from '@bounteous/vue-storefront-aem';
    import RenderContent from '~/cms/RenderContent.vue'

    Add RenderContent to your list of components:

    components: {
        RenderContent,
      },

    And use it like this:

    setup() {
    
      const {
        search,
        content,
        loading,
        error
      } = useContent();
    
      onSSR(async () => {
        const query = `
        {
          blogArticleAuthorList {
            items {
              name
              title
            }
          }
        }
        `;
        await search({ query: query });
      });
    
      return {
        content,
        loading,
        error,
      };
    }

    Lastly, render the content using the Vue component:

    <RenderContent v-if="content" :content="content" />

    Install

    npm i @bounteous/vue-storefront-aem

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    37.4 kB

    Total Files

    35

    Last publish

    Collaborators

    • prohrbeck
    • visnaut
    • cahlbach