@coreui/vue
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.11 • Public • Published

    CoreUI Vue components library

    Tweet NPM Downloads Build License Coverage Daily project check

    A @coreui/vue v3 components library project

    Over 90 bootstrap based Vue.js components and directives!

    For library guide please visit our Documentation site »

    Check out demo of components usage: CoreUI Vue Admin Template »

    Template

    Installation

    Before installation you need to install node and npm on your machine.

    npm install @coreui/vue

    Styling

    Components are styled using @coreui/coreui CSS library, but you can use them also with bootstrap CSS library. That is possible because @coreui/coreui library is compatible with bootstrap, it just extends its functionalities. The only exception is custom CoreUI components, which don't exist in the Bootstrap ecosystem (template components, callout, switch).

    Styles have to be imported separately! Import CoreUI CSS library (recommended), or Bootstrap library

    Installation:

    npm install @coreui/coreui

    Basic usage:

    @import "~@coreui/coreui/scss/coreui";

    Registering components

    // Installing whole package
    import CoreuiVue from '@coreui/vue';
    Vue.use(CoreuiVue);
    
    // Registering a single component
    import { CSwitch, CButton } from '@coreui/vue';
    
    // globally
    Vue.component('CButton', CButton)
    
    export default {
      ...
      // locally
      components: {
        CSwitch
      },
      ...
    }

    Registering directives

    // Registering single directives
    import { CEmitRootEvent, CTooltip } from '@coreui/vue';
    
    // globally
    Vue.directive('c-emit-root-event', CEmitRootEvent)
    
    export default {
      ...
      // locally
      directives: {
        'c-tooltip': CTooltip
      },
      ...
    }

    Optimization

    Components are imported from CommonJS module by default, if you want to use only specific components you can import them from source to enable treeshaking.

    // Import components this way to allow tree shaking
    import { CDataTable } from '@coreui/vue/src';

    Code autocompletion

    If you are using VS Code editor with Vetur plugin installed, then the editor would display hints for our library (component names and prop names).

    Changelog

    See the GitHub release history.

    Contributing

    See CONTRIBUTING.md.

    Credits

    Some design ideas and solutions in this library are inspired by Bootstrap-Vue library

    Install

    npm i @coreui/vue

    Homepage

    coreui.io

    DownloadsWeekly Downloads

    18,788

    Version

    3.2.11

    License

    MIT

    Unpacked Size

    4.81 MB

    Total Files

    332

    Last publish

    Collaborators

    • coreui