Документация/Различия в фреймворках

Vue

Nexy отображает Vue 3 однофайловых компонента на сервере, затем Vue обрабатывает их в браузере. Страницы, макеты, острова и действия одинаковы в каждой платформе: на этой странице рассказывается о настройке, а затем о частях, которые отличаются от общих контрактов.

Начать проект

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

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

Шаблон представляет собой серверный проект с Vue островами. Вместо этого запустите nx new my-app без шаблона, чтобы ответить на запросы: маршрутизатор, тип проекта, использовать ли маршрутизацию на стороне клиента, а затем структуру.

Включить Vue в существующем проекте

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 записывает этот файл; Nexy пишет __nexy__/vite.ts сам, поэтому не редактируйте его.

Правила

• Один фреймворк на проект. useFF требуется ровно один фреймворк; useFF = [vue(), react()] останавливает сервер при запуске.
• Один компонент на файл. Файл .vue экспортирует свой компонент по умолчанию; имя, под которым вы его импортируете, — это только тег, который вы пишете.

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

Острова

В режиме сервера компонент Vue, импортированный в файл .nexy, является островом.

Импорт

Импортируйте компоненты в начале файла .nexy:

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

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

Директивы по гидратации

Используйте реквизит directive для управления моментом гидратации острова:

• client:load (по умолчанию): немедленно
• client:idle: когда браузер бездействует
• client:visible: когда он прокручивается в поле зрения
• client:media: когда медиа-запрос соответствует

Действия и навигация

Вызов действий

Используйте перехватчик useAction для управления состоянием вызова действия. В Vue возвращаемое состояние (pending, data, error) — это вычисляемые ссылки.

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

Навигация

Используйте компонент Link для переходов на стороне клиента:

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

Для программной навигации используйте хук useRouter:

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

URL-доступ

Все хуки местоположения возвращают вычисленные ссылки:

• usePathname(): текущий путь
• useParams(): динамические сегменты
• useSearchParams(): строка запроса
• useLocation(): объект с полным местоположением

Следующие шаги

• Просмотры: сравните форматы, которые может использовать страница.
• Фронтенд: Vite и клиентская сборка

Скопировать страницу как Markdown Изменить на GitHub