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 Vidispine 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

$ yarn link

If successful, you should see output in terminal that says

success Registered "@vidispine/vdt-vue-components"


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:

$ yarn link @vidispine/vdt-vue-components


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:

$ cd ~/VDT/vdt-vue-components/

$ yarn install


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


# Any modern app running ES6 or later
$ yarn watch


# Non ES6 projects
$ yarn watch-umd


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

$ yarn test