@uptake/cdk-vue

Component Development Kit

Background

The Component Development Kit (CDK) is a collection of reusable JavaScript components built on top of the Uptake Design System. Components are currently implemented in Vue.js and are available via a single npm package. This simple dependency provides access to all available components while ensuring compatibility with the Uptake Design System.

Install the dependency: npm install --save @uptake/cdk-vue

import Vue from 'vue';

import '@uptake/cdk-vue/design-system.css';

import cdkButton from '@uptake/cdk-vue/cdkButton';
import cdkSelectDropdownField from '@uptake/cdk-vue/cdkSelectDropdownField';

new Vue({
    el: '#app',
    components: {
        cdkButton,
        cdkSelectDropdownField
    },
    data() {
        return {
            cities: ['Chicago', 'New York', 'San Francisco']
        };
    },
    template: \`
        <div>
            <h1 class="up-ds-type up-ds-type--regular-heading-l">Hello World</h1>
            <cdk-select-dropdown-field
                label="Cities"
                placeholder="Select a city"
                :options='cities'>
            </cdk-select-dropdown-field>
            </br>
            <cdk-button
                label="Submit"
                base>
            </cdk-button>
        </div>\`
});