Docs/Framework differences

Vue

Nexy renders Vue 3 single-file components on the server, then Vue takes them over in the browser. Pages, layouts, islands and actions are the same in every framework: this page covers setup, then the parts that differ from the shared contracts.

Start a project

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

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

The template is a server-mode project with Vue islands. Run nx new my-app without a template to answer the prompts instead: the router, the project type, whether to use client-side routing, then the framework.

Enable Vue in an existing project

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 writes this file; Nexy writes __nexy__/vite.ts itself, so do not edit it.

Rules

• One framework per project. useFF takes exactly one framework; useFF = [vue(), react()] stops the server at startup.
• One component per file. A .vue file exports its component as default; the name you import it under is only the tag you write.

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

Islands

In server mode, a Vue component imported into a .nexy file is an island.

Importing

Import components in the frontmatter of the .nexy file:

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

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

Hydration directives

Use the directive prop to control when the island hydrates:

• client:load (default): immediately
• client:idle: when the browser is idle
• client:visible: when it scrolls into view
• client:media: when the media query matches

Actions and navigation

Calling actions

Use the useAction hook to manage the state of an action call. In Vue, the returned state (pending, data, error) are computed refs.

<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

Use the Link component for client-side transitions:

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

For programmatic navigation, use the useRouter hook:

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

URL access

All location hooks return computed refs:

• usePathname(): current path
• useParams(): dynamic segments
• useSearchParams(): query string
• useLocation(): full location object

Next steps

• Views: compare the formats a page can use
• Frontend: Vite and the client build

Copy page as Markdown Edit on GitHub