Docs/Diferenças de estrutura

Vue

Nexy renderiza Vue 3 componentes de arquivo único no servidor e, em seguida, Vue os assume no navegador. Páginas, layouts, ilhas e ações são iguais em todos os frameworks: esta página cobre a configuração e depois as partes que diferem dos contratos compartilhados.

Iniciar um projeto

nx new my-app --template web-fbr-vue

nx new my-app --template web-modular-vue

O modelo é um projeto em modo servidor com Vue ilhas. Execute nx new my-app sem um modelo para responder aos prompts: o roteador, o tipo de projeto, se deve usar roteamento do lado do cliente e, em seguida, a estrutura.

Habilite Vue em um projeto existente

from nexy.core.models import NexyConfigModelfrom nexy.frontend import vue  class NexyConfig(NexyConfigModel):    useFF = vue()    useAliases = {"@": "src"}

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import nexy from "./__nexy__/vite"; export default defineConfig({  plugins: [nexy(), vue()],  customLogger: nexy.log(),});

nx new grava este arquivo; Nexy escreve __nexy__/vite.ts sozinho, então não o edite.

Regras

• Uma estrutura por projeto. useFF leva exatamente uma estrutura; useFF = [vue(), react()] interrompe o servidor na inicialização.
• Um componente por arquivo. Um arquivo .vue exporta seu componente como padrão; o nome com o qual você o importa é apenas a tag que você escreve.

<template>  <h1>Hello</h1></template>

<script setup lang="ts">defineProps<{ slug: string }>();</script> <template>  <h1>{{ slug }}</h1></template>

<template>  <html>    <body>      <header>My app</header>      <main><slot /></main>    </body>  </html></template>

Ilhas

No modo servidor, um componente Vue importado para um arquivo .nexy é uma ilha.

Importando

Importe componentes no frontmatter do arquivo .nexy:

---from "@/components/Counter.vue" import Counter---<Counter start=3 />

---from "@/components/Counter.vue" import Counter---<Counter start=3 />

Diretrizes de hidratação

Use a propriedade directive para controlar quando a ilha hidrata:

• client:load (padrão): imediatamente
• client:idle: quando o navegador está ocioso
• client:visible: quando rola para visualização
• client:media: quando a consulta de mídia corresponde

Ações e navegação

Chamando ações

Use o gancho useAction para gerenciar o estado de uma chamada de ação. Em Vue, o estado retornado (pending, data, error) são referências calculadas.

<script setup lang="ts">import { ref } from "vue";import { useAction } from "@nexy/client";import { add_todo } from "@nexy/actions"; const title = ref("");const { run, pending, error, data } = useAction(add_todo, {  onSuccess: () => (title.value = ""),});</script> <template>  <form @submit.prevent="run({ title })">    <input v-model="title" />    <button :disabled="pending">Add</button>  </form></template>

Navegação

Use o componente Link para transições do lado do cliente:

<template>  <Link href="/about" active-class="active">About</Link></template>

Para navegação programática, use o gancho useRouter:

import { useRouter } from "@nexy/client"; const router = useRouter();router.push("/dashboard");

Acesso URL

Todos os ganchos de localização retornam referências computadas:

• usePathname(): caminho atual
• useParams(): segmentos dinâmicos
• useSearchParams(): string de consulta
• useLocation(): objeto de localização completo

Próximas etapas

• Visualizações: compare os formatos que uma página pode usar
• Frontend: Vite e a construção do cliente

Copiar a página como Markdown Editar no GitHub