Material UI Vue 3
1. **Vuetify** – The most popular Material Design framework for Vue.js.
2. **Material Design for Vue (MD3-Vue)** – A newer library based on Material 3.
3. **MUI via Web Components** – Using Material Web Components directly.
### 1. Using **Vuetify**
Install Vuetify:
yarn add vuetifyOr with npm:
npm install vuetifyThen, in `main.js`:
import { createApp } from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify'; // Create a Vuetify plugin file
const app = createApp(App);
app.use(vuetify);
app.mount('#app');Inside `src/plugins/vuetify.js`:
import { createVuetify } from 'vuetify';
import 'vuetify/styles';
export default createVuetify();Now, you can use Vuetify components:
<template>
<v-container>
<v-text-field label="Enter your name" outlined></v-text-field>
<v-btn color="primary">Submit</v-btn>
</v-container>
</template>—
### 2. Using **Material Design 3 for Vue**
Install:
yarn add @material-vue/coreUsage:
<template>
<md-outlined-text-field label="Name"></md-outlined-text-field>
<md-filled-button>Submit</md-filled-button>
</template>
<script setup>
import { MdOutlinedTextField, MdFilledButton } from '@material-vue/core';
</script>—
### 3. Using **Material Web Components (MWC)**
Install:
yarn add @material/webUsage:
<template>
<md-outlined-text-field label="Name"></md-outlined-text-field>
<md-filled-button @click="submit">Submit</md-filled-button>
</template>
<script setup>
import '@material/web/textfield/outlined-text-field.js';
import '@material/web/button/filled-button.js';
const submit = () => {
console.log('Submitted!');
};
</script>—
#### Which One to Use?
– **Vuetify** – Best if you want a full-featured Material Design system.
– **Material Vue (MD3-Vue)** – More lightweight and modern (Material 3).
– **Material Web Components** – Good if you only need a few Material Design elements.
Let me know which approach fits your project best! 🚀