Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@marvr/storyblok-rich-text-vue-renderer

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@marvr/storyblok-rich-text-vue-renderer - npm Package Compare versions

Comparing version 3.1.2 to 3.2.0

dist/index.cjs

71

package.json
{
"name": "@marvr/storyblok-rich-text-vue-renderer",
"version": "3.1.2",
"main": "./dist/storyblok-rich-text-vue-renderer.umd.js",
"module": "./dist/storyblok-rich-text-vue-renderer.es.js",
"types": "./dist/storyblok-rich-text-vue-renderer.d.ts",
"version": "3.2.0",
"keywords": [
"rich-text",
"renderer",
"storyblok",
"vue.js",
"plugin"
],
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/MarvinRudolph/storyblok-rich-text-renderer.git"
},
"author": "Marvin Rudolph",
"type": "module",
"bugs": {
"url": "https://github.com/MarvinRudolph/storyblok-rich-text-renderer/issues"
},
"homepage": "https://github.com/MarvinRudolph/storyblok-rich-text-renderer#readme",
"files": [
"dist",
"src"
],
"exports": {
".": {
"import": "./dist/storyblok-rich-text-vue-renderer.es.js",
"require": "./dist/storyblok-rich-text-vue-renderer.umd.js"
}
"import": "./dist/index.js",
"require": "./dist/index.cjs"
},
"./src": "./src/index.ts"
},
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
"main": "./dist/index.cjs",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"peerDependencies": {
"vue": "^3.2.27"
},
"dependencies": {
"@marvr/storyblok-rich-text-types": "^3.1.2",
"vue": "^3.1.5"
"@marvr/storyblok-rich-text-types": "3.2.0",
"vue": "^3.2.27"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.3.0",
"@vue/compiler-sfc": "^3.1.5",
"typescript": "^4.3.5",
"vite": "^2.4.4",
"@vitejs/plugin-vue": "^2.0.0",
"esbuild": "^0.14.11",
"rollup": "^2.64.0",
"rollup-plugin-dts": "^4.1.0",
"rollup-plugin-esbuild": "^4.8.2",
"vite": "^2.5.1",
"vite-plugin-dts": "^0.9.9",
"vue-router": "^4.0.1",
"vue-tsc": "^0.0.24"
"vue-tsc": "^0.30.5"
},

@@ -33,6 +57,7 @@ "optionalDependencies": {

},
"files": [
"dist"
],
"gitHead": "8dda1678cf682d8cf7ae1d7389bea69d0e7c673d"
}
"scripts": {
"build": "vue-tsc --noEmit && vite build && pnpm run rollup-dts && rm -rf dist/src",
"rollup-dts": "rollup -c rollup.config.ts --configPlugin esbuild"
},
"readme": "# @marvr/storyblok-rich-text-vue-renderer\n\n> Vue 3 plugin for rendering the rich-text content.\n\n## Installation\n\n```bash\nyarn add @marvr/storyblok-rich-text-vue-renderer@next\n# or\nnpm install @marvr/storyblok-rich-text-vue-renderer@next\n```\n\n## Usage\n\n### Register the plugin\n```ts\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { plugin } from '@marvr/storyblok-rich-text-vue-renderer';\n\nconst app = createApp(App);\napp.use(plugin(/* options */));\napp.mount('#app');\n```\n\n### Use the renderer component\n\n```html\n<script lang=\"ts\">\nimport { defineComponent, shallowReactive } from 'vue';\nimport { RichTextRenderer } from '@marvr/storyblok-rich-text-vue-renderer';\n\nexport default defineComponent({\n components: {\n RichTextRenderer\n },\n setup() {\n const doc = shallowReactive(\n // fetched document from Storyblok API\n );\n\n return { doc }\n }\n})\n</script>\n<template>\n <RichTextRenderer :document=\"doc\">\n</template>\n```\n\n### Directly use the function\n\n```html\n<script lang=\"ts\">\nimport { defineComponent, shallowReactive } from 'vue';\nimport { useRenderer } from '@marvr/storyblok-rich-text-vue-renderer';\n\nexport default defineComponent({\n components: {\n RichTextRenderer\n },\n setup() {\n const renderer = useRenderer();\n const doc = shallowReactive(\n // fetched document from Storyblok API\n );\n\n const renderedDocument = renderer.renderDocument(doc);\n }\n})\n</script>\n```"
}
# @marvr/storyblok-rich-text-vue-renderer
## WIP
> Vue 3 plugin for rendering the rich-text content.
## Installation
```bash
yarn add @marvr/storyblok-rich-text-vue-renderer@next
# or
npm install @marvr/storyblok-rich-text-vue-renderer@next
```
## Usage
### Register the plugin
```ts
import { createApp } from 'vue';
import App from './App.vue';
import { plugin } from '@marvr/storyblok-rich-text-vue-renderer';
const app = createApp(App);
app.use(plugin(/* options */));
app.mount('#app');
```
### Use the renderer component
```html
<script lang="ts">
import { defineComponent, shallowReactive } from 'vue';
import { RichTextRenderer } from '@marvr/storyblok-rich-text-vue-renderer';
export default defineComponent({
components: {
RichTextRenderer
},
setup() {
const doc = shallowReactive(
// fetched document from Storyblok API
);
return { doc }
}
})
</script>
<template>
<RichTextRenderer :document="doc">
</template>
```
### Directly use the function
```html
<script lang="ts">
import { defineComponent, shallowReactive } from 'vue';
import { useRenderer } from '@marvr/storyblok-rich-text-vue-renderer';
export default defineComponent({
components: {
RichTextRenderer
},
setup() {
const renderer = useRenderer();
const doc = shallowReactive(
// fetched document from Storyblok API
);
const renderedDocument = renderer.renderDocument(doc);
}
})
</script>
```
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc