UI-библиотеки для Vue

npm install element-plus

// main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import ru from 'element-plus/es/locale/lang/ru'

app.use(ElementPlus, { locale: ru })

<template>
  <el-button type="primary" @click="save">Сохранить</el-button>
  <el-input v-model="name" placeholder="Имя" />
  <el-table :data="users">
    <el-table-column prop="name" label="Имя" />
    <el-table-column prop="email" label="Email" />
  </el-table>
</template>

npm install vuetify

// main.ts
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

const vuetify = createVuetify({
  icons: { defaultSet: 'mdi', aliases, sets: { mdi } },
  theme: {
    defaultTheme: 'light',
  },
})

app.use(vuetify)

<template>
  <v-btn color="primary" @click="save">Сохранить</v-btn>
  <v-text-field v-model="name" label="Имя" />
  <v-data-table :items="users" :headers="headers" />
</template>

npm install primevue @primevue/themes

// main.ts
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'

app.use(PrimeVue, {
  theme: {
    preset: Aura,
  },
})

<script setup lang="ts">
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
</script>

<template>
  <Button label="Сохранить" @click="save" />
  <InputText v-model="name" placeholder="Имя" />
  <DataTable :value="users">
    <Column field="name" header="Имя" />
    <Column field="email" header="Email" />
  </DataTable>
</template>

npm install @nuxt/ui

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
})

<template>
  <UButton label="Сохранить" @click="save" />
  <UInput v-model="name" placeholder="Имя" />
  <UTable :rows="users" />
</template>

npm install naive-ui

<script setup lang="ts">
import { NButton, NInput, NDataTable } from 'naive-ui'
</script>

<template>
  <n-button type="primary" @click="save">Сохранить</n-button>
  <n-input v-model:value="name" placeholder="Имя" />
  <n-data-table :columns="columns" :data="users" />
</template>

<template>
  <button
    :class="[
      'px-4 py-2 rounded-lg font-medium transition-colors',
      variant === 'primary'
        ? 'bg-violet-600 text-white hover:bg-violet-700'
        : 'bg-gray-100 text-gray-800 hover:bg-gray-200',
    ]"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>