c2-ui-kit-v3

C2 UI KIT built on Vue 3 + Vite

This is a Vue 3 component library with minimal styling used that allows devs to fully customize compoents in their project repos. Example copy paste code provided in docs on how to get started.

Install

npm i c2-ui-kit-vue-3

Project Requirements

• vue 3
• vue router
• sass

Recommended Setup

• vite with @vitejs/plugin-vue
• alias vite.config.js recommended

resolve: {
    alias: [
        {
            find: 'uikit',
            replacement: path.join(__dirname, './node_modules/c2-ui-kit-v3/src/components')
        },
        {
            find: 'uikitdirectives',
            replacement: path.join(__dirname, './node_modules/c2-ui-kit-v3/src/directives')
        }
    ]
},

Components

• Accordion

    import C2Accordion from 'uikit/c2-accordion/c2-accordion.vue';
    import C2AccordionItem from 'uikit/c2-accordion/c2-accordion-item.vue';

    components: {
        C2Accordion,
        C2AccordionItem
    },

• Breadcrumbs

    import C2Breadcrumbs from 'uikit/c2-breadcrumbs/c2-breadcrumbs.vue';
    import C2BreadcrumbItem from 'uikit/c2-breadcrumbs/c2-breadcrumb-item.vue';

    components: {
        C2Breadcrumbs,
        C2BreadcrumbItem
    },

• Dropdown Menu

    import C2DropdownMenu from 'uikit/c2-dropdown-menu/c2-dropdown-menu.vue';

    components: {
        C2DropdownMenu
    },

• Hero

    import C2HeroBanner from 'uikit/c2-hero/c2-hero-banner.vue';

    components: {
        C2HeroBanner
    },

• Image

    import C2Image from 'uikit/c2-image/c2-image.vue';

    components: {
        C2Image
    },

• Modal

    import C2Modal from 'uikit/c2-modal/c2-modal.vue';

    components: {
        C2Modal
    },

• Pagination

    import C2Pagination from 'uikit/c2-pagination/c2-pagination.vue';

    components: {
        C2Pagination
    },

• Product Gallery

    import C2ProductGallery from 'uikit/c2-product-gallery/c2-product-gallery.vue';

    components: {
        C2ProductGallery
    },

• Site Alert

    import C2SiteAlert from 'uikit/c2-site-alert/c2-site-alert.vue';e';

    components: {
        C2SiteAlert
    },

• Slider

    import C2Slider from 'uikit/c2-slider/c2-slider.vue';

    components: {
        C2Slider
    },

• Video

    import C2Video from 'uikit/c2-video/c2-video.vue';

    components: {
        C2Video
    },

Directives

• click-outside

    import C2ClickOutside from 'uikitdirectives/c2-click-outside';

    directives: {
        C2ClickOutside
    },

• debounce

    import C2Debounce from 'uikitdirectives/c2-debounce';

    directives: {
        C2Debounce
    },

• resize

    import C2Resize from 'uikitdirectives/c2-resize';

    directives: {
        C2Resize
    },

• scoll-lock

    import C2ScrollLock from 'uikitdirectives/c2-scroll-lock';

    directives: {
        C2ScrollLock
    },

• scroll

    import C2Scroll from 'uikitdirectives/c2-scroll';

    directives: {
        C2Scroll
    },

• scrollTo

    import C2ScrollTo from 'uikitdirectives/c2-scrollTo';

    directives: {
        C2ScrollTo
    },

• touch

    import C2Touch from 'uikitdirectives/c2-touch';

    directives: {
        C2Touch
    },