nara-frontend

Frontend Patterns (Vue 3 + Vite + Router)

How to build browser UI on the fixed Vue 3 + Vite + TypeScript stack with vue-router. Feature-specific browser code belongs to the owning Feature:

src/features/<feature>/web/
├── pages/*.vue
├── components/*.vue
├── composables/*.ts
└── client.ts

Application-wide Vue composition belongs under src/app/. Keep resources/app.ts as a thin Vite entrypoint that mounts the app-layer root component. A Feature may omit web/ when it has no browser surface.

Application bootstrap

// resources/app.ts
import { createApp } from 'vue';
import App from '../src/app/App.vue';
import router from '../src/app/router';

createApp(App).use(router).mount('#app');

Use Vue Composition API in single-file components:

<script setup lang="ts">
import { computed, ref } from 'vue';

const open = ref(false);
const label = computed(() => (open.value ? 'Close' : 'Open'));
</script>

Use ref, computed, watch, onMounted, and onBeforeUnmount for state and lifecycle behavior.

API clients and responses

Prefer the feature-scoped typed client in the owning Feature's web/client.ts:

const response = await authClient.login({ email, password });
if (!response.success) {
  errorMessage.value = response.message;
}

Keep request and response types in the Feature contract. Handle loading, validation, and error state in the page or a Feature-owned composable: disable the submit control while pending, render field errors from the contract's error shape, and clear stale errors on input.

Every state-changing /api/* request must satisfy the application's double-submit CSRF middleware. Provider-owned Auth clients may use Auth's CSRF helpers directly. A reusable Feature must stay provider-neutral: declare the CSRF capability on its web host and inject it into the typed client, following UsersWebHost.csrf + createUsersClient({ csrf }). Do not import Auth web internals merely to obtain a CSRF token.