DEV | Nuxt.JS Snippets

identificando-se-esta-em-build-ssr-ou-client-side.md

You can check if the code is running during build time using Nuxt's built-in composables. Here's how to do it:

if (process.client && !import.meta.env.SSR) {
  console.log('This will only run on client-side and not during build')
}

Or alternatively using Nuxt's composable:

if (process.client) {
  const nuxtApp = useNuxtApp()
  if (!nuxtApp.isHydrating) {
    console.log('This will only run on client-side and not during build, [composable way]')
  }
}

This approach works well with the current setup in your codebase, considering you're using Nuxt 3 as shown in your package.json dependencies.

rotas-nomeadas-e-custom-routes.md

No Nuxt, as rotas nomeadas são criadas automaticamente com base na estrutura de arquivos dentro da pasta pages. No entanto, se você quiser definir nomes específicos para suas rotas, pode fazer isso usando o arquivo de configuração definePageMeta ou personalizando as rotas no nuxt.config.ts.

---

📌 1. Rotas Nomeadas Automaticamente

O Nuxt gera automaticamente os nomes das rotas com base na estrutura de arquivos dentro de pages. Exemplo:

pages/
 ├── index.vue         -> Nome da rota: "index"
 ├── about.vue         -> Nome da rota: "about"
 ├── products/
 │    ├── index.vue    -> Nome da rota: "products"
 │    ├── [id].vue     -> Nome da rota: "products-id"

Você pode usar essas rotas nomeadas automaticamente ao navegar no Nuxt:

<template>
  <NuxtLink :to="{ name: 'about' }">Sobre</NuxtLink>
</template>

---

📌 2. Definir Nome Personalizado com definePageMeta

Se quiser nomear uma rota manualmente, use definePageMeta dentro da página:

<script setup>
definePageMeta({
  name: "custom-name"
});
</script>

Agora, você pode referenciar essa rota pelo nome:

<NuxtLink :to="{ name: 'custom-name' }">Ir para a página</NuxtLink>

---

📌 3. Definir Rotas Nomeadas Manualmente (nuxt.config.ts)

Se precisar de controle total, pode definir rotas personalizadas no arquivo nuxt.config.ts:

export default defineNuxtConfig({
  pages: false, // Desativa a geração automática de rotas
  routeRules: {
    '/minha-rota': { name: 'minha-rota-personalizada' }
  }
});

Depois, crie um arquivo Vue correspondente em pages/minha-rota.vue.

---

📌 4. Usando Rotas Nomeadas no navigateTo

Você também pode navegar usando navigateTo:

<script setup>
import { navigateTo } from '#app'

const irParaAbout = () => {
  navigateTo({ name: 'about' })
}
</script>

<template>
  <button @click="irParaAbout">Ir para Sobre</button>
</template>

Isso garante uma navegação mais fácil e menos propensa a erros.

---

🎯 Conclusão

• O Nuxt gera nomes automaticamente com base na estrutura de arquivos.
• Você pode definir um nome personalizado usando definePageMeta.
• Para controle total, pode configurar as rotas no nuxt.config.ts.
• Navegar usando NuxtLink ou navigateTo com nomes de rotas melhora a manutenção e clareza do código.