Um dos grandes diferenciais do Nuxt 3 é a capacidade de gerenciar automaticamente as importações baseada em seu sistema de diretórios. Mas nem tudo são flores, e muitas vezes precisamos integrar outras ferramentas que não fazem parte do ecossistema Vue/Nuxt, é o caso do Zod, biblioteca de validação baseada em schemas
e nativamente não possui um módulo dedicado para o Nuxt.
Criaremos um módulo interno em uma aplicação Nuxt 3 e configurar a importação automática do Zod e configurar uma pasta chamada schemas
(que não é nativamente suportada pelo Nuxt) para importar automaticamente os arquivos dentro dela.
Iniciando projeto
Iniciaremos um novo projeto inserindo o comando abaixo no nosso terminal.
> npx nuxi@latest init meu-app
Instalando dependências
Com a aplicação iniciada, navegamos até a pasta raíz do app e instalar o zod
.
> cd meu-app
> npm install zod
Após a instalação, é possível utilizar o Zod e definir schemas, mas é necessário realizar a importação dele em cada uso, similar ao arquivo abaixo.
<script setup lang="ts">
import { z } from "zod";
const NameSchema = z.object({
name: z.string().min(3).max(10).optional(),
});
NameSchema.parse({ name: "John" });
</script>
<template>
<div>Hello World</div>
</template>
Perceba que caso eu tome a decisão de isolar o NameSchema
em um arquivo na pasta schemas
, por exemplo, ainda existirá a necessidade de importar o zod nos arquivos, e importar os schemas
da pasta, que não é suportada nativamente pelo Nuxt.
Resolveremos isso criando um módulo.
Escrevendo módulo interno
Módulos no ecossistema do Nuxt é considerado uma forma de simplificar integrações e extender/customizar as funcionalidades do framework, e as importações automáticas fazem parte desse comportamento.
Criaremos um arquivo chamado zod.ts
na pasta modules
, sendo a pasta definida pelo Nuxt para criação de módulos e que vão ser carregados quando a aplicação iniciar.
Um modulo para adicionar a importação automática do Zod pode ser escrito da seguinte forma:
// modules/zod.ts
import { addImports, defineNuxtModule, logger } from "nuxt/kit";
// definimos o módulo
export default defineNuxtModule({
meta: {
// nome do módulo
name: "zod",
},
// função que será executada quando o módulo for carregado
setup() {
// carregamos o módulo
logger.success("Zod internal module loaded");
// adicionamos o import
// equivalente a import {z} from "zod";
addImports({
name: "z",
from: "zod",
});
},
});
Ao executar a aplicação, podemos ver a mensagem que escrevemos no logger
aparecer no terminal:
A partir daqui, o {Z} não precisa ser importado em componentes, páginas, composables, server e etc.
Adicionando pasta Schemas
Agora vamos adicionar o auto-import de uma pasta inteira para não existir a necessidade de importar cada schema
que vamos escrever.
Modificando o módulo da seguinte forma:
// modules/zod.ts
// importamos o addImportsDir
import { addImports, addImportsDir, defineNuxtModule, logger } from "nuxt/kit";
export default defineNuxtModule({
meta: {
name: "zod",
},
setup() {
logger.success("Zod internal module loaded");
addImports({
name: "z",
from: "zod",
});
logger.info("Put Zod schemas in 'schemas' folder");
// Adiciona todos os arquivos da pasta schemas como import
addImportsDir("schemas");
},
});
Agora todos os arquivos que tiverem uma exportação na pasta schemas
vão ter a importação automática configurada.
Exemplo abaixo:
// schemas/nameSchema.ts
export const NameSchema = z.object({
name: z.string().min(3).max(10).optional(),
});
Top comments (0)