DocsChoose

Vue

Vue 3 single-file-component routes: server-rendered first, then hydrated by Vite in the browser.

Enable Vue

nexyconfig.py

from nexy.core.models import NexyConfigModel
from nexy.frontend import vue


class NexyConfig(NexyConfigModel):
    useFF = vue()
    useAliases = {"@": "src"}

Extension: .vue
Runtime: Vue 3.5
Build: @vitejs/plugin-vue

Create a route

src/routes/index.vue

<script setup lang="ts">
import Counter from "@/components/Counter.vue";
</script>

<template>
  <main>
    <h1>Hello</h1>
    <Counter />
  </main>
</template>

Single-file component with <script setup>. Nexy renders it on the server and mounts it in the browser.

Rendering

Server rendering is on by default. Set useCSR = True for client-side rendering.

Layouts

In client mode the root layout.vue owns the HTML document and every layout.vue renders its page in the default <slot />. See layout.vue.

Next steps

Views: compare formats
Frontend: Vite and the client build
.nexy files: mixing server logic and Vue islands

Edit on GitHub