Ferramentas Úteis no Desenvolvimento Web Vue.js

Ao trabalhar em um novo projeto, alguns recursos são necessários dependendo de como o aplicativo deve ser usado. Por exemplo, se você estiver armazenando dados específicos do usuário, precisará lidar com autenticações, o que exigirá a configuração de um formulário que precisa ser validado. Coisas como autenticação e validações de formulários são comuns; existem soluções que possivelmente se encaixam no seu caso de uso.

Para utilizar adequadamente seu tempo de desenvolvimento, é melhor você usar o que está disponível, em vez de inventar o seu.

Como um novo desenvolvedor, existe a possibilidade de você não estar ciente de tudo o que o ecossistema Vue oferece. Este artigo ajudará com isso; ele cobrirá certas ferramentas úteis que ajudarão você a construir melhores aplicativos Vue.

Nota : Existem alternativas para essas bibliotecas e este artigo não coloca essas poucas sobre as outras. Eles são apenas os que eu trabalhei.

Este tutorial é destinado a iniciantes que apenas começaram a aprender sobre Vue ou já possuem conhecimento básico de Vue. Todos os trechos de código usados ​​neste tutorial podem ser encontrados no meu GitHub.

Notificação do Vue

Durante a interação do usuário, geralmente é necessário exibir uma mensagem de sucesso, mensagem de erro ou informações aleatórias para o usuário. Nesta seção, veremos como exibir mensagens e avisos para seu usuário usando vue-notification . Este pacote fornece uma interface com uma boa animação/transição para exibir erros, informações gerais e mensagens de sucesso para seu usuário em seu aplicativo e não requer muita configuração para começar a funcionar.

Instalação

Você pode instalar vue-notification em seu projeto usando Yarn ou NPM, dependendo do gerenciador de pacotes do seu projeto

Fio

 yarn add vue-notification

npm

 npm install --save vue-notification

Após a conclusão da instalação, o próximo passo seria adicioná-lo ao ponto de entrada em seu aplicativo, o arquivo main.js.

main.js

 //several lines of existing code in the file import Notifications from 'vue-notification' Vue.use(Notifications)

Neste ponto, só precisamos adicionar o componente de notificações no arquivo App.vue antes de podermos exibir notificações em nosso aplicativo. A razão pela qual estamos adicionando este componente ao arquivo App.vue é para evitar repetição em nosso aplicativo, porque não importa a página em que o usuário esteja em nosso aplicativo, os componentes no App.vue (por exemplo, os componentes de cabeçalho e rodapé) sempre estar disponível. Isso elimina a dor de ter que registrar o componente de notificação em cada arquivo que precisamos para exibir uma notificação ao usuário.

App.vue

 <template> <div> <div> <router-link to="/">Home</router-link> | <router-link to="/about">Notifications</router-link> </div> <notifications group="demo"/> <router-view /> </div> </template>

Aqui, adicionamos uma instância deste componente que aceita uma prop de group que seria usada para agrupar os diferentes tipos de notificações que temos. Isso ocorre porque o componente de notificações aceita vários adereços que determinam como o componente se comporta e veremos alguns deles.

1. group
   Este prop é usado para especificar os diferentes tipos de notificações que você pode ter em seu aplicativo. Por exemplo, você pode decidir usar estilos e comportamentos diferentes dependendo da finalidade da notificação, validação de formulário, resposta da API etc.
2. type
   Essa prop aceita um valor que serve como um 'nome de classe' para cada tipo de notificação que temos em nosso aplicativo e os exemplos podem incluir success , error e warn . Se usarmos qualquer um desses como um tipo de notificação, podemos facilmente estilizar o componente usando este formato de classe vue-notification + '.' + type vue-notification + '.' + type , ou seja, .vue-notification.warn para warn e assim por diante.
3. duration
   Este prop especifica por quanto tempo o componente de notification deve aparecer antes de desaparecer. Ele aceita um número como valor em ms e também aceita um número negativo (-1) se você quiser que ele permaneça na tela do seu usuário até que ele clique nele.
4. position
   Este suporte é usado para definir a posição em que você deseja que as notificações apareçam em seu aplicativo. Algumas das opções disponíveis são top left , top right , top center , bottom right , bottom left e bottom center .

Podemos adicionar esses adereços ao nosso componente no App.vue para que fique assim;

 <template> <div> <div> <router-link to="/">Home</router-link> | <router-link to="/about">Notifications</router-link> </div> <notifications :group="group" :type="type" :duration="duration" :position="position" /> <router-view /> </div> </template> <script> export default { data() { return { duration: -1, group: "demo", position: "top center", type: "info", }; }, }; </script> <style> .vue-notification.info { border-left: 0; background-color: orange; } .vue-notification.success { border-left: 0; background-color: limegreen; } .vue-notification.error { border-left: 0; background-color: red; } </style>

Também adicionamos estilo para os diferentes tipos de notificação que usaríamos em nosso aplicativo. Observe que, além de group , podemos passar cada um dos adereços restantes em tempo real sempre que quisermos exibir uma notificação e ainda funcionaria de acordo. Para exibir uma notificação em qualquer um dos seus arquivos Vue, você pode fazer o seguinte.

vueFile.vue

 this.$notify({ group: "demo", type: "error", text: "This is an error notification", });

Aqui, criamos uma notificação do type error sob a notificação do group demo . O text da propriedade aceita a mensagem que você deseja que a notificação contenha e, nesse caso, a mensagem é ' Esta é uma notificação de erro'. Esta é a aparência da notificação em seu aplicativo.

Você pode descobrir os outros adereços disponíveis e outras maneiras de configurar a notificação na página de documentos oficiais.

Vuelidate

Um dos elementos mais comuns usados ​​na web são os elementos de formulário ( input[type='text'] , input[type='email'] , input[type='password'] e assim por diante) e sempre há um precisam validar a entrada do usuário para garantir que eles estejam enviando os dados corretos e/ou usando o formato correto no campo de entrada. Com o Vuelidate, você pode adicionar validação aos formulários em sua aplicação Vue.js, economizando tempo e se beneficiando do tempo investido neste pacote. Eu estava ouvindo sobre o Vuelidate por um tempo, mas estava um pouco relutante em dar uma olhada nele porque achei que seria muito complexo, o que significava que eu estava escrevendo validações do zero para a maioria dos campos de formulário nos aplicativos em que trabalhei.

Quando eu finalmente olhei para os documentos, descobri que não era difícil começar e eu poderia validar meus campos de formulário rapidamente e passar para a próxima coisa.

Instalação

Você pode instalar o Vuelidate usando qualquer um dos gerenciadores de pacotes a seguir.

Fio

 yarn add vuelidate

npm

 npm install vuelidate --save

Após a instalação, o próximo passo seria adicioná-lo à configuração do seu aplicativo no arquivo main.js para que você possa usá-lo em seus arquivos vue.

 import Vuelidate from 'vuelidate' Vue.use(Vuelidate)

Supondo que você tenha um formulário parecido com este em seu aplicativo;

vuelidate.vue

 <template> <form @submit.prevent="login" class="form"> <div class="input__container"> <label for="fullName" class="input__label">Full Name</label> <input type="text" name="fullName" v-model="form.fullName" class="input__field" /> </div> <div class="input__container"> <label for="email" class="input__label">Email</label> <input type="email" name="email" v-model="form.email" class="input__field" /> </div> <div class="input__container"> <label for="email" class="input__label">Age</label> <input type="number" name="age" v-model="form.age" class="input__field" /> </div> <div class="input__container"> <label for="password" class="input__label">Password</label> <input type="password" name="password" v-model="form.password" class="input__field" /> </div> <input type="submit" value="LOGIN" class="input__button" /> <p class="confirmation__text" v-if="submitted">Form clicked</p> </form> </template> <script> export default { data() { return { submitted: false, form: { email: null, fullName: null, age: null, password: null, }, }; }, methods: { login() { this.submitted = true; }, }, }; </script>

Agora, para validar esse tipo de formulário, primeiro você precisa decidir qual tipo de validação você precisa para cada campo do formulário. Por exemplo, você pode decidir que precisa que o comprimento mínimo do fullName seja 10 e a idade mínima seja 18 .

Vuelidate vem com validadores embutidos que só precisamos importar para usar. Também podemos optar por validar o campo de senha com base em um formato específico, por exemplo, Password should contain at least a lower case letter, an upper case letter, and a special character . Podemos escrever nosso próprio validador que faz isso e conectá-lo à lista de plugins do Vuelidate.

Vamos levá-lo passo a passo.

Usando validadores integrados

 <script> import { required, minLength, minValue, email, } from "vuelidate/lib/validators"; export default { validations: { form: { email: { email, required, }, fullName: { minLength: minLength(10), required, }, age: { required, minValue: minValue(18), }, }, }, }; </script>

Aqui, importamos alguns validadores que precisamos para validar adequadamente nosso formulário. Também adicionamos uma propriedade de validations onde definimos as regras de validação para cada campo de formulário que queremos validar.

Neste ponto, se você inspecionar o devTools do seu aplicativo, deverá ver algo parecido com isto;

A propriedade computada $v contém vários métodos que são úteis para confirmar a validade do nosso formulário, mas vamos nos concentrar apenas em alguns deles:

1. $invalid
   Para verificar se o formulário passa em todas as validações.
2. email
   Para verificar se o valor é um endereço de e-mail válido.
3. minValue
   Para verificar se o valor de age passa na verificação minValue .
4. minLength
   Para verificar o comprimento de fullName .
5. required
   Para garantir que todos os campos obrigatórios sejam fornecidos.

Se você inserir um valor para age menor que a idade mínima definida na validação e marcar $v.form.age.minValue , ele será definido como false e isso significa que o valor no campo de entrada não passa na verificação de validação minValue .

Usando validadores personalizados

Também precisamos validar nosso campo de senha e garantir que ele contenha o formato necessário, mas o Vuelidate não possui um validador embutido que possamos usar para conseguir isso. Podemos escrever nosso próprio validador personalizado que faz isso usando RegEx. Esse validador personalizado ficaria assim;

 <script> import { required, minLength, minValue, email, } from "vuelidate/lib/validators"; export default { validations: { form: { //existing validator rules password: { required, validPassword(password) { let regExp = /^(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[AZ]+)[a-zA-Z0-9!@#$%^&*]{6,}$/; return regExp.test(password); }, }, }, }, }; </script>

Aqui, criamos um validador personalizado que usa um Regex para verificar se a senha contém o seguinte;

1. Pelo menos uma letra maiuscula;
2. Pelo menos uma letra minúscula;
3. Pelo menos um caractere especial;
4. Pelo menos um numero;
5. Deve ter um comprimento mínimo de 6.

Se você tentar inserir qualquer senha que não atenda a nenhum dos requisitos listados acima, validPassword será definido como false .

Agora que temos certeza de que nossas validações estão funcionando, precisamos exibir as mensagens de erro apropriadas para que o usuário saiba por que não pode continuar. Isso ficaria assim:

 <template> <form @submit.prevent="login" class="form"> <div class="input__container"> <label for="fullName" class="input__label">Full Name</label> <input type="text" name="fullName" v-model="form.fullName" class="input__field" /> <p class="error__text" v-if="!$v.form.fullName.required"> This field is required </p> </div> <div class="input__container"> <label for="email" class="input__label">Email</label> <input type="email" name="email" v-model="form.email" class="input__field" /> <p class="error__text" v-if="!$v.form.email.required"> This field is required </p> <p class="error__text" v-if="!$v.form.email.email"> This email is invalid </p> </div> <div class="input__container"> <label for="email" class="input__label">Age</label> <input type="number" name="age" v-model="form.age" class="input__field" /> <p class="error__text" v-if="!$v.form.age.required"> This field is required </p> </div> <div class="input__container"> <label for="password" class="input__label">Password</label> <input type="password" name="password" v-model="form.password" class="input__field" /> <p class="error__text" v-if="!$v.form.password.required"> This field is required </p> <p class="error__text" v-else-if="!$v.form.password.validPassword"> Password should contain at least a lower case letter, an upper case letter, a number and a special character </p> </div> <input type="submit" value="LOGIN" class="input__button" /> </form> </template>

Aqui, adicionamos um parágrafo que exibe um texto informando ao usuário que um campo é obrigatório, um valor inserido para o email não é válido ou que a senha não contém os caracteres necessários. Se olharmos para isso em seu navegador, você verá os erros já aparecendo em cada campo de entrada.

Isso é ruim para a experiência do usuário, pois o usuário ainda não interage com o formulário e, como tal, os textos de erro não devem ser visíveis pelo menos até que o usuário tente enviar o formulário. Para corrigir isso, adicionaríamos submitted à condição necessária para que os textos de erro fossem exibidos e também mudaríamos o valor de submitted para true quando o usuário clicar no botão enviar.

 <template> <form @submit.prevent="login" class="form"> <div class="input__container"> <label for="fullName" class="input__label">Full Name</label> <input type="text" name="fullName" v-model="form.fullName" class="input__field" /> <p class="error__text" v-if="submitted && !$v.form.fullName.required"> This field is required </p> </div> <div class="input__container"> <label for="email" class="input__label">Email</label> <input type="email" name="email" v-model="form.email" class="input__field" /> <p class="error__text" v-if="submitted && !$v.form.email.required"> This field is required </p> <p class="error__text" v-if="submitted && !$v.form.email.email"> This email is invalid </p> </div> <div class="input__container"> <label for="email" class="input__label">Age</label> <input type="number" name="age" v-model="form.age" class="input__field" /> <p class="error__text" v-if="submitted && !$v.form.age.required"> This field is required </p> </div> <div class="input__container"> <label for="password" class="input__label">Password</label> <input type="password" name="password" v-model="form.password" class="input__field" /> <p class="error__text" v-if="submitted && !$v.form.password.required"> This field is required </p> <p class="error__text" v-else-if="submitted && !$v.form.password.validPassword" > Password should contain at least a lower case letter, an upper case letter, a number and a special character </p> </div> <input type="submit" value="LOGIN" class="input__button" /> </form> </template>

Agora os textos de erro não aparecem até que o usuário clique no botão enviar e isso é muito melhor para o usuário. Cada erro de validação aparecerá se o valor inserido no formulário não satisfizer a validação.

Por fim, gostaríamos apenas de processar a entrada do usuário quando todas as validações em nosso formulário tiverem passado e uma maneira de fazer isso seria usar a propriedade $invalid no form que está presente na propriedade $v computada. Vamos dar uma olhada em como fazer isso:

 methods: { login() { this.submitted = true; let invalidForm = this.$v.form.$invalid; //check that every field in this form has been entered correctly. if (!invalidForm) { // process the form data } }, },

Aqui, estamos verificando se o formulário foi totalmente preenchido e preenchido corretamente. Se retornar false , significa que o formulário é válido e podemos processar os dados do formulário, mas se for true , significa que o formulário ainda é inválido e o usuário ainda precisa cuidar de alguns erros no formulário. Também podemos usar essa propriedade para desabilitar ou estilizar o botão de envio, dependendo de sua preferência.

Estado persistente do Vuex

Durante o desenvolvimento, há casos em que você armazena dados como informações e token de um usuário em sua loja Vuex. Mas seus dados de armazenamento Vuex não persistirão se seus usuários tentarem atualizar seu aplicativo a partir do navegador ou inserir uma nova rota na guia URL do seu navegador e o estado atual do seu aplicativo for perdido com ele. Isso faz com que o usuário seja redirecionado para a página de login se a rota estiver sendo protegida com proteção de navegação, o que é um comportamento anormal para o seu aplicativo. Isso pode ser corrigido com vuex-persistedstate , vamos ver como.

Instalação

Você pode instalar este plugin usando qualquer um dos dois métodos:

Fio

 yarn add vuex-persistedstate

npm

 npm install --save vuex-persistedstate

Após a conclusão do processo de instalação, o próximo passo seria configurar este plugin para estar pronto para uso em sua loja Vuex.

 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate"; Vue.use(Vuex) export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {}, plugins: [createPersistedState()] })

Neste ponto, toda a nossa Vuex Store seria armazenada em localStorage (por padrão), mas vuex-persistedstate vem com a opção de usar sessionStorage ou cookies .

 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate"; Vue.use(Vuex) export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {}, // changes storage to sessionStorage plugins: [createPersistedState({ storage: window.sessionStorage }); ] })

Para confirmar que nossa Loja persistiria após atualizar ou fechar a guia do navegador, vamos atualizar nossa loja para ficar assim:

 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate"; Vue.use(Vuex) export default new Vuex.Store({ state: { user: null }, mutations: { SET_USER(state, user) { state.user = user } }, actions: { getUser({ commit }, userInfo) { commit('SET_USER', userInfo) } }, plugins: [createPersistedState()] })

Aqui, adicionamos um estado de user que armazenaria os dados do usuário do formulário criado na seção anterior. Também adicionamos uma mutação SET_USER que seria usada para modificar o estado do user . Por fim, adicionamos uma ação getUser que receberia o objeto de usuário e o passaria para a propriedade de mutação SET_USER . O próximo seria despachar esta ação após validar nosso formulário com sucesso. Isso se parece com isso:

 methods: { login() { this.submitted = true; let invalidForm = this.$v.form.$invalid; let form = this.form; //check that every field in this form has been entered correctly. if (!invalidForm) { // process the form data this.$store.dispatch("getUser", form); } }, },

Agora, se você preencher corretamente o formulário, enviá-lo e abrir a seção localStorage na guia de aplicativos no devTools do seu navegador, você deverá ver uma propriedade vuex parecida com esta:

Nesse ponto, se você atualizar seu navegador ou abrir seu aplicativo em uma nova guia, seu estado de user ainda persistirá nessas guias/sessão (em localStorage).

Conclusão

Existem muitas bibliotecas que podem ser muito úteis no desenvolvimento web em Vuejs e às vezes pode ser difícil escolher qual usar ou onde encontrá-las. Os links a seguir contêm bibliotecas que você pode usar em seu aplicativo Vue.js.

1. vuejsexamples. com.
2. madewithvuejs. com.

Muitas vezes, há mais de uma biblioteca que faz a mesma coisa que você está tentando alcançar em seu aplicativo ao pesquisar uma 'biblioteca', o importante é garantir que a opção que você escolheu funcione para você e esteja sendo mantida por seu(s) criador(es) para que não faça com que seu aplicativo falhe .

Recursos adicionais

• “Notificações Vue.js,” Documentos oficiais, GitHub
• “Vuelidate”, site oficial
• “Validação de formulários em menos de uma hora com Vuelidate”, Sarah Drasner, CSS-Tricks
• “ vuex-persistedstate ”, Fio