DEV Community

Cover image for Vue 3 e Naive UI
Helton Carlos Brito Silva
Helton Carlos Brito Silva

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Verifique se instalou package.json:

{
  "devDependencies": {
    "naive-ui": "^2.40.1",
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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

<template>
  <n-button>naive-ui</n-button>
</template>
Enter fullscreen mode Exit fullscreen mode

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

Image description

Quero agradecer a todos que chegaram ate aqui!

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay