Document toolboxDocument toolbox

Vidispine

Using the VidiCore Development Toolkit UI components

There are two ways to use the UI components from VDT; you can either install the NPM package you got access to, or you can clone the GitHub repository and make that available to your application. 

If you only want to use the UI components without changes we recommend that you use the NPM repository as it will be more stable, with regular updates coinciding with VidiCore releases. If you on the other hand are on the more adventurous side or need to make changes, you should use the GitHub repo. This one is updated more often than the NPM package with the latest components and fixes. 

Using the NPM package

What you need to do is head over to your application folder and, depending on if you are using yarn or npm, run one of the commands below to install. 

 

If you are using Yarn:

yarn add @vidispine/vdt-vue-components

If you are using NPM:

npm install @vidispine/vdt-vue-components --save

Using the GitHub repository

When you are using the GitHub repo, it's a little bit more work, but on the other hand, you'll have the choice to make any changes you want. 

Cloning the vdt-vue-components repository

Navigate to your VDT project root folderand clone the vdt-vue-components repository. This will create a folder for you.

$ git clone git@github.com:vidispine/vdt-vue-components.git

 

Quick Reference: https://github.com/vidispine/vdt-vue-components


Configure your project to use vdt-vue-components.

Navigate to the previously  cloned repository folder vdt-vue-components in your project folder, and then create the link to the components using

If successful, you should see output in terminal that says

 

Navigate to your application folder, which probably exists in the same project folder where you put the components. Link the components to our project with the registration ID we got in the previous step:


Optional “cherry on top”:

Do this if you want to get immediate page refresh when saving document, ESLint checking and other goodies

In a new terminal, change to the vdt-vue-components directory and run the following command to install all the dependencies:

 

Run one of the following "watch" commands to build on save

 

Additionally you can run tests to double check if everything is running as is should