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:

CODE

yarn add @vidispine/vdt-vue-components

If you are using NPM:

CODE

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.

CODE

$ 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

CODE

$ yarn link

If successful, you should see output in terminal that says

CODE

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:

CODE

$ 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:

CODE

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

$ yarn install

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

CODE

# Any modern app running ES6 or later
$ yarn watch

CODE

# Non ES6 projects
$ yarn watch-umd

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

CODE

$ yarn test

Using the NPM package

Using the GitHub repository

Cloning the vdt-vue-components repository

Related articles