{"_id":"@anivive/vue-contentful-rich-text","_rev":"9-cec05c218932e807cf1b49991d4f35a2","name":"@anivive/vue-contentful-rich-text","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@anivive/vue-contentful-rich-text","version":"1.0.1","keywords":["vue","vue-3","contentful","rich-text"],"author":{"url":"https://github.com/dan2kx","name":"Dan McGowan"},"license":"MIT","_id":"@anivive/vue-contentful-rich-text@1.0.1","maintainers":[{"name":"dan2kx","email":"dmcgowan@anivive.com"},{"name":"skyler.stearns","email":"skyler@anivive.com"},{"name":"sirago","email":"nick@sirago.org"}],"contributors":[{"url":"https://github.com/SkylerStearns","name":"Skyler Stearns"},{"url":"https://github.com/sirago","name":"Nick Sirago"}],"homepage":"https://github.com/Anivive/vue-contentful-rich-text#readme","bugs":{"url":"https://github.com/Anivive/vue-contentful-rich-text/issues"},"dist":{"shasum":"af4afb610d324f578694de05aee9bd45e5630806","tarball":"https://registry.npmjs.org/@anivive/vue-contentful-rich-text/-/vue-contentful-rich-text-1.0.1.tgz","fileCount":9,"integrity":"sha512-UzzXSQk/dy2KBAUX3AmjaOhvvua2YfbgTxrmdPJ54k2ABJfIl6T50gAHegq7CzIANZqxAmZuIGkzygHxvwxkOw==","signatures":[{"sig":"MEQCIDxvWJBUuoel0L8RLFEuKv56ds6eK42cgVEDa9tVlZP7AiAFHvDbxvcjxY71eO+1f8qfwXyREkeYg+/hpvqYK2JtOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb7ACRA9TVsSAnZWagAAQUcQAIR2628zZUHF+MKMlxnC\nv8D/2cQ6IZhWBVBYNhcOzc6Gji3QgjputNqwDXc1N/38U831UX4nyybJYikO\nrkOCA353OP4Llz1CX7yuePZbGfmsFW3gPnz8Xvu3pofL5HfrNjh9yxC0BYHC\nhvkR+zzdetX03OHhS5xv4QO/OYAmS1cIxzhRjH1E+wyPCcgdolFzuAsngbI/\nVD2oQsh1c5ZOcwmg5ecuozobyxYXJO0xGDimYTVigVsArSapeZvJZjmwS4FU\nxdsTMtNJn4M4r9nB5jMM6NSO0um4cZ7ScOsrbjy18QaKE+ZnNgsFpDc7IYkF\nv6aTooicKINwIgYebE1vsNmgUXlWCbZhSRCPsL9GRbXbW/2ysX+fQ0ayzj6S\nJa+JwhBVyDNdhY+oBBkewWfHIw8w7PIioikBznQrFfamdwaYmE6ZK8o/YnHo\neD5wuDdHwqXU5BGymawYMyMiP8ZICu6eWrIXoc1FdibPwkfiWjVQiJA4UQmm\nPCXtfSrBmdoCI+CPApUDknLC95n75lwCT4IHL/xqVXkjOF0GHn7D3RBoR5WH\n7oyad5SROpa/cSWDIOq+DKbr5ToiOpc62K3oZpZlyU6LgbEXkLpxR328oIAt\nY5xbRio9jajmb2xBWzYwGnSa7NmRds6fu4kCAuXWcZK39EAlfsTKirJBGtuY\nJomM\r\n=eNtG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.common.js","unpkg":"dist/index.min.js","gitHead":"78d3f2aa393188f4020994b7e97d113282e72c82","scripts":{"lint":"vue-cli-service lint","test":"jest ./tests","build":"vue-cli-service build --target lib --name index src/main.ts && rm ./dist/demo.html"},"_npmUser":{"name":"sirago","email":"nick@sirago.org"},"repository":{"url":"git+https://github.com/Anivive/vue-contentful-rich-text.git","type":"git"},"_npmVersion":"6.14.10","description":"A Vue component to handle Rich Text properties returned from Contentful.","directories":{},"_nodeVersion":"14.15.4","dependencies":{"@contentful/rich-text-types":"^14.1.2"},"organization":"Anivive Lifesciences Inc.","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.0.5","jest":"^26.6.3","eslint":"^6.8.0","core-js":"^3.8.1","ts-jest":"^26.4.4","vue-jest":"^5.0.0-alpha.8","babel-jest":"^26.6.3","typescript":"^4.1.3","@vue/test-utils":"^2.0.0-beta.14","@vue/cli-service":"^4.5.9","@vue/compiler-sfc":"^3.0.4","eslint-plugin-vue":"^7.2.0","eslint-plugin-import":"^2.22.1","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"^4.5.9","@typescript-eslint/parser":"^2.33.0","@vue/eslint-config-airbnb":"^5.0.2","@vue/cli-plugin-typescript":"^4.5.9","eslint-import-resolver-alias":"^1.1.2","@vue/eslint-config-typescript":"^5.0.2","@typescript-eslint/eslint-plugin":"^2.33.0"},"peerDependencies":{"vue":"^3.0.5"},"_npmOperationalInternal":{"tmp":"tmp/vue-contentful-rich-text_1.0.1_1613086399439_0.662150485900123","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-02-11T23:33:19.068Z","modified":"2026-04-21T17:05:30.794Z","1.0.1":"2021-02-11T23:33:19.680Z"},"bugs":{"url":"https://github.com/Anivive/vue-contentful-rich-text/issues"},"author":{"url":"https://github.com/dan2kx","name":"Dan McGowan"},"license":"MIT","homepage":"https://github.com/Anivive/vue-contentful-rich-text#readme","keywords":["vue","vue-3","contentful","rich-text"],"repository":{"url":"git+https://github.com/Anivive/vue-contentful-rich-text.git","type":"git"},"description":"A Vue component to handle Rich Text properties returned from Contentful.","contributors":[{"url":"https://github.com/SkylerStearns","name":"Skyler Stearns"},{"url":"https://github.com/sirago","name":"Nick Sirago"}],"maintainers":[{"email":"carchuleta@anivive.com","name":"anivive-cameron"},{"email":"jhager@anivive.com","name":"jhager_anivive"},{"email":"itadmin@anivive.com","name":"anivive_bot"},{"email":"skyler@anivive.com","name":"skyler.stearns"},{"email":"dmcgowan@anivive.com","name":"dan2kx"},{"email":"cody@anivive.com","name":"codyanivive"},{"email":"sfacista@anivive.com","name":"sfacista"}],"readme":"<div style=\"text-align:center\" align=\"center\">\n\n![Package Logo](https://res.cloudinary.com/dzdcsnjvp/image/upload/v1612208324/software/vc-rectangle.png)\n\n\n[![MIT License](https://img.shields.io/badge/license-MIT-brightgreen)](/templates/LICENSE.md)\n[![Vue](https://img.shields.io/badge/vue-3.0.5-%2342b883)](https://v3.vuejs.org/)\n[![Typescript](https://img.shields.io/badge/typescript-4.1.3-blue)](https://www.typescriptlang.org/)\n[![Jest](https://img.shields.io/badge/jest-26.6.3-red)](https://jestjs.io/en/)\n[![Testing Coverage](https://img.shields.io/badge/coverage-100%25-green)](https://github.com/Anivive/vue-contentful)\n\n# Vue Contentful Rich Text\n\nVue 3 compatible package for outputting a Contentful Rich Text Field. \n\nContentful is a modern content management solution, designed as a framework to serve content in a presentation-independant way.\n\n---\n</div> \n\n\n## Table of Contents\n\n* [Getting Started](#getting-started)\n* [Table of Contents](#table-of-contents)\n* [Advanced Usage](#advanced-usage)\n* [Contributing Guidelines](#contributing-guidelines)\n* [Code Of Conduct](#code-of-conduct)\n* [Bugs and Feature Requests](#bugs-and-feature-requests)\n* [Copyright and License](#copyright-and-license)\n\n---\n\n## Getting Started\n### Install\n```\nnpm install @anivive/vue-contentful-rich-text\n```\n\n### Usage\n```\nimport VueContentFul from 'vue-contentful-rich-text';\n```\n\nTo use VueContentfulRichText, import the package onto your component directly and bind in the components key\n\n```\nexport default {\n  components: {\n    VueContentfulRichText\n  }\n}\n```\n\nYou can then add to your document markup wherever you need to display a Contentful Rich Text field, just pass in the field with the document property.\n\n\n```\n<vue-contentful-rich-text :document=\"richTextField\" />\n```\n\n### Output\nRich text items are converted to basic block and inline html elements which can be styled using css.\n\n***Block elements:***\n```html\n<h1> <h2> <h3> <h4> <h5> <h6> <p> <ul> <ol> <li> <hr> <blockquote>\n```\n\n***Inline elements:***\n```html\n<strong> <u> <em> <code>\n```\n\n---\n\n## Advanced Usage\nThe Contentful Content Model allows for embedded entries and assets to be linked within a rich text field. To output these, Vue Templates and Scoped Slots can be used to allow for a custom implementation for each within your project. \n\nA rich-text object consists of `json` and `links` properties which descibe the 'document' and the embedded items' properties within. This plugin will handle getting the linked data from the links property by matching the `sys.id` field, which must be added in your query.\n\n### embedded-asset\n```html\n  <template #embedded-asset=\"item\">\n    <div class=\"image-container\">\n      <img :src=\"item.url\" :alt=\"item.title\" />\n    </div>\n  </template>\n```\n\n### embedded-entry\n```html\n  <template #embedded-entry=\"item\">\n    <div>{{ item.title }}</div>\n  </template>\n```\n\n### embedded-inline-entry\n```html\n  <template #embedded-inline-entry=\"item\">\n    <div>{{ item.title }}</div>\n  </template>\n```\n\n### inline-asset-link\n```html\n  <template #inline-asset-link=\"item\">\n    <a href=\"item.url\">{{ item.title }}</div>\n  </template>\n```\n\n### inline-entry-link\n```html\n  <template #inline-entry-link=\"item\">\n    <a href=\"item.url\">{{ item.title }}</div>\n  </template>\n```\n---\n\n\n\n## Contributing Guidelines\nPlease read through our [contributing guidelines](CONTRIBUTING.md). Included are directions\nfor opening issues, coding standards, and notes on development.\n\nMoreover, if your pull request contains JavaScript patches or features, you must include relevant\nunit tests. All HTML and CSS should conform to the Code Guide, maintained by Mark Otto.\n\n---\n\n\n\n## Code Of Conduct\nPlease read through our [code of conduct](CODE_OF_CONDUCT.md).\n\n---\n\n\n\n## Bugs and Feature Requests\nFound a bug or have a feature request? Please first read the issue guidelines and search for\nexisting and closed issues.\n\nIf your problem or idea is not addressed yet, please\n[open a new issue](https://github.com/Anivive/vue-package-starter/issues).\n\n\n\n## Thanks\nThank you to all of you who have contributed to this package.\n[[Contribute to the Project](CONTRIBUTING.md)]\n\n\n\n## Copyright and License\nCode and documentation copyright 2021 Anivive Lifesciences Code released under the [MIT License](LICENSE.md).\n\nDocs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).\n\nPlease note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md).\nBy participating in this project you agree to abide by its terms.\n\n\n\n---\n\n\n\nStatus badges created using [Shields.io](https://github.com/badges/shields).\n","readmeFilename":"README.md"}