JSPM

vuetify

0.17.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 585184
  • Score
    100M100P100Q165413F
  • License MIT

Vue.js 2 Semantic Component Framework

Package Exports

  • vuetify
  • vuetify/dist/vuetify.css
  • vuetify/dist/vuetify.min.css
  • vuetify/es5
  • vuetify/es5/components
  • vuetify/es5/components/VApp
  • vuetify/es5/components/VAvatar
  • vuetify/es5/components/VBreadcrumbs
  • vuetify/es5/components/VBtn
  • vuetify/es5/components/VCard
  • vuetify/es5/components/VCarousel
  • vuetify/es5/components/VChip
  • vuetify/es5/components/VDataTable
  • vuetify/es5/components/VDivider
  • vuetify/es5/components/VExpansionPanel
  • vuetify/es5/components/VFooter
  • vuetify/es5/components/VGrid
  • vuetify/es5/components/VList
  • vuetify/es5/components/VMenu
  • vuetify/es5/components/VNavigationDrawer
  • vuetify/es5/components/VPagination
  • vuetify/es5/components/VParallax
  • vuetify/es5/components/VProgressLinear
  • vuetify/es5/components/VRadioGroup
  • vuetify/es5/components/VSlider/VSlider.js
  • vuetify/es5/components/VSnackbar
  • vuetify/es5/components/VStepper
  • vuetify/es5/components/VStepper/VStepper.js
  • vuetify/es5/components/VSubheader
  • vuetify/es5/components/VTabs
  • vuetify/es5/components/VTextField
  • vuetify/es5/components/VToolbar
  • vuetify/es5/components/Vuetify
  • vuetify/es5/components/Vuetify/mixins/application
  • vuetify/es5/components/Vuetify/mixins/theme
  • vuetify/es5/components/transitions
  • vuetify/es5/directives
  • vuetify/es5/mixins/colorable
  • vuetify/es5/util/helpers
  • vuetify/src/stylus/app.styl
  • vuetify/src/stylus/main.styl
  • vuetify/src/util/helpers

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuetify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

travis ci badge Coverage codebeat badge Downloads Version CDN License Chat



Supporting Vuetify

Vuetify is an open source MIT project that has been made possible due to the generous contributions by community backers. If you are interested in supporting this project, please consider:

Diamond

Palladium





Introduction

Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze.

Build amazing applications with the power of Vue and Material Design and a massive library of beautifully crafted components. Created according to Google's Material Design Spec, Vuetify components feature an easy-to-remember semantic design that shifts remembering complex classes and markup, to type-as-you speak properties that have simple and clear names.

Harness the power of the Vuetify community and get help 24/7 from talented developers across the world, the dev team and the creator, John Leider. Become a patreon backer and get access to special Patreon only channels.

Vuetify supports all modern browsers, including IE11 and Safari 9+. From mobile to laptop to desktop, you can rest assured that your application will work as expected. Interested in the bleeding edge? Try the vue-cli Webpack SSR (Server side rendered) template and build websites optimized for SEO.

Demo and Documentation

Documentation

One minute Quick-start

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <main>
        <v-container>Hello world</v-container>
      </main>
    </v-app>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

Project Install

# npm
npm install vuetify
# yarn
yarn add vuetify

Use

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

For including styles, you can either place the below styles in your index.html

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">

Or you can import it to your webpack entry point

require('/path/to/node_modules/vuetify/dist/vuetify.min.css')

Keep in mind, you will need to ensure your webpack config contains a css-loader.

Frequently asked questions and Gotchas

Frequently asked questions

Community Support

Ask your support questions on the vuetifyjs [discord](https://chat.vuetifyjs.com).

Additional Resources

Codepen starter [Vuetify Template](http://codepen.io/johnjleider/pen/bgJOrX)