Version: 4.x

Installation

Vime provides various packages that can be used to quickly get started depending on the library/framework you're using, scroll down to the section that is relevant to you.

note

If you have any issues or struggles with the installation steps below please raise an issue 🐛

CDN#

The easiest way to get going with Vime is to simply load it from a CDN. We highly recommend using JSDELIVR for the best performance. Simply insert the following inside the <head> element of your HTML file.

<!-- Default theme. ~960B -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@vime/core@^4/themes/default.css"
/>

<!-- Optional light theme (extends default). ~400B -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@vime/core@^4/themes/light.css"
/>

<!-- Library and all of its components are lazy loaded, so nothing to sweat about here. ~3kB -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@vime/core@^4/dist/vime/vime.esm.js"
></script>

And ... we're all done 🎉 That was anticlimactic 😞 Let's move onto setting up our player.

Rollup / Webpack#

A custom elements bundle is available so you can import components and register them individually. This is a more flexible alternative to the lazy loading approach used by the CDN.

Let's install the @vime/core package by running the following in our terminal...

npm i @vime/core

Now let's first load the CSS for the player themes, which are small files that only contain a bunch of CSS variables for styling the player. You can either load them from the CDN, or bundle them into your project directly (this will require a plugin). See our example configurations for Rollup and Webpack.

// Default theme. ~960B
import '@vime/core/themes/default.css';

// Optional light theme (extends default). ~400B
import '@vime/core/themes/light.css';

Now you can can start bundling Vime by importing the components you require and their dependencies into your project, and registering them in the custom elements registry like so...

info

All components list their dependencies inside their API documentation under the ##Dependencies section. See the Video component as an example.

import { Player, Video, File } from '@vime/core';

customElements.define('vm-player', Player);
customElements.define('vm-video', Video);
customElements.define('vm-file', File);

And ... we're all done 🎉 Let's move onto setting up our player.

Stencil#

Luckily for you Vime is built with Stencil so it works out of the box very easily.

Let's first load the CSS for the player themes, which are small files that only contain a bunch of CSS variables for styling the player. You can either load them from the CDN, or if you're using the Shadow DOM throughout your application, add the following (after adjusting paths) to the component that is wrapping the player...

[component].css

/* Default theme. ~960B */
@import '../../../node_modules/@vime/core/themes/default.css';

/* Optional light theme (extends default). ~400B */
@import '../../../node_modules/@vime/core/themes/light.css';

Now let's install the @vime/core package by running the following in our terminal...

npm i @vime/core

Finally, we import it into the root of our application...

index.ts

import '@vime/core';

And ... we're all done 🎉 That was anticlimactic 😞 Let's move onto setting up our player.

Svelte#

You have two options with Svelte due to it having perfect web components support. You can either follow the instructions for loading it from the CDN and use the Vime web components in their natural form, or you can use the Svelte bindings from the @vime/svelte package, which wraps all the web components inside Svelte components so you can feel right at home. Some other advantages for using @vime/svelte include typed + documented components, and additional helpers for extending Vime with custom components.

Let's first load the CSS for the player themes, which are small files that only contain a bunch of CSS variables for styling the player. Add the following to the <head> element of your HTML file...

<!-- Default theme. ~960B -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@vime/core@^4/themes/default.css"
/>

<!-- Optional light theme (extends default). ~400B -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@vime/core@^4/themes/light.css"
/>

Now let's install the @vime/svelte package by running the following in our terminal...

npm i @vime/svelte

And ... we're all done 🎉 That was anticlimactic 😞 Let's move onto setting up our player.

React#

Unfortunately React has poor web components support ... but we have you covered with our @vime/react package, which wraps all the Vime web components inside React components so it feels natural to interact with, and it removes all the limitations of working with web components inside React.

Let's first load the CSS for the player themes, which are small files that only contain a bunch of CSS variables for styling the player. Add the following to the root of your application...

// Default theme. ~960B
import '@vime/core/themes/default.css';

// Optional light theme (extends default). ~400B
import '@vime/core/themes/light.css';

Alternatively, you can load the themes from the CDN. Now let's install the @vime/react package by running the following in our terminal...

npm i @vime/react

And ... we're all done 🎉 That was anticlimactic 😞 Let's move onto setting up our player.

Preact#

You have two options with Preact due to it having perfect web components support. You can either follow the instructions for loading it from the CDN and use the Vime web components in their natural form, or you can use the Vime React components by setting up preact-compat, and following the React installation instructions.

Vue#

info

Vime now supports both Vue 2 (@vime/vue) and Vue 3 (@vime/vue-next) 🚀

You have two options with Vue due to it having perfect web components support. You can either follow the instructions here for loading the web components in their natural form, or you can use the Vue bindings from Vime, which wrap all the web components inside Vue components so you can feel right at home.

Let's first load the CSS for the player themes, which are small files that only contain a bunch of CSS variables for styling the player. Add the following to the root of your application...

// Default theme. ~960B
import '@vime/core/themes/default.css';

// Optional light theme (extends default). ~400B
import '@vime/core/themes/light.css';

Alternatively, you can load the themes from the CDN. Now let's install the package by running the following in our terminal...

# Vue 2
npm i @vime/vue

# Vue 3
npm i @vime/vue-next

And ... we're all done 🎉 That was anticlimactic 😞 Let's move onto setting up our player.

Angular#

Are you a 🥕 farmer?

You have two options with Angular due to it having perfect web components support. You can either follow the instructions here for loading the web components in their natural form which can be slightly tedious, or you can use the @vime/angular package to make the installation a breeze.

Let's first load the CSS for the player themes, which are small files that only contain a bunch of CSS variables for styling the player. Add the following to the root of your application styles...

/* Default theme. ~960B */
@import '~@vime/core/themes/default.css';

/* Optional light theme (extends default). ~400B */
@import '~@vime/core/themes/light.css';

Alternatively, you can load the themes from the CDN. Now let's install the @vime/angular package by running the following in our terminal...

npm i @vime/angular

For the last step we simply need to import the Module into our application, you can do this at the root AppModule or wherever makes the most sense:

app.module.ts

import { NgModule } from '@angular/core';
import { Module } from '@vime/angular';

@NgModule({
  imports: [Module],
})
export class AppModule {
  // ...
}

And ... we're all done 🎉 Let's move onto setting up our player.