Hi guys,

Thank you very much for awesome template from CoreUI. And now i try to implement this project on NuxtJS.

You can see my project on this link NuxtJS + Core UI

Thank you 😄

This could be something for every coreui project. DateTimePicker is something i use in 90% of my projects so it would be a real help if I didn't have to pigeon hole some square code into this round project ;).

I want to use modal, but I can't open modal with data-toggle="modal"，data-target , href ,all of it can't use.And have no error info.
So ,I need help ,thanx

I need to change the mode: 'has' to 'history' to use the url without '#'

getting this error when building for production:

ERROR in static/js/vendor.de54eb355154926716b6.js from UglifyJs
Unexpected token: punc ()) [./node_modules/mini-toastr/mini-toastr.js:12,0][static/js/vendor.de54eb355154926716b6.js:99039,14]

Does anyone knows the workaround ?

Hi,
I would like to use CoreUI-Vue for one website but the server doesn't support nodeJS.
Can I install nodeJS on my local machine, develop the admin interface there and then export the whole thing as static files so that I can use it on the server without any need of nodeJS?
Thanks a lot!

I am trying to use the bootstrap-vue DatePicker as described here: https://bootstrap-vue.js.org/docs/components/form-input

The <b-form-input type:"date"> tag does not work as expected.

there is a component b-table in bootstrap-vue ,so it's better to use it instead raw html table tag.

Vue components should not have the same names as HTML elements, so Header and Footer and Aside should be renamed. When the app is built, these component names cause errors such as:

ERROR LOG: '[Vue warn]: Do not use built-in or reserved HTML elements as component id: header'

In
https://github.com/mrholek/CoreUI-Vue/blob/master/Vue_Full_Project/src/components/HeaderDropdown.vue

please add a real link example, example

<b-dropdown-item><router-link to='/settings'><i class="fa fa-wrench"></i> Settings</router-link></b-dropdown-item>

Not sure if this is the best. Styling needs fixing, as it shows an underline when hovering over the menu item (regular anchor tag styling, as it generates a link)

i just config this,but can't work.

[Vue warn]: Invalid value for option "components": expected an Object, but got Array.

1. Minimize the sidebar
2. Increase the height of the browser window -> the minimizer button will follow the edge of the window
3. Decrease the height of the window -> The minimizer button will not follow the edge of the window, and will no longer be visible in the browser.

After buying CoreUI pro, the Vue_Full_Project example doesn't work as expected. Several errors are thrown during compilation and the page that launches is blank.

Vue_Starter works as expected.

I see this:

<script>
export default {
  name: 'ip-uploader',
  data: {
    ips: ''
  },
  methods: {
    upload: (ips) => {
      alert(ips)
    }
  }
}
</script>

but I am used to this:

Vue.component('symbols-table', {
    data: {
        symbols: []
    },
    created: function(){
        axios.get('symbols.json').then(response => this.symbols = response.data);
    }
});

For what I can see in the code, components are never registered like this. Can anyone explain me the flow?

hi
when run : npm run dev in Vue_Full_Project folder get me error:
Error: ENOENT: no such file or directory, scandir '/Users/sogolmirzajani/Desktop/panel/CoreUI-Vue-master/Vue_Full_Project/node_modules/node-sass/vendor'

how to fixed error?

best regards

To avoid huge CSS file after build.
Have only custom/other styles in the bundle.

Thanks!

Breadcrumbs component not work with vue router, click does not transferring to path.

I've been struggling for quite some time to get CoreUI up and running inside electron with the entire toolchain you have provided. I really love the hot pluggable modules and all that magic you have incorporated but that config files are so convoluted that I can't figure out for the life of me how use this system in Electron.

I see that the UI is served through Express and the hot pluggable modules are inserted as middleware into the server. This probably will not work with electron as I need access to internal node modules from within the renderer.

Do you have any idea as to how to go about this?

Thanks!

I am trying to use pug as template lang but getting an error when including the mixins.

Error says:
Module build failed: Error: the "basedir" option is required to use includes and extends with "absolute" paths

Where am I supposed to configure the basedir option?

I have installed the pug using
npm install pug --save-dev

My Login.vue looks like this now:

<template lang="pug">
  include /pug/PrependInput.pug
  div.app.flex-row.align-items-center
    div.container
      b-row.justify-content-center
        b-col(md="5")
          b-card.p-4(no-body)
            b-card-body
              h1 Login
</template>

Works fine, when I don't use include.

config/index.js has
productionSourceMap: true

which by default generates a map file not required for production. Please set to false by default, and let devs which actually need it to enable that.

Thanks!

Receiving the following error:

Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive

From a cursory glance, I'm not sure which items specifically are responsible, but the issue may be related to the following issue report:

leongersen/noUiSlider#785

Trying to install and run this, and following these steps mentioned in this page: http://coreui.io/docs/getting-started/vue-js-version/

But wen I'm running npm run dev It is returning following error:

module.js:538
    throw err;
    ^

Error: Cannot find module 'shelljs'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/var/www/cc-server/TaxiWala/public/admin/CoreUI-Vue/Vue_Starter/build/check-versions.js:4:13)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @coreui/[email protected] dev: `node build/dev-server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @coreui/[email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-01-17T17_02_13_943Z-debug.log

(I'm New in Node and Vuejs)

hi,
i just downloaded the project and after installing dependencies, ran npm run dev and i only get this text in the browser: Cannot get /

Can you explain the difference ?

CoreUI-Vue

1.0.10

OS/Browsers version

mac OS /chrome63.0.3239.132

node version/npm version

"node": " 8.9.4",
"npm": "5.6.0"

Steps to reproduce

cd Vue_Full_Project
npm i
npm run start

What is actually happening?

HMR not working

Same as this issue.

Im running the Vue Starter Project and its loading like this.
As you can see the styles are all screwed.
And the collapsible mennu isnt collapsable but is instead spread out along the header.

Which looks like something is not executing somewhere properly, or styles are loading somehow?. But what and where???

https://imgur.com/a/vJlhb

https://www.npmjs.com/package/bootstrap-vue

This version replaced v10.0-beta.9

Recently package.json was upgraded to

 "engines": {
    "node": ">= 8.9.4",
    "npm": ">= 5.6.0"
  }

Not all distros have these latest minor versions.
Just for the engines section, would you please use instead

 "engines": {
    "node": ">= 8.x.x",
    "npm": ">= 5.x.x"
  }

Thanks!

The card-title styling is not present in the core bootstrap _card sass file.

Probably an old version of bootstrap4?

In the full project, if I run npm run e2e, I get this error:

Running:  default e2e tests
 ✖ Timed out while waiting for element <#app> to be present for 5000 milliseconds.  - expected "visible" but got: "not found"
    at Object.defaultE2eTests [as default e2e tests] (/Users/dmurtagh/workspace/scanstation/CoreUI-Vue/Vue_Full_Project/test/e2e/specs/test.js:13:8)
    at _combinedTickCallback (internal/process/next_tick.js:95:7)


FAILED:  1 assertions failed (7.426s)

 _________________________________________________

 TEST FAILURE:  1 assertions failed, 0 passed. (7.558s)

[Vue warn]: Invalid value for option "components": expected an Object, but got Array.
warn @ vue.esm.js?efeb:571
assertObjectType @ vue.esm.js?efeb:1398
mergeAssets @ vue.esm.js?efeb:1223
mergeField @ vue.esm.js?efeb:1447
mergeOptions @ vue.esm.js?efeb:1438
Vue.extend @ vue.esm.js?efeb:4672
Vue.(anonymous function) @ vue.esm.js?efeb:4755
install @ bootstrap-vue.esm.js?b024:13470
Vue.use @ vue.esm.js?efeb:4614
(anonymous) @ main.js?1c90:8
(anonymous) @ app.js:1073
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ app.js:963
webpack_require @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728

How do I remove this annoying warning

This project is using version 1.1.0, but the most recent version is 1.4.0. Similarly, the Vue version is a bit out-of-date.

Using the Vue_Starter package, npm install --production doesn't install the required dependencies.

Steps to reproduce:

1. Clone this repo
2. Open a terminal in the Vue_Starter folder
3. Run npm install --production
4. Run npm run build

This steps are supposed to build the web with only production dependencies (defined in dependencies section of package.json) but the last step fails.

Logs:

$ npm install --production

> [email protected] postinstall /home/andrescidoncha/Documents/CoreUI-Vue/Vue_Starter/node_modules/bootstrap-vue
> opencollective postinstall || exit 0


     *** Thank you for using bootstrap-vue! ***

Please consider donating to our open collective
     to help us maintain this package.

  https://opencollective.com/bootstrap-vue/donate

                    ***

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.

added 63 packages in 4.248s


$ npm run build

> @coreui/[email protected] build /home/andrescidoncha/Documents/CoreUI-Vue/Vue_Starter
> node build/build.js

module.js:471
    throw err;
    ^

Error: Cannot find module 'chalk'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/andrescidoncha/Documents/CoreUI-Vue/Vue_Starter/build/check-versions.js:1:75)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @coreui/[email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @coreui/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/andrescidoncha/.npm/_logs/2018-02-07T10_01_46_293Z-debug.log

Just "compiled" the latest "vue js starter" using Mix (Laravel 5.5dev). After fixing a couple of SCSS and path-related bugs, I got the dashboard up and running smoothly. The only issue I'm currently having is that the site appears to be defaulting to the mobile version despite viewing on the desktop (Safari/Chrome/Opera/FF). All images, icons, and wording are tiny. Any ideas?

[deleted]

I was just wondering if the build system has been set up with the ability to use lazy loading of Vue components already?

Its a blank page in internet explorer

My app has a preloader, but it doesn't show itself immediately.

The problem is, some plugin inserts styles into head (№1 on image 2), and I haven't found out which one.

I would like to paste styles on place №2.
Can anyone give me a hint which plugin do it and how I can fix it?

My system is as follow:
win 7 64bit. node v6.11.1, npm v3.10.10.

I have encounter the below error after running npm run unit:

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "bugs" "coreui-vue"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! code E404

I've noticed we're bundling all the scss files for bootstrap.
I understand from #12 that we can't use the CDN because we're compiling the template with custom variables - but why aren't we pulling bootstrap in via npm?

This would ensure a more consistent experience, as it currently stands a user could submit a PR editing the core bootstrap files and suddenly CoreUI is no longer "bootstrap compatible".

Summary: Please consider loading bootstrap via npm rather than bundling it with the template.

Any plan to convert components into Vue Components for reusability?
I am converting some that I need right now. Hope to pr after I cleaned them up a little.

I came across the following line of code:

https://github.com/mrholek/CoreUI-Vue/blob/4be9d2dce2073b17e2c8afbfb6bca2aa45f25628/Vue_Full_Project/build/dev-server.js#L5

What is reason for parsing the NODE_ENV using JSON.parse?

When will it be available a full calendar in Vue version.
When browsing the site I payed for the pro version because the list of plug-in include several choices. one was the full calendar. No information was there advising that the different flavors had different components. Now I discovered that on Vue version lots of them are missing.
This is not fair.

Just wondering if having those 2 sub-projects is worth the maintainance hassle.

What is the real difference between them? Would not it be easier and cleaner to have a single CoreUI-Vue project and focus on new features / bug fixes in a single place?

According to the bootstrap-vue docs bootstrap-vue.css should be included after bootstrap.css.

However, in App.vue, they are included in the opposite order (bootstrap.css is included in ./scss/style)

<style>
  /* Import Font Awesome Icons Set */
  $fa-font-path: '~font-awesome/fonts/';
  @import '~font-awesome/css/font-awesome.min.css';
  /* Import Simple Line Icons Set */
  $simple-line-font-path: '~simple-line-icons/fonts/';
  @import '~simple-line-icons/css/simple-line-icons.css';
  /* Import Bootstrap Vue Styles */
  @import '~bootstrap-vue/dist/bootstrap-vue.css';
</style>
<style lang="scss">
  // Import Main styles for this application
  @import './scss/style';
</style>

Hi,
I did the following experiment,

I put <keep-alive> around
<router-view></router-view>
both in App.vue and Full.vue

And put a created function

 created () {
    console.log('created called')
  }

at the end of Dashboard.vue, as well a child component Table.vue.

Start Up -> Dashboard.vue created() called

Click Component.Table->Table.vue created() called
Click Dashboard-> Nothing called
Click Component.Table-> nothing called
Click Component.Switch-> not created method
Click Compoent.Table -> Table.vue created() called again.

And if i keep on clicking between Component.Switch and Component.Table, the created method in Table.vue is always called.

May I know how to fix this to make created for Table.vue only be called for once?