Dokumentasi/Perbedaan kerangka

Vue

Nexy merender Vue 3 komponen file tunggal di server, lalu Vue mengambil alihnya di browser. Halaman, tata letak, pulau, dan tindakan sama di setiap kerangka kerja: halaman ini mencakup penyiapan, lalu bagian-bagian yang berbeda dari kontrak bersama.

Mulai sebuah proyek

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

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

Templatnya adalah proyek mode server dengan pulau Vue. Jalankan nx new my-app tanpa templat untuk menjawab petunjuknya: router, jenis proyek, apakah akan menggunakan perutean sisi klien, lalu kerangka kerja.

Aktifkan Vue di proyek yang sudah ada

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 menulis file ini; Nexy menulis __nexy__/vite.ts sendiri, jadi jangan diedit.

Aturan

• Satu kerangka kerja per proyek. useFF membutuhkan tepat satu kerangka kerja; useFF = [vue(), react()] menghentikan server saat startup.
• Satu komponen per file. File .vue mengekspor komponennya sebagai default; nama yang Anda impor hanyalah tag yang Anda tulis.

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

Pulau

Dalam mode server, komponen Vue yang diimpor ke file .nexy adalah sebuah pulau.

Mengimpor

Impor komponen di frontmatter file .nexy:

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

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

Arahan hidrasi

Gunakan prop directive untuk mengontrol kapan pulau terhidrasi:

• client:load (default): segera
• client:idle: saat browser dalam keadaan idle
• client:visible: saat bergulir hingga terlihat
• client:media: ketika kueri media cocok

Tindakan dan navigasi

Memanggil tindakan

Gunakan hook useAction untuk mengelola status panggilan tindakan. Di Vue, status yang dikembalikan (pending, data, error) adalah referensi yang dihitung.

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

Navigasi

Gunakan komponen Link untuk transisi sisi klien:

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

Untuk navigasi terprogram, gunakan kait useRouter:

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

Akses URL

Semua kait lokasi mengembalikan referensi yang dihitung:

• usePathname(): jalur saat ini
• useParams(): segmen dinamis
• useSearchParams(): string kueri
• useLocation(): objek lokasi penuh

Langkah selanjutnya

• Tampilan: membandingkan format yang dapat digunakan suatu halaman
• Frontend: Vite dan build klien

Salin halaman sebagai Markdown Sunting di GitHub