Vue 3 e Naive UI

O Naive UI é uma biblioteca de componentes de interface de usuário (UI) para Vue.js, desenvolvida com foco em simplicidade, design limpo e flexibilidade. 💻💻

Ela segue o padrão de design "Material Design" e oferece uma vasta gama de componentes prontos para uso, como botões, tabelas, formulários, modais, entre outros, permitindo que os desenvolvedores criem aplicações com interfaces modernas e consistentes de forma rápida e fácil, hoje é uma das minhas bibliotecas favoritas para criação de layouts com Vue3.🚀💻✨

1º Etapa

Entre no seu projeto e instale a biblioteca.

npm i -D naive-ui

Verifique se instalou package.json:

{
  "devDependencies": {
    "naive-ui": "^2.40.1",
  }
}

A versão atual é 2.40.1, pode ser que em algum momento altere, mas acredito que será a mesma forma de instalação.

2º Etapa

Hora de usar essa linda biblioteca de componentes!

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

<template>
  <n-button>naive-ui</n-button>
</template>

Para usar de forma global faça isso:

Adicione também no arquivo main.js ou main.ts

import { createApp } from 'vue'
import App from './App.vue'
import naive from "naive-ui";

createApp(App).use(naive).mount('#app');

Agora você só precisar fazer isso para usar o button:

<template>
  <n-button>naive-ui</n-button>
</template>

Link da documentação:
https://www.naiveui.com/en-US/os-theme

Link de um projeto meu que usa o naive-ui:
https://github.com/Helton-Carlos/stance-erp

Quero agradecer a todos que chegaram ate aqui!

linkedin:
https://www.linkedin.com/in/helton-brito-856ba516b/