Convert Figma logo to code with AI

vuetifyjs logovuetify

🐉 Vue Component Framework

39,623
6,949
39,623
848

Top Related Projects

54,014

The Intuitive Vue Framework.

25,724

Quasar Framework - Build high-performance VueJS user interfaces in record time

🎉 A Vue.js 3 UI Library made by Element team

54,105

A Vue.js 2.0 UI Toolkit for Web

9,540

Lightweight UI components for Vue.js based on Bulma

Quick Overview

Vuetify is a comprehensive Material Design component framework for Vue.js. It provides a rich set of pre-built UI components and tools to create beautiful, responsive web applications following Google's Material Design guidelines. Vuetify aims to simplify the process of building modern web interfaces while maintaining flexibility and customization options.

Pros

  • Extensive collection of ready-to-use Material Design components
  • Consistent and responsive design across various devices and screen sizes
  • Active community and regular updates
  • Excellent documentation and examples

Cons

  • Learning curve for developers new to Material Design or Vue.js
  • Large bundle size if not properly optimized
  • Some limitations in customization for highly unique designs
  • Potential performance issues with complex layouts or large datasets

Code Examples

  1. Creating a basic app bar:
<template>
  <v-app-bar app color="primary" dark>
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
    <v-toolbar-title>My App</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon>
      <v-icon>mdi-magnify</v-icon>
    </v-btn>
  </v-app-bar>
</template>
  1. Implementing a data table with sorting and pagination:
<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Dessert', value: 'name' },
        { text: 'Calories', value: 'calories' },
      ],
      desserts: [
        { name: 'Frozen Yogurt', calories: 159 },
        { name: 'Ice cream sandwich', calories: 237 },
        // ... more items
      ],
    }
  },
}
</script>
  1. Creating a responsive grid layout:
<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="6" lg="4">
        <v-card>
          <v-card-title>Card 1</v-card-title>
          <v-card-text>Content for card 1</v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="6" lg="4">
        <v-card>
          <v-card-title>Card 2</v-card-title>
          <v-card-text>Content for card 2</v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="6" lg="4">
        <v-card>
          <v-card-title>Card 3</v-card-title>
          <v-card-text>Content for card 3</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

Getting Started

To start using Vuetify in your Vue.js project:

  1. Install Vuetify using npm or yarn:

    npm install vuetify
    
  2. Import and use Vuetify in your main.js file:

    import Vue from 'vue'
    import Vuetify from 'vuetify'
    import 'vuetify/dist/vuetify.min.css'
    
    Vue.use(Vuetify)
    
    new Vue({
      vuetify: new Vuetify(),
      render: h => h(App)
    }).$mount('#app')
    
  3. Add the Vuetify component to your App.vue file:

    <template>
      <v-app>
        <!-- Your app content -->
      </v-app>
    </template>
    

Competitor Comparisons

54,014

The Intuitive Vue Framework.

Pros of Nuxt

  • Full-featured framework for building Vue.js applications with server-side rendering (SSR) capabilities
  • Automatic code splitting and optimized performance out of the box
  • Built-in routing system and directory structure for better organization

Cons of Nuxt

  • Steeper learning curve due to additional concepts and configuration options
  • May be overkill for simple single-page applications (SPAs)
  • Less flexibility in terms of customization compared to a UI component library

Code Comparison

Nuxt (pages/index.vue):

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  asyncData() {
    return { title: 'Welcome', description: 'This is a Nuxt.js page' }
  }
}
</script>

Vuetify (App.vue):

<template>
  <v-app>
    <v-main>
      <v-container>
        <h1>{{ title }}</h1>
        <v-btn color="primary">Click me</v-btn>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data: () => ({ title: 'Welcome to Vuetify' })
}
</script>
25,724

Quasar Framework - Build high-performance VueJS user interfaces in record time

Pros of Quasar

  • Built-in support for multiple platforms (web, mobile, desktop) with a single codebase
  • Extensive set of custom components and directives optimized for performance
  • Integrated build system and development server with hot-reload

Cons of Quasar

  • Steeper learning curve due to its comprehensive nature
  • Less widespread adoption compared to Vuetify, potentially resulting in a smaller community

Code Comparison

Quasar:

<template>
  <q-btn color="primary" label="Click me" />
</template>

Vuetify:

<template>
  <v-btn color="primary">Click me</v-btn>
</template>

Key Differences

  • Quasar uses q- prefix for components, while Vuetify uses v-
  • Quasar often utilizes props for common attributes, whereas Vuetify tends to use direct attributes
  • Quasar's build system is more tightly integrated, while Vuetify relies more on Vue CLI

Community and Ecosystem

  • Vuetify has a larger user base and more third-party resources
  • Quasar offers more comprehensive documentation and guides for multi-platform development
  • Both projects have active development and regular updates

Performance

  • Quasar is generally considered more performant out-of-the-box
  • Vuetify has made significant improvements in recent versions to enhance performance

🎉 A Vue.js 3 UI Library made by Element team

Pros of Element Plus

  • Lighter weight and faster performance
  • More customizable and flexible component system
  • Better support for internationalization (i18n)

Cons of Element Plus

  • Smaller community and ecosystem compared to Vuetify
  • Less comprehensive documentation and examples
  • Steeper learning curve for beginners

Code Comparison

Element Plus:

<template>
  <el-button type="primary">Primary Button</el-button>
</template>

<script>
import { ElButton } from 'element-plus'
export default {
  components: { ElButton }
}
</script>

Vuetify:

<template>
  <v-btn color="primary">Primary Button</v-btn>
</template>

<script>
export default {
  // No need to import components individually
}
</script>

Element Plus uses a more modular approach, requiring individual component imports, while Vuetify automatically includes all components globally. This can lead to smaller bundle sizes for Element Plus but may require more setup.

Both libraries offer robust UI component systems for Vue.js applications, with Vuetify providing a more opinionated Material Design implementation and Element Plus offering greater flexibility. The choice between them often depends on project requirements, team familiarity, and design preferences.

54,105

A Vue.js 2.0 UI Toolkit for Web

Pros of Element

  • Lighter weight and faster performance
  • More extensive documentation and examples
  • Better support for internationalization (i18n)

Cons of Element

  • Smaller community and ecosystem compared to Vuetify
  • Less frequent updates and maintenance
  • Limited built-in themes and customization options

Code Comparison

Element:

<el-button type="primary" @click="handleClick">
  Click me
</el-button>

Vuetify:

<v-btn color="primary" @click="handleClick">
  Click me
</v-btn>

Both Element and Vuetify are popular UI component libraries for Vue.js applications. Element focuses on simplicity and performance, making it a good choice for lightweight projects or those requiring extensive internationalization support. It offers comprehensive documentation and examples, which can be beneficial for developers new to the library.

On the other hand, Vuetify has a larger community and ecosystem, providing more resources, third-party integrations, and frequent updates. It also offers more built-in themes and customization options, making it suitable for projects that require a high degree of visual customization.

The code comparison shows that both libraries have similar syntax for basic components, with slight differences in naming conventions and attribute usage. Developers familiar with Vue.js should find it relatively easy to work with either library.

9,540

Lightweight UI components for Vue.js based on Bulma

Pros of Buefy

  • Lightweight and less opinionated, allowing for more customization
  • Closer to vanilla Bulma CSS, making it easier for Bulma users to adopt
  • Simpler learning curve for developers familiar with Bulma

Cons of Buefy

  • Smaller ecosystem and community compared to Vuetify
  • Fewer pre-built components and features out of the box
  • Less frequent updates and potentially slower bug fixes

Code Comparison

Buefy:

<template>
  <b-button @click="showModal">Open Modal</b-button>
  <b-modal v-model="isModalActive">
    <p class="modal-card-title">Modal Title</p>
    <p>Modal Content</p>
  </b-modal>
</template>

Vuetify:

<template>
  <v-btn @click="dialog = true">Open Dialog</v-btn>
  <v-dialog v-model="dialog" width="500">
    <v-card>
      <v-card-title>Dialog Title</v-card-title>
      <v-card-text>Dialog Content</v-card-text>
    </v-card>
  </v-dialog>
</template>

Both Buefy and Vuetify are popular UI component libraries for Vue.js, but they have different approaches. Buefy is based on the Bulma CSS framework and aims to stay close to its principles, while Vuetify implements Material Design and provides a more comprehensive set of components and features. The choice between them depends on project requirements, design preferences, and developer familiarity with the underlying CSS frameworks.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Vuetify Logo

Downloads Downloads
License Chat
Version CDN

💖 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! 🎉

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 pnpm

pnpm create vuetify

Using yarn

yarn create vuetify

Using npm

npm create vuetify@latest

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
✂️ Vuetify Snips Pre-built code snippets for Vuetify components that you can use in your projects
💫 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 Version Quickly spin up applications with a simple command.
📦 vuetify-loader Version Compiler plugins for autoloading Vuetify components
📄 eslint-plugin-vuetify Version An opinionated eslint-plugin for Vuetify

🖥️ Documentation

To check out the docs, visit vuetifyjs.com.

Crowdin Uploads

🙋‍♂️ 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 😍!

NPM DownloadsLast 30 Days