vuetifyjs / vuetify Goto Github PK
View Code? Open in Web Editor NEW๐ Vue Component Framework
Home Page: https://vuetifyjs.com
License: MIT License
๐ Vue Component Framework
Home Page: https://vuetifyjs.com
License: MIT License
I think it'll draw some confusion to see "VueJS 2.0", when this is actually compatible with 2.x.
hi the site looks kinda bad when you first load it.
i think you'd do well to fix it as it as it gives a bit of a bad impression.
I noticed there's a flash of unstyled content (on the latest Chrome Canary, at least) when first loaded.
Is there a workaround for this? Is this a known issue?
Some words on browser compatibility?
vendor chunk hash seems to change on every app code change when I would expect it to stay the same unless a vendor dep is updated. webpack/webpack#1315 is potentially relevant.
Button with primary
doesn't apply primary class.
Should Button.vue add 'primary': this.primary
and 'secondary': this.secondary
โ
Here is my App.vue
file:
<template>
<div id="app">
<div v-for="button in buttons">
<v-btn
:flat="button.flat"
:primary="button.primary"
:block="button.block"
:outline="button.outline"
:floating="button.floating"
>
{{ button.name }}
</v-btn>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
buttons: [
{ name: 'default' },
{ name: 'flat', flat: true },
{ name: 'primary', primary: true },
{ name: 'block', block: true },
{ name: 'outline', outline: true },
{ name: 'floating', floating: true }
]
};
},
mounted() {
this.$vuetify.init();
}
};
</script>
<style lang="scss">
#app {
text-align: center;
color: #2c3e50;
margin: {
top: 2rem;
left: 2rem;
right: 2rem;
}
& > div {
margin: 2em auto;
}
}
</style>
When there is whitespace between the v-collapsible-header
and v-collapsible-body
the click event on the v-collapsible-header
results in the error:
Uncaught TypeError: this.$el.nextSibling.getAttribute is not a function
This error occurs with the following example:
<v-collapsible>
<v-collapsible-header>Item</v-collapsible-header>
<v-collapsible-body>
<v-card>
<v-card-text class="grey lighten-3">...</v-card-text>
</v-card>
</v-collapsible-body>
</v-collapsible>
The problem is that the nextSibling call in CollapsibleHeader.vue returns a #text node instead of the intended v-collapsible-body
element.
Possible solutions include using nextElementSibling (with limited browser support) or the .next()
function from jquery. A workaround is to collapse the whitespace in the html.
I had this issue using Vue 2.1.6 and vuetify@51945ce6bfb8c20c478cdd8c705af1a5da18d85b
I have an error when trying to build a sidebar navigation with sub-navs:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component )
Here is my template:
<v-sidebar id="sidebar" fixed>
<v-sidebar-items v-bind:items="sidebar_items"></v-sidebar>
</v-sidebar>
and my sidebar_items object:
sidebar_items: [
{ text: 'Dashboard', href: '#!', icon: 'dashboard' }
{
parent: { text: 'Users', href: '#!', icon: 'group' },
items: [
{ text: 'All users', href: '#!' },
{ text: 'Deleted users', href: '#!' }
]
}
]
This is the HTML:
<ul class="sidebar__items">
<li>
<router-link active-class="sidebar__item--active" to="#!" class="sidebar__item">
<i class="material-icons icon">
<span>dashboard</span>
</i>
<span>Dashboard</span>
</router-link>
</li>
<li class="sidebar__group">
<a href="#!" class="sidebar__item-header">
<i class="material-icons icon">
<span>group</span>
</i>
<span>Users</span>
</a>
<ul class="sidebar__items" style="display: none; height: 0px;">
<li>
<router-link active-class="sidebar__item--active" to="#!" class="sidebar__item">
<!---->
<span>All users</span>
</router-link>
</li>
<li>
<router-link active-class="sidebar__item--active" to="#!" class="sidebar__item">
<!---->
<span>Deleted users</span>
</router-link>
</li>
</ul>
</li>
</ul>
What am I doing wrong here??
Similar to SidebarItem.
A context menu to bind to specific elements would be great addition, such as...
Examples:
http://codepen.io/SimpleSoftwareIO/pen/yNwYJb/
http://quasar-framework.org/components/context-menu.html
Without thinking into the requirements or anything, if it was possible to create multiple context menu definitions and then just use a directive to reference a specific menu, that'd be great for customization.
i.e.
These would also be hoisted to the body so that inherited css wouldn't affect them, and they'd be able to appear outside of their parent element constraints (perhaps optional)
I do not have an iOS device and could use some help from anyone that wouldn't mind doing some bug testing and iteration with me.
when I run mine project, the following error msg logged in console:
[Vue warn]: Error when rendering component :
Uncaught TypeError: _vm._c is not a function(โฆ)
I loved this a lot, I want to use this right away, Please let me know if this is ready for production apps? Is this only SSR or can also be used for client side rendering?
I have noticed that here L72 you're using once
option in addEventListener function. The thing is. This option is not well supported as you can see here - http://caniuse.com/#feat=once-event-listener so in many browsers, added event listeners like this are not going to remove themselves, so you're going to have memory leak right there. It's worth to refactor.
When using a smaller height on parallax can cause weird issues.
It seems the v-col should be v-row and vice-versa.
Looking at the docs source for grids there's only one v-row, when there's actually 6, and 6 v-col when there's only 1.
Hello, very interesting library :)
I'm getting started with Vue, and attempting to use an integration that is now being created for Meteor + Vue: here.
I came across vuetify and thought I would just need to install it the way the docs state:
Existing Projects
If you are wanting to use Vuetify in an existing project, you can install by using npm or yarn.
In theory, this should work, correct? I mean, I don't need the template, I can use the library in an existing codebase with the setup that meteor-vue-component already has for compiling / serving etc.. ?
I figured out a way to use https://github.com/vuetifyjs/vuetify/pull/25
<v-navbar-items>
<v-navbar-item router :item="{ href: { name: 'page1' }, text: 'page1'}"/>
<v-navbar-item router :item="{ href: { name: 'page2' }, text: 'page2'}"/>
</v-navbar-items>
All is needed is to add the router
attribute and the href
key on the item
prop can either have a string with the path (ie. '/page1'
or '/page2'
in the example code), or an object the way you would use the to
prop in a raw router-link
implementation.
Hope that helps someone else in case they need to implement it :)
After updating vuetify version to v0.7.10 I have noticed that if v-model is updated in the background it doesn't affect values that are shown in the component.
<v-text-input label="input name" id="new-input-name" v-model="input.name"></v-text-input>
for example if user inputs "xxx" and in the background I process that value and then update this.input.name = ''
- input component is unchanged and still shows "xxx". Not sure if it's desired behaviour.
Is currently v-side-bar, should be v-sidebar.
I tried the multiple parameter but still a single line. thanks for your help
awesome work! We want to work with server side rendering. the docs for SSR don't seem to be active (or maybe do not exist yet).
I noticed that modal buttons become unresponsive after page refresh, navigating to some other page and back again makes it responsive again. Not sure how to debug this, currently just trying to avoid modals
Hi!
I can't seem to be getting Vuetify working within my existing project. I'm using a base app created with vue-cli, browserify with hot reloading.
Uncaught TypeError: _vm._c is not a function
Not entirely sure what I'm doing wrong here.
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
new Vue({
el: '#app',
mounted() {
this.$vuetify.init();
},
data: {
item: {
href: '#!',
text: 'Get Started'
}
}
});
My main index.html is matching the structure from the example template vue init vuetifyjs/simple
. It somewhat feels like the distributed package I seem to include from browserify's required (defined as dist/vuetify.js in this project's package.json) doesn't play nice.
I want to make single component dropdowns to put into a with a single root rather than having a and a to keep all of the css in line
<v-btn ripple
outline
round
info
class="light-blue"
@click.stop="buscar()">
<v-icon>search</v-icon>
<span>Buscar</span>
</v-btn
the buscar()
is a method and its working. I tested it on another element but, for some reason, its not binded on any of the vutify elements.
<v-radio>option 1</v-radio>
option 1 is not be displayed.
Material design spec includes an "ink ripple" effect to animate a button push event.
For implementation example see: http://materializecss.com/waves.html#!
Refactor navbar functionality and styles.
make project for vue-cli for vuetify template
<v-btn ripple success>Click!</v-btn>
is not work.
When using sliders I'm trying to set the images dynamically. In the new Vue() constructor I have data like:
slider_items: {urls: [{},{},{}]}
and I if I later state:
myVue.slider_items.urls = newUrls;
the images change successfully, and myVue.slider_items.urls
is exactly what I'd expect.
However, the number of images the slider has is unchanged.
If there were three urls in the view constructor, and the new myVue.slider_items.urls.length === 5
, only the first three images cycle and only 3 slider_controls buttons render. Likewise, if myVue.slider_items.urls
started in the constructor with 3 urls and the newly minted myVue.slider_items.urls
contains only one object, the slider will show that new image but then two blank screens.
The base material design icon set is pretty limited, but https://github.com/Templarian/MaterialDesign supplements it nicely with community additions.
Perhaps this could be made the default icon library, to provide more choices out of the box that's still consistent with the design?
I get this error when running any of the build commands: npm run build
or npm run build:client
or npm run build:server
Not sure where this is coming from, but it doesn't look like there's a problem on the style.
<style lang="stylus">
.cards
flex-flow: row wrap
justify-content: space-between
.container
display: flex
height: 100%
justify-content: center
align-items: center
.card
margin-left: auto
margin-right: auto
width: 500px
height: 500px
flex-basis: 500px
justify-content: space-between
display: flex
padding: 1rem
flex: 1 0 50%
@media screen and (max-width: 768px)
flex: 1 0 100%
</style>
Full error log:
โฉ npm run build
> [email protected] build /Users/marcoferreira/Development/Sites/tests/vuetify
> rimraf dist && npm run build:client && npm run build:server
> [email protected] build:client /Users/marcoferreira/Development/Sites/tests/vuetify
> cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules
keywords if/then/else require v5 option
Hash: 7f1f2b315804f4fd07dc
Version: webpack 2.1.0-beta.28
Time: 18072ms
Asset Size Chunks Chunk Names
app.86c68aed5a95bcb98665.js 395 kB 0[emitted] [big]app
vendor.205471727b5aa87a8d26.js 88.7 kB 1[emitted] vendor
styles.7f1f2b315804f4fd07dc.css 89 kB 0[emitted] app
styles.7f1f2b315804f4fd07dc.css.map 108 bytes 0[emitted] app
index.html 1.3 kB [emitted]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
app.86c68aed5a95bcb98665.js (395 kB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
app (572 kB)
vendor.205471727b5aa87a8d26.js
app.86c68aed5a95bcb98665.js
styles.7f1f2b315804f4fd07dc.css
styles.7f1f2b315804f4fd07dc.css.map
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using System.import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-4d069b48!./~/stylus-loader!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue
Module build failed:
<template lang="pug">
^
Invalid CSS after "": expected 1 selector or at-rule, was ".cards"
in /Users/marcoferreira/Development/Sites/tests/vuetify/src/views/Login.vue (line 1, column 1)
@ ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-4d069b48!./~/stylus-loader!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-306
@ ./src/views/Login.vue
@ ./src/router/index.js
@ ./src/app.js
@ ./src/client-entry.js
ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-4d069b48!./~/stylus-loader!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue
Module build failed: ModuleBuildError: Module build failed:
<template lang="pug">
^
Invalid CSS after "": expected 1 selector or at-rule, was ".cards"
in /Users/marcoferreira/Development/Sites/tests/vuetify/src/views/Login.vue (line 1, column 1)
at /Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/webpack/lib/NormalModule.js:143:35
at /Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/loader-runner/lib/LoaderRunner.js:359:11
at /Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/loader-runner/lib/LoaderRunner.js:225:18
at context.callback (/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/loader-runner/lib/LoaderRunner.js:106:13)
at Object.onRender (/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/sass-loader/index.js:273:13)
at Object.<anonymous> (/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/sass-loader/node_modules/async/dist/async.js:2234:31)
at apply (/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/sass-loader/node_modules/async/dist/async.js:20:25)
at Object.<anonymous> (/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/sass-loader/node_modules/async/dist/async.js:56:12)
at Object.callback (/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/sass-loader/node_modules/async/dist/async.js:840:16)
at options.error (/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/node-sass/lib/index.js:289:32)
ERROR in /Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/vue-style-loader/index.js!/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/css-loader/index.js!/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/vue-loader/lib/style-rewriter.js?id=data-v-4d069b48!/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/stylus-loader/index.js!/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/sass-loader/index.js!/Users/marcoferreira/Development/Sites/tests/vuetify/node_modules/vue-loader/lib/selector.js?type=styles&index=0!/Users/marcoferreira/Development/Sites/tests/vuetify/src/views/Login.vue doesn't export content
Child html-webpack-plugin for "index.html":
Child extract-text-webpack-plugin:
Child extract-text-webpack-plugin:
Child extract-text-webpack-plugin:
ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-4d069b48!./~/stylus-loader!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue
Module build failed:
<template lang="pug">
^
Invalid CSS after "": expected 1 selector or at-rule, was ".cards"
in /Users/marcoferreira/Development/Sites/tests/vuetify/src/views/Login.vue (line 1, column 1)
Child extract-text-webpack-plugin:
npm ERR! Darwin 16.3.0
npm ERR! argv "/Users/marcoferreira/.nvm/versions/node/v6.9.1/bin/node" "/Users/marcoferreira/.nvm/versions/node/v6.9.1/bin/npm" "run" "build:client"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:client: `cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build:client script 'cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vuetify-webpack-ssr package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vuetify-webpack-ssr
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vuetify-webpack-ssr
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/marcoferreira/Development/Sites/tests/vuetify/npm-debug.log
npm ERR! Darwin 16.3.0
npm ERR! argv "/Users/marcoferreira/.nvm/versions/node/v6.9.1/bin/node" "/Users/marcoferreira/.nvm/versions/node/v6.9.1/bin/npm" "run" "build"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `rimraf dist && npm run build:client && npm run build:server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'rimraf dist && npm run build:client && npm run build:server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vuetify-webpack-ssr package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! rimraf dist && npm run build:client && npm run build:server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vuetify-webpack-ssr
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vuetify-webpack-ssr
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/marcoferreira/Development/Sites/tests/vuetify/npm-debug.log
Using Vue 2.1.8.
Updated from Vuetify 0.7.7
to 0.7.10
and every component using a slot is outputting undefined
, no error messages. Was working before the update. I'm initiating Vuetify in the main App component's mounted
hook.
Am I missing something during the updates? Maybe a Vue bug?
I feel like this is a support matter and should be posted elsewhere. Is it possible to start a Gitter chat or a forum of any kind?
Thanks.
Edit: Just read #26 (comment) and downgraded to Vue 2.1.6
and it's working, sorry for the confusion. My question regarding a support channel still stands.
Seems like CLI and base project is failing.
vue init vuetifyjs/webpack-ssr app
cd app
npm install
npm run dev
localhost:8080 simply shows "undefined" in the browser window not console.
package.json reads ... "vuetify": "0.7.*",
node v6.9.2
this also happens with "vue init vuetifyjs/webpack "
There should be an option for v-select
to enable the selection of defaultText
.
Either that or an option to default to one of the items in :options
.
After upgrading to 0.7.9, I'm getting the following error on the console:
vue.runtime.common.js:521 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
Did I few tests and even removed the <router-view>
tag to make sure this wasn't coming from my templates.
Here's the App.vue content:
<template>
<v-app top-navbar footer left-sidebar>
<header>
<v-navbar>
<v-navbar-side-icon class="hidden-sm-and-up"></v-navbar-side-icon>
<v-navbar-logo>AltMan</v-navbar-logo>
<v-navbar-items>
<v-navbar-item v-dropdown:dropdown
:item="{ href: '#!', text: 'Client', icon: false }"
></v-navbar-item>
</v-navbar-items>
<v-dropdown v-bind:items="navMenu" id="dropdown" right></v-dropdown>
</v-navbar>
</header>
<main>
<v-sidebar id='sidebar' left>
<v-sidebar-items :items="sideMenu"></v-sidebar-items>
</v-sidebar>
<v-content>
<v-container fluid>
<!-- <router-view></router-view> -->
</v-container>
</v-content>
</main>
<v-footer></v-footer>
</v-app>
</template>
similar to the way it was added to navbar items
Bug in https://vuetifyjs.com/components/sidebar after update page on F5.
Trying to set a method on a v-btn
for the click
event, but it doesn't fire.
I've tried using both v-on:click
and @click
, and both don't work.
Here's a snippet:
v-btn(flat block right class="darken-1" v-on:click="console.log('foo')") Login
I'm not sure if this is intended or not, but if a v-text-input
doesn't have the v-model
set, the typed text is cleared as soon as the focus leaves the input.
I can't imagine a scenario where you wouldn't bind the input value to data, but it sure feels odd that it behaves like this.
If it's intended, might be good to document it.
I hope I'm not missing anything obvious, but the items are not binding for me.
Here's my App.vue:
<template>
<v-app top-navbar footer left-fixed-sidebar>
<header>
<v-navbar>
<v-navbar-logo>Vuetify</v-navbar-logo>
<v-navbar-items v-bind:items="items"></v-navbar-items>
</v-navbar>
</header>
<main>
<v-sidebar id="sidebar" fixed left></v-sidebar>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</main>
<v-footer></v-footer>
</v-app>
</template>
<script>
export default {
data () {
return {
items: [
{ text: 'Link', href: '#!' }
]
}
},
mounted () {
this.$vuetify.init()
}
}
</script>
UPDATE: UI wasn't hot reloading automatically. After hitting the refresh the navbar items showed up.
Refactor sidebar process and styles.
docs for how to use the material icons ?
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.