coreui / coreui-vue

Bootstrap 5 based Vue 3 components and directives. CoreUI for Vue.js replaces and extends the Bootstrap 5 javascript. Components have been built from scratch as true Vue 3 components.

CoreUI for Vue.js

Vue.js Components Library built on top of Bootstrap 5 and TypeScript.
Explore CoreUI for Vue.js docs »

Report bug · Request feature · Blog

Table of contents

• Quick start
• Components
• Status
• Bugs and feature requests
• Documentation
• Frameworks
• Templates
• Contributing
• Community
• Versioning
• Creators
• Support CoreUI Development
• Copyright and license

Quick start

Instalation

Several quick start options are available:

• Download the latest release
• Clone the repo: git clone https://github.com/coreui/coreui-vue.git
• Install with npm: npm install @coreui/vue
• Install with yarn: yarn add @coreui/vue

Read the Getting started page for information on the framework contents, templates and examples, and more.

Stylesheets

Vue 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 are custom CoreUI components, which don't exist in the Bootstrap ecosystem.

CoreUI CSS files

Installation

yarn add @coreui/coreui

or

npm install @coreui/coreui --save

Basic usage

import '@coreui/coreui/dist/css/coreui.min.css'

Bootstrap CSS files

Installation

yarn add bootstrap

or

npm install bootstrap

Basic usage

import "bootstrap/dist/css/bootstrap.min.css";

Components

• Vue Accordion
• Vue Alert
• Vue Avatar
• Vue Badge
• Vue Breadcrumb
• Vue Button
• Vue Button Group
• Vue Callout
• Vue Card
• Vue Carousel
• Vue Checkbox
• Vue Close Button
• Vue Collapse
• Vue Date Picker PRO
• Vue Date Range Picker PRO
• Vue Dropdown
• Vue Floating Labels
• Vue Footer
• Vue Header
• Vue Image
• Vue Input
• Vue Input Group
• Vue List Group
• Vue Loading Button PRO
• Vue Modal
• Vue Multi Select PRO
• Vue Navs & Tabs
• Vue Navbar
• Vue Offcanvas
• Vue Pagination
• Vue Placeholder
• Vue Popover
• Vue Progress
• Vue Radio
• Vue Range
• Vue Rating
• Vue Select
• Vue Sidebar
• Vue Smart Pagination PRO
• Vue Smart Table PRO
• Vue Spinner
• Vue Switch
• Vue Table
• Vue Textarea
• Vue Time Picker PRO
• Vue Toast
• Vue Tooltip

Status

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Documentation

The documentation for the CoreUI & CoreUI PRO is hosted at our website CoreUI for Vue

Running documentation locally

1. Run yarn install or npm install to install the Node.js dependencies.
2. Run yarn bootstrap or npm run bootstrap to link local packages together and install remaining package dependencies.
3. From the root directory, run yarn docs:dev or npm run docs:dev (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
4. Open http://localhost:8000/ in your browser, and voilà.

Frameworks

CoreUI supports most popular frameworks.

• CoreUI for Angular
• CoreUI for Bootstrap (Vanilla JS)
• CoreUI for React
• CoreUI for Vue

Templates

Fully featured, out-of-the-box, templates for your application based on CoreUI.

• Angular Admin Template
• Bootstrap Admin Template
• React Admin Template
• Vue Admin Template

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at https://editorconfig.org/.

Community

Stay up to date on the development of CoreUI and reach out to the community with these helpful resources.

• Read and subscribe to The Official CoreUI Blog.

You can also follow @core_ui on Twitter.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI is maintained under the Semantic Versioning guidelines.

See the Releases section of our project for changelogs for each release version.

Creators

Łukasz Holeczek

• https://twitter.com/lukaszholeczek
• https://github.com/mrholek

Andrzej Kopański

• https://github.com/xidedix

CoreUI Team

• https://twitter.com/core_ui
• https://github.com/coreui
• https://github.com/orgs/coreui/people

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the CoreUI PRO or by becoming a sponsor via Open Collective.

Copyright and license

Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the MIT License. Docs released under Creative Commons.

coreui-vue's Issues

Problem with code-editors from coreui - show code only after click

Hi everyone!

I have problem with code editor's from coreui. It's working correctly, i mean - show code every time only after click in this editor's. I don't know why it's work that, thanks for helping.

` import Vue from 'vue'
import VueCodeMirror from 'vue-codemirror'
// require styles
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/material.css'
import 'codemirror/theme/eclipse.css'
import 'codemirror/mode/markdown/markdown'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/xml/xml'

import sampleCode from './_examples'
Vue.use(VueCodeMirror);
export default {
name: 'code-editor-test',
components: {
VueCodeMirror
},
data() {
return {
code: sampleCode.xml,
editorOption: {
tabSize: 4,
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
line: true,
mode: 'xml',
theme: 'eclipse',
autofocus: true
},
selectedMode: 'xml',
selectedTheme: 'eclipse'
}
},
computed: {
codemirror () {
return this.$refs.vueCm.codemirror
}
},
methods: {
onThemeChange (e) {
this.editorOption.theme = e.target.value
},
onModeChange (e) {
this.editorOption.mode = e.target.value
this.code = sampleCode[this.editorOption.mode]
}
},
mounted() {
if (this.codemirror.options.autofocus) {
this.codemirror.setSize('100%', '50vh')
this.codemirror.focus()
}
setTimeout(() => {
this.code += '\n\n\thaha'
}, 2000)
},
props: [],

}`

Switch fires @change event already on initialization

The Switch (https://github.com/coreui/coreui-vue/blob/master/src/components/Switch/Switch.vue) already fires it's @change event when the page loads and it gets its initial value.

This is unexpected. It should only fire when the initial value changes.

Using CoreUI and BootstrapVue

In my project, I want to use CoreUI and BootstrapVue. Therefore, I modified my App.vue file as follows:

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
    //Import bootstrap
    @import '~bootstrap';
    @import '~bootstrap-vue';
    //Import Main styles for this application
    @import 'assets/scss/style';
</style>

But as soon as I import bootstrap and bootstrap-vue, it ruins the layout of some components, mainly the horizontal nav bar. Is there a "correct" way to use both libs in coexistance?

[Vue warn]: Do not use built-in or reserved HTML elements as component id: Switch

The Issue

I get the following warning whilst running the library in my new project, trying to register the components globally (as shown in the readme:

[Vue warn]: Do not use built-in or reserved HTML elements as component id: Switch

<switch> element documentation page: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/switch

From the Vue documentation style guide:

Component names should always be multi-word, except for root App components. This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.

Suggested Change

In order to stay compliant with the style guide, and prevent this from happening in the future, I propose we add a prefix to each of custom elements, and even maybe make the prefix customizable so that, if need be (for backwards compatibility) the prefix can be turned off:

Ex: ui-switch

Sidebar nav items are both active with similar path names

Currently sidebar navigation items will become both active if they share similar path names.

ie.
routes
{ path: 'foo', name: 'Foo', component: Foo }, { path: 'foo/bar', name: 'Bar', component: Bar },

When foo/bar is selected, foo will also have an active state in the sidebar.
This becomes a hinderance when trying to do url paths like ':username/settings and /:username'

Maybe exact state would work, and allowing it to be added as a prop
vuejs/vue-router#1014

Release date

Hi when are you planning to release coreui-vue?

CSidebarBrand wrappedInLink should open with target="_blank"

Hi,

We'd like to link to main site from the admin sidebar brand logo.
However, clicking on it navigates away from the admin, since there's no target="_blank"

Would you please make it open in a new window, or make wrappedInLink an object, so we can pass href and target attributes?

https://github.com/coreui/coreui-vue/blob/v3-alpha/src/components/sidebar/CSidebarBrand.vue

Thanks!

Problem with box-shadow in CoreuUI Pro Tabs

Hi,

I have problem with box shadow in CoreuUI tabs, I can't change it, i try a lot of funcionality like
.tab-content{ border: none !important; } .tab-pane:active, .tab-pane:focus, .tab-content:active, .tab-content:focus{ box-shadow: none !important; border: none !important; }

But still doesn't work correctly, any idea for resolve this problem ? Thanks for help
I added a screnshot with my problem

[CSelect] Allow multiple values

"@coreui/coreui": "3.0.0",
"@coreui/icons": "1.0.1",
"@coreui/vue": "3.0.0",

In the docs, there's no prop available allowing for selecting multiple values in the CSelect component.

However, if I do provide the prop :multiple="true", it correctly renders a multi-select like the example from bootstrap-vue. I'm able to select multiple items and the rendering seems ok.

The only issue is with the :value.sync prop: it only returns string instead of string[]

Pagination Table

I'm trying to pass an object to pagination when using cdatatable. However the page number does not change. The objects tried: {pages:'51'} , {pages:51} or even {props:{pages:51}}
Is this an issue or I'm missing something in the object
Also the documentation could have an example for this prop.

CoreUi v3 CSelect and v-model

Hello, in source CSelect emit update:value, but in manuals you write events: input, what you will be use? We must use v-model or listen update:value?

Typescript support

Would be nice if the types for typescript can be added to this library.

[CDataTable] Add row css class on row click

    "@coreui/coreui": "3.0.0",
    "@coreui/icons": "1.0.1",
    "@coreui/vue": "3.0.0",

When I click on a row, the row-clicked event is fired. I would like the clicked row to have a different background color, so the current clicked row can be made visible to the end-user. Maybe a css class can be added to the clicked row, which can then be styled.

Could be like this (just the visual feedback):
http://tabulator.info/examples/4.5#selectable

[CDataTable] thead-top slot

"@coreui/coreui": "3.0.0",
"@coreui/icons": "1.0.1",
"@coreui/vue": "3.0.0",

I would like request an additional thead-top slot for the CDataTable component, similar to the one in Bootstrap

In my case; in a div above the table I display a list of fields. Via a draggable interface, I want to 'drag' those fields to the correct column of the table. With the additional thead-top slot I have a top field available in each row with a draggle area, to which the field should be dragged.

I could also do this with a <table> in the over-table slot, but then the width of the columns wont match.

sidebar minimizer disappear

• sidebar minimizer hides with sidebar minimized

CoreUi v3, CDataTable table-filter and other slot

Hello, how i can change table-filter slot, i want translate "Filter:" and alse "Item per page:"?

I undertent, i can create new input and use "tableFilterValue" but maybe you did some for us.

CSidebarNavLink: please let us specify a custom class

Would it be possible to please let us specify a custom class for some sidebar links, in 3.0?

            'CSidebarNavLink',
            {
                props: {
                    name: '...',
                    to: '...',
                    icon: 'fas fa-calendar-alt',
                    class: 'admin-only'
                }
            }

The class should be added to generated li:

<li class="c-sidebar-nav-item admin-only">

Thanks!

Test

test

CIcon doesn't show icons

I've added a CIcon element to my page: <CIcon :name="cilListNumbered" /> Now I get the following error print and no icon on my UI:

[Vue warn]: Property or method "cilListNumbered" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at src/views/Test.vue
at src/containers/TheContainer.vue
at src/App.vue

import Vue from 'vue'
import App from './App'
import router from './router'
import Axios from 'axios'
import VueAxios from 'vue-axios'
import CoreuiVue from '@coreui/vue'
import { BootstrapVue } from 'bootstrap-vue'
import { iconsSet as icons } from './assets/icons/icons.js'
//import 'bootstrap/dist/css/bootstrap.css'
//import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.performance = true
Vue.use(VueAxios, Axios)
Vue.use(CoreuiVue)
Vue.use(BootstrapVue)

Axios.defaults.baseURL = process.env.BASE_URL + 'api/';

new Vue({
  el: '#app',
  router,
  icons,
  template: '<App/>',
  components: {
    App
  },
})

Why is that?

styles?

Hello! Can you add styles for components?
I want use your library, but, unfortunately, for seeing coreui design I must looking for styles at coreui template and bootstrap sources :(

Control open state of SidebarNavDropdown

Hello,

I would like a possibility for the SidebarNav to control the open state of the SidebarNavDropdown.

Usecase: when expanding / collapsing the a nav dropdown, I would like to save its state in the localStorage or something similar. I see this as an UX improvement for the end user if you deal with complex sidebar menus.

Implementation suggestion: maybe provide a default open state to the _nav (state on mount) and a onChange method to store the above state.

I can help with a PR if you want ;)

Thanks

Second level sidebar dropdown auto-opens

I'm using the sidebar components with nested dropdowns. I want all my dropdowns to be closed on load, which is the case for the first level of dropdown, but the second level dropdowns are always opened on load. I've traced the issue to the second level of dropdown being loaded with the open class applied by default. I've tried to remove the open class as soon as the element loads, but that creates an accordion effect of opening and closing the dropdown I don't want. Is there a way I could load the dropdown without the open class? Thanks

<CDropdown doesnt get closed After clicking on <CDropdownItem>

Before opening an issue:

• Search for duplicate or closed issues
• Prepare a reduced test case for any bugs
• Read the contributing guidelines

When asking general "how to" questions:

• Please do not open an issue here

When reporting a bug, include:

• Operating system and version (Windows, Mac OS X, Android, iOS, etc...)
• Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
• Reduced test cases and potential fixes using CodePen or JS Bin

When suggesting a feature, include:

• As much detail as possible for what we should add and why it's important to CoreUI Admin Template
• Relevant links to prior art, screenshots, or live demos whenever possible

CTabs event not working

<CTabs @update:activeTab="activeTab"></CTabs>

As per the https://coreui.io/vue/docs/introduction/ => V 3.0.0
has @update:activeTab event but this event is not working. I checked the GitHub code some of the versions not returning the event emit.

How can I Change language of Core UI components ? Is there any method to convert Language in Core UI?

Any Way to do that will help?

ChartJS Tooltips wrong positioning with multiple charts

When I have multiple charts on the same page, the tooltip positioning gets a little funky.
The first chart works perfectly fine, but when hovering another chart, the tooltips show up on the first chart you hovered on that page:

v-model not work for CInputs and CInputRadio

I am trying to obtain the value with v-model with a CInputs and CInputRadio but it does not take changes the initial value, and proven with the only component that works for me it is with CInput

Add ability to get current filtered items in CDataTable

After looking at the docs CDataTable does not have an event that indicates what are the current filtered items after one applies a filter to a specific column or searched in a table.

Hence, after looking at the code I saw that this can be easily achieved by emitting an event after

coreui-vue/src/components/table/CDataTable.vue

Line 455 in 2ced24b

this.$emit('update:column-filter-value', this.columnFilterState)

and

coreui-vue/src/components/table/CDataTable.vue

Line 463 in 2ced24b

this.$emit('update:table-filter-value', this.tableFilterState)

for instance

this.$emit('update:table-items', this.currentItems)

The name of the new event is mere indicative.

[CDataTable] Add cell (double-)click event

    "@coreui/coreui": "3.0.0",
    "@coreui/icons": "1.0.1",
    "@coreui/vue": "3.0.0",

Currently the CDataTable has a row-clicked event. I would like to request an additional event when a cell is (double-?) clicked, which should return the cell and value of the clicked cell. We have business logic where the user is redirected to a route based on which cell (header/value) the user has clicked on. With the current available events I don't know which cell/value is clicked.

Could be like this:
http://tabulator.info/docs/4.5/callbacks#cell

[CDataTable] Allow nested objects / fields

I would like to request support for nested objects / fields.

item: {
  id: 1,
  code: 'xx',
  unit: {
    description: 'myDescription'
  }
}

fields = [
  'id',
  'code',
  'unit.description'
]

<c-data-table :items="items" :fields="fields" />

This would result in a table with a description column with the value derived from the unit object.
Currently if I do this the field value is undefined.

[Question] How to localize

How can I localize https://github.com/coreui/coreui-vue/blob/master/src/components/table/CDataTable.vue#L147?

This is just one example.

If this is something what havent been discussed or think about, I could create there new prop, called localization. That would be object with example data of

localization: {
    error-no-results: string = 'No filtering results',
    error-no-items: string = 'No items',
    
}

This is just pure thinking on the spot, but hardcoding these in english into the component, is not really the way to do it.

How to active dark theme on v3?

I'm trying to change my project to CoreUI v3 PRO Vue beta v1.

I tried to uncomment the dark theme scss line in style.scss but the theme file doesn't exist anymore in CoreUI v3.

// Import styles with dark layout
// If you want to use dark layout uncomment next line
@import "~@coreui/coreui-pro/scss/themes/dark/coreui-dark";

Are there any solution to enable the dark theme or I have to wait for the next beta versions?

Advanced Datatable localisation issues

Hey, is there any way we can get custom messages for datatables? I want to change placeholder for search filter, empty table text and items per page labels to my native language but it's hardcoded and can't take additional input from me. Can you at least make it so that it takes a param where the custom text can be inputed?

Replace vue-clickaway by vue-clickaway2

Hi,

I had some problems with vue-clickaway and found out that the project is 'dead' since April 10th. There is a fork called vue-clickaway2 that fixed some issues and added some extra functionality.

Could you consider replacing this module?

Thanks

Problem with onChange method in v-select

Hi,

I have problem with v-select, from coreUI advanced forms.
I would like detect change value, so i added a method @change, but it doesn't work because don't show my any changes, code:

`<v-select id="basicSelect" @change="onChange($event)" v-model="value" :options="feedingTypeOptions"
placeholder="Select feeding type">

onChange(event) {
console.log(event.target.value);
console.log('its change!@#!@#!@#123');
},`

Thanks for help !

Bootstrap typehead autosuggest list is hover, after swipe the list

I have problem with suggest list, which is hidden, after when i want swipe suggest list, it's only available in tabs likein code
<b-tabs> <b-tab title="Autosuggest"> <vue-bootstrap-typeahead v-model="query" :data="['Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada', 'USA', 'Mexico']" /> </b-tab> </b-tabs>

i use this package:

• https://alexurquhart.github.io/vue-bootstrap-typeahead/#/

thanks for answer!

Add event to SidebarToggler

When using many popular charting or table libraries with CoreUI, the SidebarToggler (and SidebarMinimizer) can mess with the widths of the components, due to their nature. The SVGs frequently need re-rendered. Devextreme is an example of this. With the SidebarMinimizer, this is easy to force a redraw by listening to the cui-sidebar-minimize event being emitted. A similar event is not emitted in the SidebarToggler, and it appears we cannot capture the click event due to the stopPropagation method. Would it be possible to emit a similar event on this component?

Or, if I'm doing something unintelligent, please let me know. Thank you!

Question: How can one import only needed components?

Hi,

How can one import only needed components from CoreUI and have just those in the final build?

I tried this, but it doesn't work:

import CSidebar from '@coreui/vue/src/components/sidebar/CSidebar'
Vue.use(CSidebar)

Also, how to import the whole CSS if not using
import CoreuiVue from '@coreui/vue'
?

Thanks!

Support SSR rendering

Hi there

It would be awesome if you could support SSR rendering.

vue-perfect-scrollbar is one showstopper, but there is the 1.0-dev branch, which could be used, or vue2-perfect-scrollbar. Additionally, some css rollup and changes here and there regarding accesing the DOM document might be necessary.

This would help in supporting Nuxt.js in the future, a valuable addition I think.

Thanks

Support for Mailto: and Tel: links for sidebar menu links

Currently, only links with http: are counted as external links for the sidebar, but mailto: and tel: are also valid link types. Add these to computed property IsExternalLink in SidebarNavLink.vue so mailto and tel links won't have the site url added in front of these link types.

Update SidebarNav item locale

The SidebarNav doesn't appear to be responsive when it comes to the name property. I've got a Vue.js app using vue-i18n for internationalization:

{
  name: this.$t('menuHome'),
  url: '/home',
  icon: 'mdi mdi-18px mdi-home'
}

It shows the correct text initially, but if I switch between locales, the menu doesn't update. I tried specifying the name as a function so that it can be called again after the locale changed, but it won't accept a function.

[CDataTable] Select multiple rows

    "@coreui/coreui": "3.0.0",
    "@coreui/icons": "1.0.1",
    "@coreui/vue": "3.0.0",

It is already possible to select one row by clicking on it. I would like to have the possibility to select multiple rows.

Maybe by:

• Shift + click adds a row
• A prop which enables multi-click, and each subsequent click selects an additional row

CoreUi v3 Modal and scoped method 'hide()'

Hello you wrote In all slots there is available scoped method 'hide()'

• First in manual
  you wrote CMedia API i thnk need CModal.
• Also In all slots there is available scoped method 'hide()' ..... but you don not bind :hide, and i have warn Property or method "hide" is not defined

                <template #footer>
                    <div>
                        <CButton
                            color="info"
                            @click="hide"
                            >{{ $t("close") }}</CButton
                        >
                    </div>
                </template>

What am I doing wrong?

Vue-Pro Invoicing + Email UI Example Links Broken

Links from https://coreui.io/pro/vue/ Pro Features lead to broken pages.

Broken pages (gray screens)

• Invoicing UI
• Email UI

error occured on nuxt framework

I use coreui/vue in the nuxt framework, and I get the following error:

 ERROR  Nuxt error

  ReferenceError: window is not defined

  - index.js:1
    [frontend]/[vue-perfect-scrollbar]/dist/index.js:1:28881

   . . . .

Maybe the following file is the problem.

• https://github.com/coreui/coreui-vue/blob/master/src/components/Sidebar/SidebarNav.vue

Problem at SidebarNav in iOS safari

I'm using SidebarNav. In PC, It's working fine perfectly.
But, In mobile safari at iOS, first tap don't cause navigate.

This problem same at Core UI for Vue sample site.
Angular and React sample site doesn't occur this issue.

Thanks for reply.

Link to component docs in release notes is 404

The link on the v3 beta release notes is broken: https://coreui.io/vue/docs/3.0/components/

v-on:Click and @Click do not work CSwitch in Coreui-vue Pro

I try to use @click , @change or v-on with a CSwitch in Coreui-Vue Pro also try click.native but nothing works. There is also a problem using .native in the rest of coreui-vue components.

Sidebar minimizer won't work

I tried to integrate coreui vue to laravel 5.7, everything seems to work fine except Sidebar minimizer, brand-minimized class applied to body without issue but sidebar-minimized not applied to body.

Override the CSidebarNavLink template

Hi,
is there anyway to use custom Template in sidebar items?
i didnt find any named slot in there:
https://github.com/coreui/coreui-vue/blob/3.0.0-alpha.7/src/components/sidebar/CSidebarNavLink.vue

Thank you