epicmaxco / vuestic-admin Goto Github PK
View Code? Open in Web Editor NEWFree and Beautiful Vue 3 Admin Template
Home Page: https://admin.vuestic.dev
License: MIT License
Free and Beautiful Vue 3 Admin Template
Home Page: https://admin.vuestic.dev
License: MIT License
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 = ''
}
}
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.
Hello all,
is there any way to migrate this one inside an laravel project.
thanks
Great repo with lots of useful component.
Unfortunately it's almost useless due to lack of documentation.
Please, add documentation.
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'
}
Link of the demo is broken
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
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.
IE11 support is not supported?
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?
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.
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.
#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]
What about changing the prop "data" to "chartData" follows the default vue-chartjs properties and adds mixins, so vuestic-chart inherit the reactive way?
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>
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 can't scroll the country selector to view more than the top 4 entries. FF for Android.
It says The hsName field is required.
or The vsName field is required.
Should be Name field is required.
or smth. Minor thing.
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.
Environment:
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.
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!
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.
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!
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.
Just a heads up, looks like the example site is down.
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
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!
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
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:
P.S: Solved by updating compiler to v2.4.2.
When visualizing via mobile the talks breaks to show the text.
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)
Im new to vue but this gave me an error in compiling
export default (name, index = false) => () => import(
components/${name}${index ? '/index' : ''}.vue)
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.
`$ 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:
To install it, you can run: npm install --save vue-slider-component
Listening at http://localhost:8080
`
how to work in laravel
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'})
}
}
})
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?
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
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.
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?
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!
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 ?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.