Doku/Rahmenunterschiede

Vue

Nexy rendert Vue 3 Einzeldateikomponenten auf dem Server und übernimmt sie dann Vue im Browser. Seiten, Layouts, Inseln und Aktionen sind in jedem Framework gleich: Auf dieser Seite geht es um die Einrichtung und dann um die Teile, die sich von den gemeinsamen Verträgen unterscheiden.

Starten Sie ein Projekt

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

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

Die Vorlage ist ein Servermodus-Projekt mit Vue Inseln. Führen Sie stattdessen nx new my-app ohne Vorlage aus, um die Eingabeaufforderungen zu beantworten: den Router, den Projekttyp, ob clientseitiges Routing verwendet werden soll, dann das Framework.

Aktivieren Sie Vue in einem vorhandenen Projekt

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 schreibt diese Datei; Nexy schreibt __nexy__/vite.ts selbst, also bearbeiten Sie es nicht.

Regeln

• Ein Framework pro Projekt. useFF benötigt genau ein Framework; useFF = [vue(), react()] stoppt den Server beim Start.
• Eine Komponente pro Datei. Eine .vue Datei exportiert ihre Komponente standardmäßig; Der Name, unter dem Sie es importieren, ist nur das Tag, das Sie schreiben.

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

Inseln

Im Servermodus ist eine in eine .nexy-Datei importierte Vue-Komponente eine Insel.

Importieren

Importieren Sie Komponenten im Frontmatter der Datei .nexy:

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

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

Trinkrichtlinien

Verwenden Sie die Requisite directive, um zu steuern, wann die Insel hydratisiert:

• client:load (Standard): sofort
• client:idle: wenn der Browser inaktiv ist
• client:visible: wenn es in die Ansicht scrollt
• client:media: wenn die Medienabfrage übereinstimmt

Aktionen und Navigation

Aktionen aufrufen

Verwenden Sie den Hook useAction, um den Status eines Aktionsaufrufs zu verwalten. In Vue sind die zurückgegebenen Zustände (pending, data, error) berechnete Referenzen.

<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

Verwenden Sie die Komponente Link für clientseitige Übergänge:

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

Verwenden Sie für die programmatische Navigation den Hook useRouter:

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

URL-Zugriff

Alle Standort-Hooks geben berechnete Referenzen zurück:

• usePathname(): aktueller Pfad
• useParams(): dynamische Segmente
• useSearchParams(): Abfragezeichenfolge
• useLocation(): vollständiges Standortobjekt

Nächste Schritte

• Ansichten: Vergleichen Sie die Formate, die eine Seite verwenden kann
• Frontend: Vite und der Client-Build

Seite als Markdown kopieren Auf GitHub bearbeiten