{"_id":"@bounteous/vue-storefront-aem","_rev":"1-bec948fba262b09b6e2480c7cc6b7877","name":"@bounteous/vue-storefront-aem","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@bounteous/vue-storefront-aem","version":"0.0.1","description":"Adobe Experience Manager integration with Vue Storefront","main":"lib/index.cjs.js","module":"lib/index.es.js","server":"server/index.js","scripts":{"build":"rollup -c && rm -r -- ./server/*/","build:clean":"rollup -c && rm -r -- ./lib/*/ && rm -r -- ./server/*/","dev":"rollup -c -w","test":"jest --passWithNoTests","lint":"eslint --ext .js,.ts --ignore-path .eslintignore .","prepublish":"yarn build"},"lint-staged":{"*.{js,ts,vue}":"eslint --ext .js,.ts --ignore-path .eslintignore ."},"husky":{"hooks":{"pre-commit":"lint-staged","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"author":{"name":"Bounteous"},"license":"MIT","dependencies":{"@adobe/aem-headless-client-nodejs":"^1.0.2","@vue-storefront/core":"^2.3.0","rollup":"latest"},"devDependencies":{"@commitlint/cli":"latest","@commitlint/config-conventional":"latest","@jest/globals":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"^4.17.0","eslint":"latest","eslint-config-prettier":"latest","eslint-plugin-prettier":"latest","eslint-plugin-vue":"latest","husky":"^5.1.3","jest":"latest","lint-staged":"latest","prettier":"latest","rollup-plugin-typescript2":"latest","ts-jest":"latest","typescript":"latest"},"publishConfig":{"access":"public"},"keywords":["vuestorefront","vue-storefront","aem","cms","integration","vue","vuejs"],"homepage":"https://github.com/Bounteous-Inc/vue-storefront-aem","gitHead":"d77d275d9a52233f91821452b8c7e28d04516734","_id":"@bounteous/vue-storefront-aem@0.0.1","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-fu+/MmSIkmRtG2KfCr9yoHcKltckTMPhe9hY0Qz7cRsjwbT2vQI42NQmrG9t9t6jNMrk0DjuWlb+7lCDjXQS5w==","shasum":"9fe249f7d8a16ee4fe720da0c2adc681ef552995","tarball":"https://registry.npmjs.org/@bounteous/vue-storefront-aem/-/vue-storefront-aem-0.0.1.tgz","fileCount":35,"unpackedSize":37386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0gGCCRA9TVsSAnZWagAA75IP+gK8mX/vdWJiCLIHZFGX\nNRPc/u827+6Ovq0v7TvLVoFLba3WS0VCsyzH8srMPWWTQfigsrZ8Y5MP5GC1\nHZwa/NpX0Vdv3nAbq49iZp8zErATTiaqySb8fZy4GetJoqvwZ/WmuSj+aNeu\nxnWApIvGN35IaWOvnQM6xYiGV9QqKfqDQXHrPyYWF6CCz98Bj7IH85xegSg+\nlZPK6Aq6ImfrWfj5hj/CuSJGDysVwiseVjhjJkJwgrsVwlOBCRnKXf3ovyi0\n150U/O9jR2efDB4zrq+JAwUGUcNICg5xCXmGfBW/30HSMhVz6C9Wmgc6H1Tr\n253eiQH4sRoni7uxwG/Znu5yK7BcdfY/idOiSYnjfNPMDRgSpy5q0asOaO8v\nn5YZV/MaffwcEH1cqSkYGJCO7U2x6Iqppv1vRqKiINSvMtbTZIq/VUGohnEc\ndvyTh9lOb9SLm2TRip/QU5sCTK2TMSYrKe13KrQDmJlDQ+h2my12s8ryHJr8\n2RJzmjgdTl3LBssM8umOB0NV69NX9TKHKLc5uOz8GcW/Pop/Cn5xEcN3vBA5\n8Sn7/TfxIe8LiJnD8aswTCDG9xt9XHxta6aHCSWwRAOirIB4lMcgAJHufWLy\nlmhYtSz1E9fZg3Z/j1ldHqd3Spu83w3KUEhd4dH7g5jWA4EpP5TfenwHqJKr\nN50t\r\n=qxpi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkq6Y7A8oaeSYFkO/anGUXbANhjrdTNrzYp8HOi39qjQIgUnZHLKO46riBBdjXOHAVOYmfM0ZYYbygnz3mPJ0bI+g="}]},"_npmUser":{"name":"prohrbeck","email":"paul.rohrbeck@bounteous.com"},"directories":{},"maintainers":[{"name":"prohrbeck","email":"paul.rohrbeck@bounteous.com"},{"name":"visnaut","email":"desk@visnaut.com"},{"name":"cahlbach","email":"catrina.ahlbach@bounteous.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-storefront-aem_0.0.1_1624375681704_0.16613060465114882"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-22T15:28:01.344Z","0.0.1":"2021-06-22T15:28:01.856Z","modified":"2022-04-04T20:16:09.038Z"},"maintainers":[{"name":"prohrbeck","email":"paul.rohrbeck@bounteous.com"},{"name":"visnaut","email":"desk@visnaut.com"},{"name":"cahlbach","email":"catrina.ahlbach@bounteous.com"}],"description":"Adobe Experience Manager integration with Vue Storefront","homepage":"https://github.com/Bounteous-Inc/vue-storefront-aem","keywords":["vuestorefront","vue-storefront","aem","cms","integration","vue","vuejs"],"author":{"name":"Bounteous"},"license":"MIT","readme":"# Vue Storefront AEM Integration\n\nThe following guide walks you through setting up the Adobe Experience Manager (AEM) integration with Vue Storefront.\n\nThe 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.\n\n## Installation\n\n---\n\nInstall the module into your app:\n\n```bash\nnpm install @bounteous/vue-storefront-aem --save\n```\n\nor\n\n```bash\nyarn add @bounteous/vue-storefront-aem\n```\n\n## Setup\n\n---\n\nRegister the module in the `nuxt.config.js` file:\n\n```javascript\nexport default {\n  //...\n  modules: [\n    '@bounteous/vue-storefront-aem/nuxt',\n  ]\n  //...\n}\n```\n\nAdditionally, in the `nuxt.config.js`, you need to register the AEM module as a rawSource under the @vue-storefront/nuxt module:\n\n```javascript\nexport default {\n  //...\n  buildModules: [\n    // ...\n    ['@vue-storefront/nuxt', {\n      useRawSource: {\n        dev: [\n          // ...\n          '@bounteous/vue-storefront-aem',\n          // ...\n          ],\n        prod: [\n          // ...\n          '@bounteous/vue-storefront-aem',\n          // ...\n          ],\n      },\n    }],\n    // ...\n  ]\n  //...\n}\n```\n\nNext, in `middleware.config.js`, configure the connection to your AEM instance:\n\n```javascript\nmodule.exports = {\n  integrations: {\n    // ...\n    aem: {\n      location: '@bounteous/vue-storefront-aem/server',\n      configuration: {\n        serviceURL: 'http://localhost:4503',\n        endpoint: '/content/_cq_graphql/global/endpoint.json',\n        // Provide credentials if necessary (for example on Author)\n        // See https://github.com/adobe/aem-headless-client-nodejs for more info.\n        //auth: [process.env.AEM_USER, process.env.AEM_PW]\n      },\n    },\n  }\n}\n```\n\nNote that for real use cases you'll need to point the configuration to an AEM Publish instance because otherwise images won't render.\n\n## Content Rendering\n\n---\n\nFirst, copy the `RenderContent.vue` component from the integration package.\nYou can later customize this to your needs.\n\n```bash\ncp node_modules/@bounteous/vue-storefront-aem/components/RenderContent.vue cms/\n```\n\nYou may need to create the `cms` folder if it doesn't already exist in your project.\nThen add the package and Vue component import wherever you want to use it, for example in the `Home.vue`:\n\n```javascript\nimport { useContent } from '@bounteous/vue-storefront-aem';\nimport RenderContent from '~/cms/RenderContent.vue'\n```\n\nAdd `RenderContent` to your list of components:\n\n```javascript\ncomponents: {\n    RenderContent,\n  },\n```\n\nAnd use it like this:\n\n```javascript\nsetup() {\n\n  const {\n    search,\n    content,\n    loading,\n    error\n  } = useContent();\n\n  onSSR(async () => {\n    const query = `\n    {\n      blogArticleAuthorList {\n        items {\n          name\n          title\n        }\n      }\n    }\n    `;\n    await search({ query: query });\n  });\n\n  return {\n    content,\n    loading,\n    error,\n  };\n}\n```\n\nLastly, render the content using the Vue component:\n\n```javascript\n<RenderContent v-if=\"content\" :content=\"content\" />\n```\n","readmeFilename":"README.md"}