# Vue Awesome Notifications
O Vue Awesome Notifications permite criar notificações interativas para o usuário.
# Instalação no Projeto
Comando: yarn add vue-awesome-notifications
./src/main.js
import Vue from 'vue';
import VueAWN from 'vue-awesome-notifications';
Vue.use(VueAWN, {});
// ...
Vamos adicionar o css global:
./src/App.vue
<style>
@import '~vue-awesome-notifications/dist/styles/style.css';
.router-app-enter-active, .router-app-leave-active {
transition: opacity 0.2s ease;
}
.router-app-enter, .router-app-leave-to {
opacity: 0;
}
</style>
Vamos utilizar o AWS para mostrar a verificação de nosso formulário:
./src/pages/Register.vue
// ...
methods: {
enviarFormulario() {
if (!this.$v.$invalid) {
// POST para a rota em uma possível API
localStorage.setItem('AUTENTICADO', true);
this.$store.dispatch('usuarioLogado', {
conta: this.conta,
senha: this.senha,
});
this.$router.push('/dashboard');
} else {
this.$awn.alert('Formulário Inválido');
}
},
},
// ...
- Usando o $awn conseguimos emitir os eventos customizáveis.
Recomendamos MUITO que acesse a documentação do AWN.
Na próxima seção, iremos mostrar como utilizar Dark Theme de forma facilitada no Vue, nos vemos lá!
- Agora iremos apenas mostrar outras bibliotecas que podem ajudar o desenvolvimento de aplicações, vamos voltar a mecher no projeto apenas na seção de Testes e Documentação