The demo page does not render when opened in Internet Explorer (tested with IE11).

The issue seems to be with Array.prototype.find() which does not work with IE.

line 35 of src/router/index.js seems to be the issue

Hi, is it possible to use Vuestic as a library or as a dependency of another project? If not, is there a plan for it?

So we can do something like:

import { VuesticWizard } from 'vuestic/components'
Vue.use(VuesticWizard)

We would like to progressively integrate it but even if it were to start from scratch it would be a bit complicated because we would basically have to fork the project, strip it down and figure out how to integrate only what we need. You can imagine how this is going to get complicated very soon.

Thank you!

When visualizing via mobile the talks breaks to show the text.

I just clone the project and installed dependences. When i run npm run dev it throws 24 errors, all for the same problem:

 error  in ./src/components/vuestic-components/vuestic-modal/VuesticModal.vue

Module build failed: 
$link-hover-color:      darken($link-color, 15%) !default;
                       ^
      Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
	node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
	node_modules/bootstrap/scss/_variables.scss:168
      in /dev/vue/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)

 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-3b72342e&scoped=true!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/vuestic-components/vuestic-modal/VuesticModal.vue 4:14-302 13:3-17:5 14:22-310
 @ ./src/components/vuestic-components/vuestic-modal/VuesticModal.vue
 @ ./src/components/vuestic-components/vuestic-components-plugin.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

It gives the same error but for other components.

2 days ago i cloned the same project and it works fine, but today no

Also it give this error:

 error  in ./src/App.vue

Module build failed: 
    @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
            ^
      Mixin button-size is missing argument $border-radius.
      in /dev/vue/src/sass/_override-bootstrap.scss (line 56, column 14)

 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-8378b114!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-245 13:3-17:5 14:22-253
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

how to work in laravel

Hello all,
is there any way to migrate this one inside an laravel project.
thanks

Link of the demo is broken

http://epicmax.co/vuestic

What about changing the prop "data" to "chartData" follows the default vue-chartjs properties and adds mixins, so vuestic-chart inherit the reactive way?

http://vue-chartjs.org/#/home?id=reactive-data

https://github.com/epicmaxco/vuestic-admin/blob/master/src/components/vuestic-components/vuestic-progress-bar/progress-types/VerticalProgressBar.vue#L26

It would be more easier to create new vuestice projects via a command line interface instead of git clone or downloading form GitHub.

I suggest to create a npm package to handle this operation.

# install vuestic-admin globally.
$ npm install -g vuestic
# create new project.
$ vuestic <my-new-project>

If you like the idea, I can take care of it.

How can I add Authorization to the data-table request header?

SOLVED

In main.js, I did this:

axios.defaults.baseURL = 'http://localhost'
axios.defaults.headers.common = {
  'Authorization': 'Bearer',
  'Accept': 'application/json'
}

Environment:

• Ubuntu Xenial
• Google Chrome

After a fresh clone, npm install, and npm run dev the app opened as expected, but when I clicked on the "Explore" button, the donut displayed exists beyond its containing element visually.

Looks like it could be related to this styling rendered in the browser:

width: 100%; height: 200%; position: relative;

The above appears to come from the fact this component is picking up the base chart component display of, flex. When that is overridden, this chart displays properly.

I am trying to debug and confirm that overriding this, for ONLY that specific chart, operates as I would expected and if it does, I will submit a PR.

When I insert this into form wizard :

               <vuestic-simple-select
                        label="Select country"
                        v-model="chosenCountry"
                        name="country"
                        ref="CountrySelect"
                        v-bind:options="countriesList">
                      </vuestic-simple-select>

I got this error:

 [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"
warn @ vue.common.js?e881:478
handleError @ vue.common.js?e881:561
(anonymous) @ vue.common.js?e881:702
nextTickHandler @ vue.common.js?e881:647
Promise resolved (async)

Any reason?

Found out the problem is because of vue-events.

here is my main.js code
router.beforeEach((to, from, next) => {
store.commit('setLoading', true)
if (to.meta.requiresAuth) {
const authUser = JSON.parse(window.localStorage.getItem('authUser'))
if (authUser && authUser.access_token) {
next()
} else {
console.log(next({name: 'Login'}))
next({name: 'Login'})
}
}
})

Dependencies need to be updated for this projected. Lots of deprecation warnings, out of date versions and 404 on node-sass

node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-59_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-59_binding.node":

HTTP error 404 Not Found

I was trying to find an example or documentation for datepicker inputs, but can't find none in the online demo or documentations. Is there any place I can see, at least, an usage example?

Aside, great project, congratulations.

Im new to vue but this gave me an error in compiling

export default (name, index = false) => () => import(components/${name}${index ? '/index' : ''}.vue)

1. Internationalization (i18n)
2. Theme switch (dark/light)
3. Forms like typeforms [https://www.typeform.com/]
4. UI Blocker (during form submissions)
5. Route-change animations (like what nuxt does)
6. Keyboard navigation

How can I hide this from menu?

  {
     name: 'user',
     path: '/user/:id',
     component: lazyLoading('user/Edit'),
     meta: {
       title: 'Edit'
     }

Solved it by adding route into router/index.js

I get a warning when VueTable loads

[Vue warn]: The computed property "fields" is already defined as a prop.

Exactly here:
\node_modules\vuetable-2\src\components\Vuetable.vue

Of course I see a prop, but not the computed property, how can I solve this?

ok, this is very very nice front end with webpack
but what i need is simple. how to redirect page to login page when user do not have a token?
how to set default route to login page if the token is blank?

Hello and thank you for making this lovely template.
While following your instructions on the wiki page, I get the following error after hitting npm install:

root@happy-camper:/home/matej/Desktop/myproject# npm install
npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
npm WARN deprecated [email protected]: This package is deprecated. Use Array.isArray.
npm ERR! code 128
npm ERR! Command failed: /usr/bin/git clone -q git://github.com/amcharts/ammap3.git /root/.npm/_cacache/tmp/git-clone-a5908676
npm ERR! fatal: could not create leading directories of '/root/.npm/_cacache/tmp/git-clone-a5908676': Permission denied
npm ERR! 
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2017-12-14T12_52_59_048Z-debug.log

Googled it, found this but it isn't helping.
npm -v is 5.6.0
node -v is v8.9.3
I'm running Ubuntu 16.04.3 LTS.

Consider adding an easy way to tie in to REST apis the way "admin on rest" dashboard does!

Reference: https://github.com/marmelab/admin-on-rest

It says The hsName field is required. or The vsName field is required.

Should be Name field is required. or smth. Minor thing.

Route: http://vuestic.epicmax.co/#/tables

#npm run dev
 error  in ./src/App.vue

Module build failed: Error: 

Vue packages version mismatch:

- [email protected]
- [email protected]

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

I fixed it by npm install && npm install [email protected]

I am not able to reset select value to empty string:

<vuestic-simple-select
 label="Select Name"
 v-model="form.name"
name="name"
ref="nameSelect"
 v-bind:options="nameList">
</vuestic-simple-select>

data () {
  form: {
   name: ''
  }
},
method: {
  onClear() {
     form.name = ''
  }
}

Just a heads up, looks like the example site is down.

Any example on how to add button or selected row into the datatable?

It is use VueTable2, so it emit vuetable:row-clicked when the row is clicked.

I am trying to do this, but nothing is emitted:

data-table :apiUrl="apiUrl"
                    :tableFields="tableFields"
                    :itemsPerPage="itemsPerPage"
                    :sortFunctions="sortFunctions"
                    :apiMode="apiMode"
                    :paginationPath="paginationPath"
                    @vuetable:row-clicked="onRowClicked"></data-table>

methods: {
      onRowClicked: (action, data) => {
        console.log('actions: on-click', data.name)
      }
    }

I got it solve by using component:

<template>
  <div class="custom-actions">
    <button class="ui basic button" @click="itemAction('view-item', rowData, rowIndex)"><i class="zoom icon"></i></button>
    <button class="ui basic button" @click="itemAction('edit-item', rowData, rowIndex)"><i class="edit icon"></i></button>
    <button class="ui basic button" @click="itemAction('delete-item', rowData, rowIndex)"><i class="delete icon"></i></button>
  </div>
</template>

<script>
  export default {
    props: {
      rowData: {
        type: Object,
        required: true
      },
      rowIndex: {
        type: Number
      }
    },
    methods: {
      itemAction (action, data, index) {
        console.log('custom-actions: ' + action, data.name, index)
      }
    }
  }
</script>

Hi.
When i trying to run local web-server i get an errors:

`
ERROR Failed to compile with 18 errors 09:28:17

error in ./src/App.vue

Module build failed: Error:

Vue packages version mismatch:

• [email protected]
• [email protected]

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
`
How to solve this problem?

P.S: Solved by updating compiler to v2.4.2.

Is there possible to use vuestic-admin like à pluton, an so like en dependency in a vue project ? If not, that could be, imho, a good idea to do it. To update it easily by ex., no ?

There is a newer version of normalize.css released that this project depends on.

Required: ^5.0.0
Stable: 7.0.0

Please update to latest and test it out.
Regards!

My requirement, as with most APIs, requires JWT. I need to be able to send an "Authorization" header along with the API request.

Is this already supported somehow, or do I just need to replace the whole apiUrl system with an axios call?

Thanks in advance!

Hi Guys, I've just tried to write a message with quite a big length (something like "aegeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyykkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk") and part of the string was hidden instead of being moved to another line.
Chrome on Ubuntu 16.04
Version 60.0.3112.90 (Official Build) (64-bit)

Great repo with lots of useful component.

Unfortunately it's almost useless due to lack of documentation.
Please, add documentation.

There is a newer version of ionicons released that this project depends on.

Required: ^2.0.1
Stable: 3.0.0

Please update to latest and test it out.
Regards!

We couldn't make it work. Please see below.

`$ npm run dev

[email protected] dev C:\Users\Admin\Desktop\Temp\vuestic-admin\vuestic-admin
node build/dev-server.js

(node:21536) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see webpack/loader-utils#56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
ERROR Failed to compile with 1 errors1:56:38 PM

This dependency was not found:

• vue-slider-component in .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!./src/components/ui/icons/Set.vue

To install it, you can run: npm install --save vue-slider-component

Listening at http://localhost:8080
`

There is no keyboard support with ‘select’ components so they are pretty much hard to use even with prepared examples.

It is much easier to select a country by typing SLO (or something) than scroll down to character S.

I had a quick look at your demo site and... holy crap I just loaded 10 MB of data for a single web page!!

You've clearly put in the effort with the dashboard; it looks very nice, but forcing a user to download 10 MB is like a slap to the face. Please compress the images, minify and compress the JS + CSS. You can automate it via a proxy such as Cloudflare or mod_pagespeed or you can incorporate these steps into your build pipeline.

Request URL:http://67.205.141.92:8000/vuestic
Request Method:GET
Status Code:404 Not Found
Remote Address:67.205.141.92:8000
Referrer Policy:no-referrer-when-downgrade

I can't scroll the country selector to view more than the top 4 entries. FF for Android.

Having types in JavaScript is a nice feature. TypeScript is one option, however a better one is to user flowtype.

I was trying to integrate flow type with vuestatic based on this tutorial:
https://alligator.io/vuejs/components-flow/

My question is can flow be integrated into vuestic-admin officially?

It has no overhead such as typescript and improves the dev workflow.

Vuestic-Wizard does not has isValid() for the confirm page.

If I have some validation at the confirm page, how can I stop it from complete?

rich form wizzard

The tick does not aprear when changing steps

This is just after initializing the project with vuestic CLI

Let's say I fetch a user with several projects from db. I want each project to show up in the menu as dynamic routes with children like:

- Project1 // /project/:projectid
-- Child2  // /project/:projectid/child-1
-- Child2 // /project/:projectid/child-2

How do I go about that? What's the proper way to adding these and where would one do it?

I don't understand the flow of processing raw data from external API into table in front end. Like, is it right if I want to show data from REST API, I just have to change this code :
data () {
return {
apiUrl: 'http://vuetable.ratiw.net/api/users',
apiMode: true,
tableFields: FieldsDef.tableFields,
itemsPerPage: ItemsPerPageDef.itemsPerPage,
sortFunctions: FieldsDef.sortFunctions,
paginationPath: ''
}
}
(Table.vue)

into :
data () {
return {
apiUrl: 'http://localhost:4000/event',
apiMode: true,
tableFields: FieldsDef.tableFields,
itemsPerPage: ItemsPerPageDef.itemsPerPage,
sortFunctions: FieldsDef.sortFunctions,
paginationPath: ''
}
}

Because it doesn't work, I still don't get the data from localhost:4000, the Table shows "No Data Available", eventhough it sends the right response when I checked it using Postman.

IE11 support is not supported?

Hello, I noticed that input label is centralized within a modal.