Preview

Preview is used to display a thumbnail. If your src points to an external provider then the thumbnail is automatically loaded. If you'd like to know how it compares to other options then see the getting started page.

Installation

NPM

npm install @vime-js/preview

Yarn

yarn add @vime-js/preview

JSDELIVR

<script src="https://cdn.jsdelivr.net/npm/@vime-js/preview"></script>

The dist folder inside the package contains multiple exports:

• preview.js is a UMD development build that can be used directly in the browser via the <script> tag.
• preview.esm.js is intended for use with modern bundlers like Webpack or Rollup.
• preview.min.js is a UMD production build that can be used directly in the browser via the <script> tag.
• preview.esm.min.js is an ESM production build that can be used directly in modern browsers via the <script type="module"> tag.

info

• UMD builds are exported under the Vime namespace.
• If you're using a bundler then it will automatically pull in the correct files.
• If you're using svelte-loader or rollup-plugin-svelte then you'll receive the uncompiled components.

Setup

JavaScript

import { Preview } from '@vime-js/preview';

const target = document.getElementById('preview-target');

// Mount

const preview = new Preview({

target,

// If you'd like to initialize any props on setup, you can do so here.

props: {},

});

// ...

// Destroy

preview.$destroy();

info

See the client-side component API for the complete set of component initialization options.

Svelte

<Preview bind:this="{preview}" />

<script>

import { onMount } from 'svelte';

import { Preview } from '@vime-js/preview';

let preview;

onMount(() => {

/**

* If you need to call any methods, you have access

* to the preview instance here.

**/

});

</script>

Where to next?

Go to the API page to see what props/methods/events are exposed and how you can interact with them.