vuetifyjs / vuetify

🐉 Vue Component Framework

💖 Supporting Vuetify

Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from the entire Core Team. Sponsor Vuetify and receive some awesome perks and support Open Source Software at the same time! 🎉

• Become a backer or sponsor on GitHub or Patreon (supports John and Heather)
• Become a backer or sponsor on Open Collective (supports the Core team)
• Become a subscriber on Tidelift
• Make a one-time payment with Paypal
• Book time with the Team

What's the difference between GitHub Sponsors, Patreon, and OpenCollective?

Funds donated through GitHub Sponsors and Patreon go directly to support John and Heather's full-time work on Vuetify. Funds donated via Open Collective are managed with transparent expenses and will be used for compensating work and expenses for Core team members. Your name/logo will receive proper recognition and exposure by donating on either platform.

Special Sponsor

Diamond Sponsors

Your Logo Here

Platinum Sponsors

⚡ Quick Start

Getting started with Vuetify is easy. To create a new project, choose your package manager and run one of the following commands:

Using yarn

yarn create vuetify

Using npm

npm create vuetify@latest

Using pnpm

pnpm create vuetify

Using bun

bun create vuetify

For more information on how to get started, such as using Nuxt or Laravel, check out the official Installation guide.

🚀 Introduction

Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components. No design skills required — everything you need to create amazing applications is at your fingertips. Vuetify has a massive API that supports any use-case. Some highlights include:

• Customizable: Extensive customization options with SASS/SCSS and Default configuration and Blueprints
• Responsive Layout: The default configuration of Vuetify components is responsive, allowing your application to adapt to different screen sizes.
• Theme System: A powerful color system that makes it easy to style your application with a consistent color palette.
• Vite Support: Smaller bundle sizes with automatic tree-shaking
• 18 months Long-term support for Major releases
• Internationalization: 42+ supported languages

Browser Support

Vuetify supports all modern browsers, including Safari 13+ (using polyfills). Components are designed for a minimum width of 320px.

🌎 Vuetify Ecosystem

Resources

Name	Description
💫 Enterprise Support	Let the experts at Vuetify help you get the most out of your application with a customized support plan from the the team behind the framework
💭 Discord Community	Our massive and inclusive Discord server where you can ask questions, share feedback, and connect with other Vuetify developers
🎮 Vuetify Play	A Vuetify 3 playground built using vuejs/repl where you can play with our components
🐛 Vuetify Issues	A web application for reporting bugs and issues with Vuetify, Documentation, or one of our other packages
🛒 Vuetify Store	The official Vuetify Store where you can download free digital products, purchase pre-made themes, and more

Packages

Name	Version	Description
🛠️ create-vuetify		Quickly spin up applications with a simple command.
📦 vuetify-loader		Compiler plugins for autoloading Vuetify components
📄 eslint-plugin-vuetify		An opinionated eslint-plugin for Vuetify

🖥️ Documentation

To check out the docs, visit vuetifyjs.com.

🙋‍♂️ Questions

For help and support questions, please use our Discord community. This issue list of this repo is exclusively for bug reports and feature requests.

🐛 Issues

Use our Issue generator to report bugs and request new features.

Please make sure to read the Important Information before opening an issue. Issues not confirming to the guidelines may be closed immediately.

📝 Changelog

Detailed changes for each release are documented in the release notes.

💁‍♂️ Contributing

Developers interested in contributing should read the Code of Conduct and the Contribution Guide.

Please do not ask general questions in an issue. Issues are only to report bugs, suggest enhancements, or request new features. For general questions and discussions, ask in the community chat.

To help you get you familiar with our contribution process, we have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started. If you have any questions, please join us on the community chat.

We also have a list of help wanted issues that you might want to check.

📑 License

Vuetify is available under the MIT software license.

Copyright (c) 2016-present Vuetify, LLC

---

This project exists thanks to all the people who contribute 😍!

vuetify's Issues

Meteor integration

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.. ?

Flash of unstyled content on page load

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?

Modal button becomes unresponsive after page refresh

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

v0.7.10 <v-text-input> is not updated if model value changed

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.

v-row and v-col meaning is swapped

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.

Error: Unknown custom element: <router-link>

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??

Sidebar directive should not have a delimeter

Is currently v-side-bar, should be v-sidebar.

Parallax has issues with smaller heights

When using a smaller height on parallax can cause weird issues.

navbar in safari 10.0.2 navbar-item is not vertical center

Support for Community Material Design Icons

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?

Text input clears on blur

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.

site has FOUT

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.

Multiline textboxes?

I tried the multiple parameter but still a single line. thanks for your help

v-select defaultText is not selectable

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.

Server Side Rendering Docs Missing

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).

Uncaught TypeError: _vm._c is not a function(…)

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(…)

CollapsibleHeader does not work with whitespace between v-collapsible-header and v-collapsible-body

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

Best way for validation on form inputs?

Card layout modified by Vue template style

On the Vue template file simple/template/styles.css the Card component layout gets modified, leaving a transparent bottom section visible.

.card {
  margin-top: -1rem;
  margin-bottom: 5rem;

Removing that .card styling fixes it.

Invalid CSS after "": expected 1 selector or at-rule, was ".cards"

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

vendor chunk hashing

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.

the text between v-radio labels can not be displayed

<v-radio>option 1</v-radio>
option 1 is not be displayed.

<v-btn> v-on:click doesn't work

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

Refactor Navbar

Refactor navbar functionality and styles.

single drop down component

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

Question: how to change dropdown icon color inside Navbar?

material "ink ripple" effect is missing

Material design spec includes an "ink ripple" effect to animate a button push event.

For implementation example see: http://materializecss.com/waves.html#!

Sidebar missing drawer computed class

"once" in event listener option

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.

NavbarItem should have router option

Similar to SidebarItem.

Quick start for existing projects

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.

Refactor Sidebar

Refactor sidebar process and styles.

RouterLink inside v-navbar-items

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 :)

Browser compatibility

Some words on browser compatibility?

Bug in https://vuetifyjs.com/components/sidebar after update page on F5

Bug in https://vuetifyjs.com/components/sidebar after update page on F5.

button is not custom for ripple or success

make project for vue-cli for vuetify template

<v-btn ripple success>Click!</v-btn>

is not work.

Button doesn't apply 'primary'

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>

The client-side rendered virtual DOM tree is not matching server-rendered content

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>

Looking for iOS Testing

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.

Sugestion: Change VueJS version in project description

I think it'll draw some confusion to see "VueJS 2.0", when this is actually compatible with 2.x.

Can't close side bar in mobile-like size?

It seems can't close side bar in mobile-like size. Does anyone have idea?

Is this production ready?

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?

[Req] Context Menu

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.

...

...

...slot html/components ... ...slot html/components ...

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)

icon docs

docs for how to use the material icons ?

Sliders update images but not number of images

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.

Component slots undefined after latest Vuetify update

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.

CLI is failing

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 "

<v-navbar-items> doesn't load the array from data

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.

Cant add events on v-btn

<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.

add router option to dropdown

similar to the way it was added to navbar items