Docs/Différences de cadre

Vue

Nexy restitue Vue 3 composants mono-fichier sur le serveur, puis Vue les reprend dans le navigateur. Les pages, mises en page, îlots et actions sont les mêmes dans tous les frameworks : cette page couvre la configuration, puis les parties qui diffèrent des contrats partagés.

Démarrer un projet

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

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

Le modèle est un projet en mode serveur avec Vue îles. Exécutez nx new my-app sans modèle pour répondre aux invites : le routeur, le type de projet, l'utilisation ou non du routage côté client, puis le framework.

Activer Vue dans un projet existant

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 écrit ce fichier ; Nexy écrit lui-même __nexy__/vite.ts, alors ne le modifiez pas.

Règles

• Un framework par projet. useFF prend exactement un framework ; useFF = [vue(), react()] arrête le serveur au démarrage.
• Un composant par fichier. Un fichier .vue exporte son composant par défaut ; le nom sous lequel vous l'importez est uniquement la balise que vous écrivez.

<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>

Îles

En mode serveur, un composant Vue importé dans un fichier .nexy est un îlot.

Importation

Importez des composants dans le frontmatter du fichier .nexy :

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

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

Directives d'hydratation

Utilisez l'accessoire directive pour contrôler le moment où l'île s'hydrate :

• client:load (par défaut) : immédiatement
• client:idle : lorsque le navigateur est inactif
• client:visible : lorsqu'il défile dans la vue
• client:media : lorsque la requête multimédia correspond

Actions et navigation

Appeler des actions

Utilisez le hook useAction pour gérer l'état d'un appel à l'action. Dans Vue, les états renvoyés (pending, data, error) sont des références calculées.

<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>

Navigation

Utilisez le composant Link pour les transitions côté client :

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

Pour la navigation par programmation, utilisez le hook useRouter :

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

Accès aux URL

Tous les hooks de localisation renvoient des références calculées :

• usePathname() : chemin actuel
• useParams() : segments dynamiques
• useSearchParams() : chaîne de requête
• useLocation() : objet de localisation complet

Prochaines étapes

• Vues : comparez les formats qu'une page peut utiliser
• Frontend : Vite et la build client

Copier la page en Markdown Modifier sur GitHub