How can I integrate Vuetify with Vue.js?

How can I integrate Vuetify with Vue.js?

To integrate Vuetify with Vue.js, you can start by installing Vuetify via npm. Run npm install vuetify.

What are the steps after installation?

After installation, you need to import Vuetify in your main.js file and use it in your Vue instance. Here's how:

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

new Vue({
  vuetify: new Vuetify(),
}).$mount('#app');

Can you show me a simple example of a Vuetify component?

Sure! Here's a simple example of a Vuetify button:

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

What if I want to customize the theme?

You can customize the theme by passing a theme object to the Vuetify instance. For example:

new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#1976D2',
        secondary: '#424242',
      },
    },
  },
});