Vue-doc-preview is a Vue.js component designed to embed and display various document types directly within a web application. It supports rendering markdown, plain text, code with syntax highlighting, and can even fetch and display office documents (docx, pptx, xlsx) from a provided URL. The current stable version is 0.3.2, with recent minor releases indicating active development and feature additions like URL-based document loading and request configuration since v0.3.0. A key differentiator is its ability to handle multiple formats and integrate custom styling for markdown and text, while maintaining a relatively small footprint. It offers flexibility by allowing content to be passed directly via a `value` prop or fetched remotely via a `url` prop.
npm install vue-doc-previewVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to embed `VueDocPreview` to display markdown content with custom code block styling, fetch and render an office document from a public URL, and display a TypeScript code snippet with highlighting.
Ensure only one of `value` or `url` is set, or explicitly set `value` to an empty string (`''`) or `null` if you intend to load content from `url`.
Refer to the documentation and use the appropriate style prop (`mdStyle` or `textStyle`) matching the `type` of document you are displaying.
Be explicit with the `height` value, e.g., use `height: 90` for 90% of parent height, or `height: 500` for 500 pixels.
Test office document rendering thoroughly across target browsers. Ensure the `url` points to a document with correct CORS policies. For critical enterprise-grade office document viewing, consider integrating with dedicated viewer services (e.g., Google Docs Viewer, Microsoft Office Web Viewers) that offer more robust and consistent rendering.
Consult the `highlight.js` documentation and the component's source code (if necessary) to add support for more languages or customize the highlighting behavior.
Run `npm install vue-doc-preview` or `yarn add vue-doc-preview` in your project directory to install the package.
Ensure your component's `<script>` section explicitly registers it: `export default { components: { VueDocPreview }, ... }`.When you want to switch to loading from `url`, make sure to set the `value` prop to an empty string (`''`) or `null`.
Ensure the server hosting the document sends the appropriate `Access-Control-Allow-Origin` HTTP headers, allowing your domain to fetch the resource. If you control the server, configure it for CORS. If not, you may need to proxy the request through your own backend or use a `value` prop with pre-fetched content.