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 email@example.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