Initial commit
This commit is contained in:
AI
@@ -0,0 +1,11 @@
|
||||
.git
|
||||
.gitignore
|
||||
.nuxt
|
||||
.output
|
||||
.vscode
|
||||
coverage
|
||||
node_modules
|
||||
*.log
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
@@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
@@ -0,0 +1,6 @@
|
||||
NUXT_PUBLIC_API_BASE_URL=/api
|
||||
NUXT_PUBLIC_API_TIMEOUT_MS=10000
|
||||
NUXT_PUBLIC_AUTH_MODE=disabled
|
||||
NUXT_PUBLIC_AUTH_LOGIN_URL=/login
|
||||
NUXT_PUBLIC_AUTH_LOGOUT_URL=/logout
|
||||
NUXT_PUBLIC_AUTH_USERINFO_URL=/api/auth/me
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
.nuxt
|
||||
.output
|
||||
.data
|
||||
.cache
|
||||
.pnpm-store
|
||||
coverage
|
||||
node_modules
|
||||
dist
|
||||
.openapi-generator
|
||||
openapi-client/**
|
||||
!openapi-client/
|
||||
!openapi-client/README.md
|
||||
.DS_Store
|
||||
*.log
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
@@ -0,0 +1,5 @@
|
||||
.nuxt
|
||||
.output
|
||||
coverage
|
||||
node_modules
|
||||
pnpm-lock.yaml
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"Vue.vscode-typescript-vue-plugin",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"EditorConfig.EditorConfig",
|
||||
"Nuxt.mdc",
|
||||
"lokalise.i18n-ally",
|
||||
"vitest.explorer"
|
||||
]
|
||||
}
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Nuxt: dev",
|
||||
"type": "node-terminal",
|
||||
"request": "launch",
|
||||
"command": "pnpm dev"
|
||||
}
|
||||
]
|
||||
}
|
||||
Vendored
+72
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit"
|
||||
},
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.nuxt": true,
|
||||
"**/.output": true,
|
||||
"**/.data": true,
|
||||
"**/.cache": true,
|
||||
"**/.pnpm-store": true,
|
||||
"**/coverage": true,
|
||||
"**/dist": true,
|
||||
"**/node_modules": true
|
||||
},
|
||||
"search.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.nuxt": true,
|
||||
"**/.output": true,
|
||||
"**/.data": true,
|
||||
"**/.cache": true,
|
||||
"**/.pnpm-store": true,
|
||||
"**/coverage": true,
|
||||
"**/dist": true,
|
||||
"**/node_modules": true
|
||||
},
|
||||
"files.watcherExclude": {
|
||||
"**/.git/**": true,
|
||||
"**/.nuxt/**": true,
|
||||
"**/.output/**": true,
|
||||
"**/.data/**": true,
|
||||
"**/.cache/**": true,
|
||||
"**/.pnpm-store/**": true,
|
||||
"**/coverage/**": true,
|
||||
"**/dist/**": true,
|
||||
"**/node_modules/**": true
|
||||
},
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"typescript",
|
||||
"vue"
|
||||
],
|
||||
"js/ts.tsdk.path": "node_modules/typescript/lib",
|
||||
"vue.server.hybridMode": false,
|
||||
"json.schemaDownload.trustedDomains": {
|
||||
"https://raw.githubusercontent.com/DavidAnson/markdownlint/": true
|
||||
},
|
||||
"i18n-ally.enabledFrameworks": [
|
||||
"vue"
|
||||
],
|
||||
"i18n-ally.localesPaths": [
|
||||
"i18n/locales"
|
||||
],
|
||||
"i18n-ally.pathMatcher": "{locale}.json",
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.namespace": false,
|
||||
"i18n-ally.sourceLanguage": "sk",
|
||||
"i18n-ally.displayLanguage": "sk",
|
||||
"todo-tree.filtering.excludeGlobs": [
|
||||
"**/.git/**",
|
||||
"**/.nuxt/**",
|
||||
"**/.output/**",
|
||||
"**/.data/**",
|
||||
"**/.cache/**",
|
||||
"**/.pnpm-store/**",
|
||||
"**/coverage/**",
|
||||
"**/dist/**",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"files.eol": "\n"
|
||||
}
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
FROM node:24-bookworm-slim AS build
|
||||
|
||||
ENV PNPM_HOME="/pnpm"
|
||||
ENV PATH="$PNPM_HOME:$PATH"
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
RUN corepack enable
|
||||
|
||||
COPY package.json pnpm-lock.yaml ./
|
||||
RUN pnpm install --frozen-lockfile
|
||||
|
||||
COPY . .
|
||||
RUN pnpm build
|
||||
|
||||
FROM gcr.io/distroless/nodejs24-debian12:nonroot AS runtime
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV NITRO_HOST=0.0.0.0
|
||||
ENV NITRO_PORT=3000
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY --from=build --chown=65532:65532 /app/.output ./.output
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD [".output/server/index.mjs"]
|
||||
@@ -0,0 +1,30 @@
|
||||
import type {
|
||||
ApiRequestOptions,
|
||||
ExampleApi,
|
||||
ExampleHealthResponse,
|
||||
ExampleWelcomeResponse
|
||||
} from '~/types/api'
|
||||
|
||||
interface CreateExampleApiOptions {
|
||||
baseURL: string
|
||||
timeoutMs: number
|
||||
}
|
||||
|
||||
export function createExampleApi(options: CreateExampleApiOptions): ExampleApi {
|
||||
const request = async <T>(path: string, requestOptions?: ApiRequestOptions) => {
|
||||
return await $fetch<T>(path, {
|
||||
baseURL: options.baseURL,
|
||||
signal: requestOptions?.signal,
|
||||
timeout: options.timeoutMs
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
getHealth(options?: ApiRequestOptions): Promise<ExampleHealthResponse> {
|
||||
return request<ExampleHealthResponse>('/health', options)
|
||||
},
|
||||
getWelcome(options?: ApiRequestOptions): Promise<ExampleWelcomeResponse> {
|
||||
return request<ExampleWelcomeResponse>('/welcome', options)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</UApp>
|
||||
</template>
|
||||
@@ -0,0 +1,112 @@
|
||||
html {
|
||||
font-family: var(--font-family-base);
|
||||
background: var(--ui-bg);
|
||||
color: var(--ui-text);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
var(--page-accent),
|
||||
linear-gradient(180deg, var(--ui-bg), var(--ui-bg-muted));
|
||||
color: var(--ui-text);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(calc(100% - 2rem), var(--page-max-width));
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 0 3rem;
|
||||
}
|
||||
|
||||
.shell__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.shell__brand,
|
||||
.stack {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.shell__badge,
|
||||
.shell__eyebrow,
|
||||
.section-kicker {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.shell__eyebrow,
|
||||
.section-kicker {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.75rem;
|
||||
color: var(--ui-text-muted);
|
||||
}
|
||||
|
||||
.shell__title {
|
||||
font-size: clamp(2rem, 4vw, 3.2rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.shell__subtitle {
|
||||
max-width: 54rem;
|
||||
color: var(--ui-text-muted);
|
||||
}
|
||||
|
||||
.shell__actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.shell__select {
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
.page-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.hero-actions,
|
||||
.component-showcase {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.shell__header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.shell__actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.page-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
:root,
|
||||
.light {
|
||||
--page-accent: radial-gradient(
|
||||
circle at top right,
|
||||
color-mix(in srgb, var(--ui-primary) 18%, transparent),
|
||||
transparent 34%
|
||||
);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--page-accent: radial-gradient(
|
||||
circle at top right,
|
||||
color-mix(in srgb, var(--ui-primary) 22%, transparent),
|
||||
transparent 32%
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--font-family-base: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
--page-max-width: 1200px;
|
||||
--ui-radius: 0.75rem;
|
||||
--shadow-soft: 0 20px 45px rgba(15, 23, 42, 0.12);
|
||||
--transition-base: 180ms ease;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@use './tokens';
|
||||
@use './theme';
|
||||
@use './base';
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
@@ -0,0 +1,5 @@
|
||||
import type { ApiClients } from '~/types/api'
|
||||
|
||||
export function useApi(): ApiClients {
|
||||
return useNuxtApp().$api
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import type { AuthClient } from '~/types/auth'
|
||||
|
||||
export function useAuth(): AuthClient {
|
||||
return useNuxtApp().$auth
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
type LogLevel = 'debug' | 'info' | 'warn' | 'error'
|
||||
|
||||
type LoggerPayload = Record<string, unknown> | undefined
|
||||
|
||||
type LoggerApi = {
|
||||
debug: (message: string, payload?: LoggerPayload) => void
|
||||
info: (message: string, payload?: LoggerPayload) => void
|
||||
warn: (message: string, payload?: LoggerPayload) => void
|
||||
error: (message: string, payload?: LoggerPayload) => void
|
||||
}
|
||||
|
||||
export function useLogger(): LoggerApi {
|
||||
return useNuxtApp().$logger
|
||||
}
|
||||
|
||||
export type { LoggerApi, LoggerPayload, LogLevel }
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="shell">
|
||||
<header class="shell__header">
|
||||
<div class="shell__brand">
|
||||
<UBadge color="neutral" variant="subtle" class="shell__badge">
|
||||
{{ t('app.badge') }}
|
||||
</UBadge>
|
||||
<h1 class="shell__title">{{ t('app.title') }}</h1>
|
||||
<p class="shell__subtitle">{{ t('app.subtitle') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="shell__actions">
|
||||
<USelect
|
||||
v-model="currentLocale"
|
||||
:items="localeOptions"
|
||||
size="sm"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
class="shell__select"
|
||||
/>
|
||||
<ClientOnly>
|
||||
<USelect
|
||||
v-model="themePreference"
|
||||
:items="themeOptions"
|
||||
size="sm"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
class="shell__select"
|
||||
/>
|
||||
<template #fallback>
|
||||
<USelect
|
||||
:model-value="defaultThemePreference"
|
||||
:items="themeOptions"
|
||||
size="sm"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
class="shell__select"
|
||||
disabled
|
||||
/>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="shell__main">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type LocaleCode = 'sk' | 'en'
|
||||
type ThemePreference = 'light' | 'dark' | 'system'
|
||||
|
||||
const { locale, setLocale, t } = useI18n()
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const localeOptions = computed(() => [
|
||||
{ label: 'SK', value: 'sk' },
|
||||
{ label: 'EN', value: 'en' }
|
||||
])
|
||||
|
||||
const themeOptions = computed(() => [
|
||||
{ label: `${t('theme.toggle')}: ${t('theme.preference.light')}`, value: 'light' },
|
||||
{ label: `${t('theme.toggle')}: ${t('theme.preference.dark')}`, value: 'dark' },
|
||||
{ label: `${t('theme.toggle')}: ${t('theme.preference.system')}`, value: 'system' }
|
||||
])
|
||||
|
||||
const defaultThemePreference: ThemePreference = 'system'
|
||||
|
||||
const currentLocale = computed({
|
||||
get: () => locale.value as LocaleCode,
|
||||
set: (value: LocaleCode) => {
|
||||
if (value && value !== locale.value) {
|
||||
setLocale(value)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const themePreference = computed({
|
||||
get: () => colorMode.preference as ThemePreference,
|
||||
set: (value: ThemePreference) => {
|
||||
colorMode.preference = value
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
export default defineNuxtRouteMiddleware(async (to) => {
|
||||
const auth = useAuth()
|
||||
|
||||
if (!auth.isEnabled || to.meta.public) {
|
||||
return
|
||||
}
|
||||
|
||||
const requiresAuth = Boolean(to.meta.requiresAuth || (to.meta.roles && to.meta.roles.length > 0))
|
||||
|
||||
if (!requiresAuth) {
|
||||
return
|
||||
}
|
||||
|
||||
await auth.ensureInitialized()
|
||||
|
||||
if (!auth.isAuthenticated.value) {
|
||||
await auth.login()
|
||||
return
|
||||
}
|
||||
|
||||
if (to.meta.roles?.length) {
|
||||
const authStore = useAuthStore()
|
||||
|
||||
if (!authStore.hasAnyRole(to.meta.roles)) {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: 'Forbidden'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="page-grid">
|
||||
<UCard variant="soft">
|
||||
<template #header>
|
||||
<div class="stack">
|
||||
<p class="section-kicker">{{ t('home.hero.kicker') }}</p>
|
||||
<h2>{{ t('home.hero.title') }}</h2>
|
||||
<p>{{ t('home.hero.description') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="hero-actions">
|
||||
<UButton @click="cycleTheme">
|
||||
{{ t('home.hero.actions.theme') }}
|
||||
</UButton>
|
||||
<UButton color="neutral" variant="soft" @click="toggleLocale">
|
||||
{{ t('home.hero.actions.locale') }}
|
||||
</UButton>
|
||||
<UButton color="neutral" variant="outline" @click="writeLog">
|
||||
{{ t('home.hero.actions.log') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard variant="soft">
|
||||
<template #header>
|
||||
<div class="stack">
|
||||
<p class="section-kicker">{{ t('home.form.kicker') }}</p>
|
||||
<h2>{{ t('home.form.title') }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<form class="stack" @submit.prevent="submitDemo">
|
||||
<UFormField :label="t('home.form.fields.name')">
|
||||
<UInput
|
||||
v-model="form.name"
|
||||
name="name"
|
||||
autocomplete="name"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField :label="t('home.form.fields.role')">
|
||||
<USelect
|
||||
v-model="form.role"
|
||||
:items="roleOptions"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UButton type="submit">{{ t('home.form.submit') }}</UButton>
|
||||
</form>
|
||||
</UCard>
|
||||
|
||||
<UCard variant="soft">
|
||||
<template #header>
|
||||
<div class="stack">
|
||||
<p class="section-kicker">{{ t('home.status.kicker') }}</p>
|
||||
<h2>{{ t('home.status.title') }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="stack">
|
||||
<UAlert
|
||||
color="info"
|
||||
variant="soft"
|
||||
:title="t('home.status.theme')"
|
||||
:description="resolvedThemeLabel"
|
||||
/>
|
||||
<UAlert
|
||||
color="success"
|
||||
variant="soft"
|
||||
:title="t('home.status.locale')"
|
||||
:description="locale.toUpperCase()"
|
||||
/>
|
||||
<UAlert
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
:title="t('home.status.logger')"
|
||||
:description="t('home.status.loggerReady')"
|
||||
/>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard variant="soft">
|
||||
<template #header>
|
||||
<div class="stack">
|
||||
<p class="section-kicker">{{ t('home.components.kicker') }}</p>
|
||||
<h2>{{ t('home.components.title') }}</h2>
|
||||
<p>{{ t('home.components.description') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="component-showcase">
|
||||
<UButton size="sm">{{ t('home.components.buttons.small') }}</UButton>
|
||||
<UButton>{{ t('home.components.buttons.medium') }}</UButton>
|
||||
<UButton color="neutral" variant="soft">{{ t('home.components.buttons.secondary') }}</UButton>
|
||||
<UButton color="neutral" variant="outline">{{ t('home.components.buttons.ghost') }}</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { locale, setLocale, t } = useI18n()
|
||||
const logger = useLogger()
|
||||
const colorMode = useColorMode()
|
||||
const hydrated = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
role: 'developer'
|
||||
})
|
||||
|
||||
const roleOptions = computed(() => [
|
||||
{ label: t('roles.developer'), value: 'developer' },
|
||||
{ label: t('roles.designer'), value: 'designer' },
|
||||
{ label: t('roles.maintainer'), value: 'maintainer' }
|
||||
])
|
||||
|
||||
const resolvedThemeLabel = computed(() => {
|
||||
const safePreference = hydrated.value ? colorMode.preference : 'system'
|
||||
const preferenceText = t(`theme.preference.${safePreference}`)
|
||||
const resolvedMode = safePreference === 'system' ? 'system' : colorMode.value
|
||||
const resolvedText = t(`theme.resolved.${resolvedMode}`)
|
||||
|
||||
return `${preferenceText} / ${resolvedText}`
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
hydrated.value = true
|
||||
})
|
||||
|
||||
function toggleLocale() {
|
||||
const nextLocale = locale.value === 'sk' ? 'en' : 'sk'
|
||||
|
||||
setLocale(nextLocale)
|
||||
logger.info('Locale changed', { locale: nextLocale })
|
||||
}
|
||||
|
||||
function cycleTheme() {
|
||||
const nextTheme =
|
||||
colorMode.preference === 'light'
|
||||
? 'dark'
|
||||
: colorMode.preference === 'dark'
|
||||
? 'system'
|
||||
: 'light'
|
||||
|
||||
colorMode.preference = nextTheme
|
||||
|
||||
logger.info('Theme changed', { theme: nextTheme })
|
||||
}
|
||||
|
||||
function writeLog() {
|
||||
logger.debug('Template action executed', {
|
||||
locale: locale.value,
|
||||
theme: colorMode.value
|
||||
})
|
||||
}
|
||||
|
||||
function submitDemo() {
|
||||
logger.info('Demo form submitted', { ...form })
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
import { createExampleApi } from '~~/api/wrappers/example'
|
||||
import type { ApiClients } from '~/types/api'
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
|
||||
const api: ApiClients = {
|
||||
example: createExampleApi({
|
||||
baseURL: runtimeConfig.public.apiBaseUrl,
|
||||
timeoutMs: runtimeConfig.public.apiTimeoutMs
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
provide: {
|
||||
api
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,123 @@
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useAuthStore, type AuthUser } from '~/stores/auth'
|
||||
import type { AuthClient, AuthMode } from '~/types/auth'
|
||||
|
||||
function normalizeAuthMode(value: string | undefined): AuthMode {
|
||||
if (value === 'mock' || value === 'userinfo') {
|
||||
return value
|
||||
}
|
||||
|
||||
return 'disabled'
|
||||
}
|
||||
|
||||
function createMockUser(): AuthUser {
|
||||
return {
|
||||
id: 'mock-user',
|
||||
email: 'mock@example.com',
|
||||
firstName: 'Mock',
|
||||
lastName: 'User',
|
||||
roles: ['USER']
|
||||
}
|
||||
}
|
||||
|
||||
function canUseWindow() {
|
||||
return typeof window !== 'undefined'
|
||||
}
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const authStore = useAuthStore()
|
||||
const { isAuthenticated, isInitialized, user } = storeToRefs(authStore)
|
||||
|
||||
const mode = normalizeAuthMode(runtimeConfig.public.authMode)
|
||||
const ready = ref(false)
|
||||
|
||||
const initialize = async () => {
|
||||
if (ready.value) {
|
||||
return
|
||||
}
|
||||
|
||||
if (mode === 'disabled') {
|
||||
authStore.initialize(null)
|
||||
ready.value = true
|
||||
return
|
||||
}
|
||||
|
||||
if (mode === 'mock') {
|
||||
authStore.initialize(createMockUser())
|
||||
ready.value = true
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const authUser = await $fetch<AuthUser | null>(runtimeConfig.public.authUserinfoUrl, {
|
||||
credentials: 'include'
|
||||
})
|
||||
|
||||
authStore.initialize(authUser)
|
||||
} catch {
|
||||
authStore.initialize(null)
|
||||
}
|
||||
|
||||
ready.value = true
|
||||
}
|
||||
|
||||
watch(
|
||||
isInitialized,
|
||||
(value) => {
|
||||
if (value) {
|
||||
ready.value = true
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const login = () => {
|
||||
if (mode === 'disabled') {
|
||||
return
|
||||
}
|
||||
|
||||
if (mode === 'mock') {
|
||||
authStore.setUser(createMockUser())
|
||||
return
|
||||
}
|
||||
|
||||
if (canUseWindow()) {
|
||||
window.location.href = runtimeConfig.public.authLoginUrl
|
||||
}
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
authStore.clearSession()
|
||||
|
||||
if (mode === 'disabled') {
|
||||
return
|
||||
}
|
||||
|
||||
if (mode === 'mock') {
|
||||
return
|
||||
}
|
||||
|
||||
if (canUseWindow()) {
|
||||
window.location.href = runtimeConfig.public.authLogoutUrl
|
||||
}
|
||||
}
|
||||
|
||||
const auth: AuthClient = {
|
||||
mode,
|
||||
isEnabled: mode !== 'disabled',
|
||||
isReady: ready,
|
||||
isAuthenticated: computed(() => isAuthenticated.value),
|
||||
user,
|
||||
ensureInitialized: initialize,
|
||||
login,
|
||||
logout
|
||||
}
|
||||
|
||||
return {
|
||||
provide: {
|
||||
auth
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,28 @@
|
||||
import type { LoggerApi, LoggerPayload, LogLevel } from '~/composables/useLogger'
|
||||
|
||||
function write(level: LogLevel, message: string, payload?: LoggerPayload) {
|
||||
const timestamp = new Date().toISOString()
|
||||
const prefix = `[template:${level}] ${timestamp} ${message}`
|
||||
|
||||
if (payload) {
|
||||
console[level](prefix, payload)
|
||||
return
|
||||
}
|
||||
|
||||
console[level](prefix)
|
||||
}
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const logger: LoggerApi = {
|
||||
debug: (message, payload) => write('debug', message, payload),
|
||||
info: (message, payload) => write('info', message, payload),
|
||||
warn: (message, payload) => write('warn', message, payload),
|
||||
error: (message, payload) => write('error', message, payload)
|
||||
}
|
||||
|
||||
return {
|
||||
provide: {
|
||||
logger
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,63 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export interface AuthUser {
|
||||
id: string
|
||||
email?: string | null
|
||||
firstName?: string | null
|
||||
lastName?: string | null
|
||||
roles: string[]
|
||||
}
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const isInitialized = ref(false)
|
||||
const user = ref<AuthUser | null>(null)
|
||||
|
||||
const roles = computed(() => user.value?.roles ?? [])
|
||||
const isAuthenticated = computed(() => !!user.value)
|
||||
const displayName = computed(() => {
|
||||
if (!user.value) {
|
||||
return ''
|
||||
}
|
||||
|
||||
const fullName = [user.value.firstName, user.value.lastName].filter(Boolean).join(' ').trim()
|
||||
|
||||
return fullName || user.value.email || user.value.id
|
||||
})
|
||||
|
||||
function initialize(nextUser: AuthUser | null = null) {
|
||||
user.value = nextUser
|
||||
isInitialized.value = true
|
||||
}
|
||||
|
||||
function setUser(nextUser: AuthUser) {
|
||||
user.value = nextUser
|
||||
isInitialized.value = true
|
||||
}
|
||||
|
||||
function clearSession() {
|
||||
user.value = null
|
||||
isInitialized.value = true
|
||||
}
|
||||
|
||||
function hasRole(role: string) {
|
||||
return roles.value.includes(role)
|
||||
}
|
||||
|
||||
function hasAnyRole(requiredRoles: string[]) {
|
||||
return requiredRoles.some((role) => roles.value.includes(role))
|
||||
}
|
||||
|
||||
return {
|
||||
displayName,
|
||||
hasAnyRole,
|
||||
hasRole,
|
||||
initialize,
|
||||
isAuthenticated,
|
||||
isInitialized,
|
||||
roles,
|
||||
setUser,
|
||||
clearSession,
|
||||
user
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,61 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export type UiNotificationTone = 'info' | 'success' | 'warning' | 'error'
|
||||
|
||||
export interface UiNotification {
|
||||
id: string
|
||||
title: string
|
||||
message?: string
|
||||
tone?: UiNotificationTone
|
||||
}
|
||||
|
||||
export const useUiStore = defineStore('ui', () => {
|
||||
const activeRequests = ref(0)
|
||||
const notifications = ref<UiNotification[]>([])
|
||||
|
||||
const isPageLoading = computed(() => activeRequests.value > 0)
|
||||
|
||||
function setLoading(value: boolean) {
|
||||
activeRequests.value = value ? 1 : 0
|
||||
}
|
||||
|
||||
function startLoading() {
|
||||
activeRequests.value += 1
|
||||
}
|
||||
|
||||
function stopLoading() {
|
||||
activeRequests.value = Math.max(0, activeRequests.value - 1)
|
||||
}
|
||||
|
||||
function pushNotification(notification: Omit<UiNotification, 'id'> & { id?: string }) {
|
||||
const nextNotification = {
|
||||
...notification,
|
||||
id: notification.id ?? crypto.randomUUID(),
|
||||
tone: notification.tone ?? 'info'
|
||||
} satisfies UiNotification
|
||||
|
||||
notifications.value = [...notifications.value, nextNotification]
|
||||
|
||||
return nextNotification.id
|
||||
}
|
||||
|
||||
function removeNotification(id: string) {
|
||||
notifications.value = notifications.value.filter((notification) => notification.id !== id)
|
||||
}
|
||||
|
||||
function clearNotifications() {
|
||||
notifications.value = []
|
||||
}
|
||||
|
||||
return {
|
||||
clearNotifications,
|
||||
isPageLoading,
|
||||
notifications,
|
||||
pushNotification,
|
||||
removeNotification,
|
||||
setLoading,
|
||||
startLoading,
|
||||
stopLoading
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,20 @@
|
||||
export interface ApiRequestOptions {
|
||||
signal?: AbortSignal
|
||||
}
|
||||
|
||||
export interface ExampleHealthResponse {
|
||||
status: 'ok'
|
||||
}
|
||||
|
||||
export interface ExampleWelcomeResponse {
|
||||
message: string
|
||||
}
|
||||
|
||||
export interface ExampleApi {
|
||||
getHealth: (options?: ApiRequestOptions) => Promise<ExampleHealthResponse>
|
||||
getWelcome: (options?: ApiRequestOptions) => Promise<ExampleWelcomeResponse>
|
||||
}
|
||||
|
||||
export interface ApiClients {
|
||||
example: ExampleApi
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import type { ComputedRef, Ref } from 'vue'
|
||||
import type { AuthUser } from '~/stores/auth'
|
||||
|
||||
export type AuthMode = 'disabled' | 'mock' | 'userinfo'
|
||||
|
||||
export interface AuthClient {
|
||||
mode: AuthMode
|
||||
isEnabled: boolean
|
||||
isReady: Ref<boolean>
|
||||
isAuthenticated: ComputedRef<boolean>
|
||||
user: Ref<AuthUser | null>
|
||||
ensureInitialized: () => Promise<void>
|
||||
login: () => void | Promise<void>
|
||||
logout: () => void | Promise<void>
|
||||
}
|
||||
Vendored
+21
@@ -0,0 +1,21 @@
|
||||
import type { LoggerApi } from '~/composables/useLogger'
|
||||
import type { AuthClient } from '~/types/auth'
|
||||
import type { ApiClients } from '~/types/api'
|
||||
|
||||
declare module '#app' {
|
||||
interface NuxtApp {
|
||||
$api: ApiClients
|
||||
$auth: AuthClient
|
||||
$logger: LoggerApi
|
||||
}
|
||||
}
|
||||
|
||||
declare module 'vue' {
|
||||
interface ComponentCustomProperties {
|
||||
$api: ApiClients
|
||||
$auth: AuthClient
|
||||
$logger: LoggerApi
|
||||
}
|
||||
}
|
||||
|
||||
export {}
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
import 'vue-router'
|
||||
|
||||
declare module 'vue-router' {
|
||||
interface RouteMeta {
|
||||
public?: boolean
|
||||
requiresAuth?: boolean
|
||||
roles?: string[]
|
||||
}
|
||||
}
|
||||
|
||||
export {}
|
||||
@@ -0,0 +1,20 @@
|
||||
// @ts-check
|
||||
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||
|
||||
export default withNuxt([
|
||||
{
|
||||
rules: {
|
||||
'padding-line-between-statements': [
|
||||
'error',
|
||||
{ blankLine: 'always', prev: 'import', next: '*' },
|
||||
{ blankLine: 'any', prev: 'import', next: 'import' }
|
||||
],
|
||||
'vue/block-order': [
|
||||
'error',
|
||||
{
|
||||
order: ['template', 'script', 'style']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
])
|
||||
@@ -0,0 +1,68 @@
|
||||
{
|
||||
"app": {
|
||||
"badge": "Nuxt first template",
|
||||
"title": "Starter for VS Code development",
|
||||
"subtitle": "Template for local host development with i18n, logging, optional auth, and Nuxt UI components."
|
||||
},
|
||||
"locale": {
|
||||
"switch": "Locale"
|
||||
},
|
||||
"theme": {
|
||||
"toggle": "Theme",
|
||||
"preference": {
|
||||
"light": "Light",
|
||||
"dark": "Dark",
|
||||
"system": "System"
|
||||
},
|
||||
"resolved": {
|
||||
"light": "light",
|
||||
"dark": "dark",
|
||||
"system": "system"
|
||||
}
|
||||
},
|
||||
"roles": {
|
||||
"developer": "Developer",
|
||||
"designer": "Designer",
|
||||
"maintainer": "Maintainer"
|
||||
},
|
||||
"home": {
|
||||
"hero": {
|
||||
"kicker": "Hello world",
|
||||
"title": "The project is ready for extension",
|
||||
"description": "Use this baseline for dashboards, portals, and admin consoles.",
|
||||
"actions": {
|
||||
"theme": "Cycle theme",
|
||||
"locale": "Switch locale",
|
||||
"log": "Write log"
|
||||
}
|
||||
},
|
||||
"form": {
|
||||
"kicker": "Demo form",
|
||||
"title": "Nuxt UI components are ready",
|
||||
"fields": {
|
||||
"name": "Name",
|
||||
"role": "Role"
|
||||
},
|
||||
"submit": "Submit"
|
||||
},
|
||||
"status": {
|
||||
"kicker": "Environment status",
|
||||
"title": "Runtime overview",
|
||||
"theme": "Active theme",
|
||||
"locale": "Active locale",
|
||||
"logger": "Logger",
|
||||
"loggerReady": "The logger plugin is ready for client-side runtime usage."
|
||||
},
|
||||
"components": {
|
||||
"kicker": "Nuxt UI",
|
||||
"title": "Standard UI layer for further development",
|
||||
"description": "The template uses Nuxt UI as the default foundation for forms, buttons, cards, and alerts.",
|
||||
"buttons": {
|
||||
"small": "Small",
|
||||
"medium": "Medium",
|
||||
"secondary": "Secondary",
|
||||
"ghost": "Ghost"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
{
|
||||
"app": {
|
||||
"badge": "Nuxt first template",
|
||||
"title": "Zaklad pre vyvoj vo VS Code",
|
||||
"subtitle": "Template pre lokalny vyvoj na hoste s i18n, loggerom, volitelnou autorizaciou a Nuxt UI komponentmi."
|
||||
},
|
||||
"locale": {
|
||||
"switch": "Jazyk"
|
||||
},
|
||||
"theme": {
|
||||
"toggle": "Tema",
|
||||
"preference": {
|
||||
"light": "Light",
|
||||
"dark": "Dark",
|
||||
"system": "System"
|
||||
},
|
||||
"resolved": {
|
||||
"light": "svetla",
|
||||
"dark": "tmava",
|
||||
"system": "podla systemu"
|
||||
}
|
||||
},
|
||||
"roles": {
|
||||
"developer": "Vyvojar",
|
||||
"designer": "Dizajner",
|
||||
"maintainer": "Spravca"
|
||||
},
|
||||
"home": {
|
||||
"hero": {
|
||||
"kicker": "Hello world",
|
||||
"title": "Projekt je pripraveny na dalsie rozsiranie",
|
||||
"description": "Pouzi tento zaklad pre dashboardy, portalove aplikacie aj administracne konzoly.",
|
||||
"actions": {
|
||||
"theme": "Zmenit temu",
|
||||
"locale": "Prepnut jazyk",
|
||||
"log": "Zapisat log"
|
||||
}
|
||||
},
|
||||
"form": {
|
||||
"kicker": "Ukazkovy formular",
|
||||
"title": "Nuxt UI komponenty su pripravene",
|
||||
"fields": {
|
||||
"name": "Meno",
|
||||
"role": "Rola"
|
||||
},
|
||||
"submit": "Odoslat"
|
||||
},
|
||||
"status": {
|
||||
"kicker": "Stav prostredia",
|
||||
"title": "Runtime prehlad",
|
||||
"theme": "Aktivna tema",
|
||||
"locale": "Aktivny jazyk",
|
||||
"logger": "Logger",
|
||||
"loggerReady": "Logger plugin je pripraveny pre klientsky runtime."
|
||||
},
|
||||
"components": {
|
||||
"kicker": "Nuxt UI",
|
||||
"title": "Standardna UI vrstva pre dalsi vyvoj",
|
||||
"description": "Template pouziva Nuxt UI ako predvoleny zaklad pre formulare, tlacidla, karty a alerty.",
|
||||
"buttons": {
|
||||
"small": "Male",
|
||||
"medium": "Stredne",
|
||||
"secondary": "Secondary",
|
||||
"ghost": "Ghost"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import process from 'node:process'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-10-23',
|
||||
devtools: { enabled: process.env.NUXT_DEVTOOLS === 'true' },
|
||||
|
||||
modules: ['@nuxt/eslint', '@pinia/nuxt', '@nuxt/ui', '@nuxtjs/i18n'],
|
||||
|
||||
appConfig: {
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
neutral: 'slate'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
css: ['~/assets/styles/ui.css', '~/assets/styles/main.scss'],
|
||||
|
||||
app: {
|
||||
head: {
|
||||
title: 'Nuxt Workspace Template',
|
||||
titleTemplate: '%s | Nuxt Workspace Template',
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||
{
|
||||
name: 'description',
|
||||
content: 'Nuxt-first template for local VS Code development on the host machine.'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL ?? '/api',
|
||||
apiTimeoutMs: Number.parseInt(process.env.NUXT_PUBLIC_API_TIMEOUT_MS ?? '10000', 10),
|
||||
authMode: process.env.NUXT_PUBLIC_AUTH_MODE ?? 'disabled',
|
||||
authLoginUrl: process.env.NUXT_PUBLIC_AUTH_LOGIN_URL ?? '/login',
|
||||
authLogoutUrl: process.env.NUXT_PUBLIC_AUTH_LOGOUT_URL ?? '/logout',
|
||||
authUserinfoUrl: process.env.NUXT_PUBLIC_AUTH_USERINFO_URL ?? '/api/auth/me'
|
||||
}
|
||||
},
|
||||
|
||||
i18n: {
|
||||
defaultLocale: 'sk',
|
||||
strategy: 'no_prefix',
|
||||
locales: [
|
||||
{ code: 'sk', name: 'Slovencina', file: 'sk.json' },
|
||||
{ code: 'en', name: 'English', file: 'en.json' }
|
||||
],
|
||||
langDir: 'locales',
|
||||
detectBrowserLanguage: false
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,7 @@
|
||||
# OpenAPI Client
|
||||
|
||||
Do tohto adresara sa generuju klienti z OpenAPI specifikacii.
|
||||
|
||||
V template sa generuju cez `@hey-api/openapi-ts`.
|
||||
|
||||
Predvolene sa negituju rucne pisane zmeny do generovanych suborov. Ak potrebujes dodat custom spravanie, daj ho do `api/wrappers` alebo do `app/composables`.
|
||||
@@ -0,0 +1,14 @@
|
||||
# OpenAPI Spec
|
||||
|
||||
Do tohto adresara patria OpenAPI specifikacie alebo generator configy pre backend kontrakty.
|
||||
|
||||
Odporucany workflow:
|
||||
|
||||
1. uloz OpenAPI subor alebo odkaz na repo so specifikaciou
|
||||
2. priprav `openapi-ts.config.ts`
|
||||
3. spusti `pnpm generate:api`
|
||||
4. v `api/wrappers` vytvor tenku vrstvu nad vygenerovanym klientom
|
||||
|
||||
Aktualny codegen pouziva `@hey-api/openapi-ts`, takze v dev containery nie je potrebna Java.
|
||||
|
||||
Komponenty a pages by nemali volat generovany klient priamo. Preferuj composables alebo wrappery, aby sa dalo API jednoducho menit bez zasahu do UI.
|
||||
@@ -0,0 +1,39 @@
|
||||
openapi: 3.0.3
|
||||
info:
|
||||
title: Example API
|
||||
version: 1.0.0
|
||||
servers:
|
||||
- url: /api
|
||||
paths:
|
||||
/health:
|
||||
get:
|
||||
operationId: getHealth
|
||||
responses:
|
||||
'200':
|
||||
description: API health status
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
type: object
|
||||
required:
|
||||
- status
|
||||
properties:
|
||||
status:
|
||||
type: string
|
||||
enum:
|
||||
- ok
|
||||
/welcome:
|
||||
get:
|
||||
operationId: getWelcome
|
||||
responses:
|
||||
'200':
|
||||
description: Welcome message
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
type: object
|
||||
required:
|
||||
- message
|
||||
properties:
|
||||
message:
|
||||
type: string
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from '@hey-api/openapi-ts'
|
||||
|
||||
export default defineConfig({
|
||||
input: './openapi-spec/example-api.yaml',
|
||||
output: './openapi-client/example'
|
||||
})
|
||||
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "nuxt-workspace-template",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@10.33.0",
|
||||
"engines": {
|
||||
"node": "^22.12.0 || >=24"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "nuxt dev",
|
||||
"build": "nuxt build",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"lint": "nuxt prepare && eslint .",
|
||||
"lint:fix": "nuxt prepare && eslint . --fix",
|
||||
"typecheck": "nuxt prepare && nuxt typecheck",
|
||||
"test": "vitest --passWithNoTests",
|
||||
"test:run": "vitest run --passWithNoTests",
|
||||
"format": "prettier --check .",
|
||||
"format:fix": "prettier --write .",
|
||||
"generate:api": "pnpm generate:example-api",
|
||||
"generate:example-api": "rimraf openapi-client/example && openapi-ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/ui": "^4.6.0",
|
||||
"@pinia/nuxt": "^0.11.3",
|
||||
"nuxt": "4.4.2",
|
||||
"pinia": "^3.0.4",
|
||||
"vue": "3.5.31",
|
||||
"vue-router": "5.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hey-api/openapi-ts": "0.94.5",
|
||||
"@types/node": "^24.5.2",
|
||||
"@iconify-json/lucide": "^1.2.70",
|
||||
"@nuxt/eslint": "1.15.2",
|
||||
"@nuxtjs/i18n": "10.2.4",
|
||||
"@vue/test-utils": "2.4.6",
|
||||
"eslint": "9.39.1",
|
||||
"prettier": "3.7.4",
|
||||
"rimraf": "^6.1.2",
|
||||
"sass": "1.98.0",
|
||||
"tailwindcss": "^4.2.2",
|
||||
"typescript": "5.9.3",
|
||||
"vitest": "4.1.2",
|
||||
"vue-i18n": "11.3.0",
|
||||
"vue-tsc": "3.2.6"
|
||||
}
|
||||
}
|
||||
Generated
+12035
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,978 @@
|
||||
# Programming Guide
|
||||
|
||||
Tento dokument sluzi ako prakticky sprievodca template-om. Pri kazdej casti popisuje:
|
||||
|
||||
- co template poskytuje
|
||||
- ci sa dana cast musi pouzit
|
||||
- ako sa pouziva
|
||||
- kratky priklad
|
||||
- ako sa da rozsirit
|
||||
|
||||
Poznamka:
|
||||
|
||||
- vsetko v tomto template je navrhnute tak, aby sa dalo pouzit postupne
|
||||
- projekt nemusis prijat ako jeden velky balik
|
||||
- niektore casti su povinne len technicky, nie architektonicky
|
||||
|
||||
## Prehlad
|
||||
|
||||
Template poskytuje tieto hlavne casti:
|
||||
|
||||
- Nuxt 4 aplikaciu
|
||||
- TypeScript
|
||||
- Nuxt UI ako predvolenu UI vrstvu
|
||||
- i18n pre `sk` a `en`
|
||||
- Pinia store-y
|
||||
- volitelnu auth kostru
|
||||
- API vrstvu pripravenu na OpenAPI
|
||||
- logger composable a plugin
|
||||
- globalne SCSS styly a tokeny
|
||||
- VS Code konfiguraciu
|
||||
- lint, format, typecheck a test skripty
|
||||
- Vitest test harness pre store-y, pluginy, middleware a locale konzistenciu
|
||||
|
||||
## Nuxt 4 Aplikacia
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- zakladnu strukturu Nuxt 4 projektu
|
||||
- `app/` adresar pre pages, layouts, plugins, stores a composables
|
||||
- `nuxt.config.ts` pre centralnu konfiguraciu
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- ano
|
||||
- je to jadro celeho template-u
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- vytvaraj routy v `app/pages`
|
||||
- vytvaraj spolocne layouty v `app/layouts`
|
||||
- pridavaj runtime logiku cez `app/plugins` a `app/composables`
|
||||
|
||||
Priklad:
|
||||
|
||||
```vue
|
||||
<!-- app/pages/about.vue -->
|
||||
<template>
|
||||
<div>About page</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- pridat dalsie Nuxt moduly do `nuxt.config.ts`
|
||||
- doplnit server routes do `server/routes`
|
||||
- doplnit middleware, plugins a composables podla potrieb projektu
|
||||
|
||||
## TypeScript
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- typovanie pre komponenty, composables, stores a plugin injections
|
||||
- centralne rozsirene Nuxt typy v `app/types`
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- prakticky ano
|
||||
- template je na TypeScripte postaveny
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- zapisuj nove composables a utility v `.ts`
|
||||
- definuj domenove typy do `app/types`
|
||||
|
||||
Priklad:
|
||||
|
||||
```ts
|
||||
export interface Customer {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- pridat dalsie domenove typy
|
||||
- rozsirit `RouteMeta` alebo `NuxtApp` injekcie
|
||||
- doplnit typy pre generovane OpenAPI klienty
|
||||
|
||||
Odporucanie:
|
||||
|
||||
- pri rozsireni `NuxtApp` injekcii alebo aliasov udrzuj v synchronizacii aj `vitest.config.ts`, aby sa dali nove pluginy testovat mimo Nuxt runtime
|
||||
|
||||
## Nuxt UI
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- standardnu komponentovu vrstvu pre formularove a bezne aplikacne UI
|
||||
- komponenty ako `UApp`, `UButton`, `UCard`, `UInput`, `USelect`, `UFormField`, `UAlert`
|
||||
- integrovany color mode a konzistentne API komponentov
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- ale je to predvolena UI vrstva template-u
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- v page alebo komponente pouzi `U*` komponenty priamo
|
||||
- nevytvaraj dalsiu vlastnu vrstvu zakladnych button/input/card komponentov, ak na to nie je silny dovod
|
||||
|
||||
Priklad:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<UCard variant="soft">
|
||||
<template #header>
|
||||
<h2>Profil</h2>
|
||||
</template>
|
||||
|
||||
<UFormField label="Meno">
|
||||
<UInput v-model="name" />
|
||||
</UFormField>
|
||||
|
||||
<UButton>Ulozit</UButton>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const name = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- vytvarat vlastne feature komponenty nad Nuxt UI
|
||||
- doplnit komplexne custom komponenty, napriklad diagramy alebo editory
|
||||
- zmenit vzhlad cez app config, CSS a globalne styly
|
||||
|
||||
Odporucany pristup:
|
||||
|
||||
- bezne app UI nech riesi Nuxt UI
|
||||
- specializovane vizualizacie nech riesia vlastne Vue komponenty alebo specializovane kniznice
|
||||
|
||||
## i18n
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- lokalizaciu pre `sk` a `en`
|
||||
- preklady v `i18n/locales/sk.json` a `i18n/locales/en.json`
|
||||
- default locale `sk`
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- ale je uz zapojene a pripravene
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- texty zapisuj do locale JSON suborov
|
||||
- v komponente pouzi `useI18n()`
|
||||
|
||||
Priklad:
|
||||
|
||||
```ts
|
||||
const { t } = useI18n()
|
||||
const title = t('app.title')
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"app": {
|
||||
"title": "Moja aplikacia"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- pridat dalsie jazyky do `nuxt.config.ts`
|
||||
- doplnit dalsie namespace v locale JSON suboroch
|
||||
- zaviest konvencie pre preklady podla modulov, napriklad `users.list.title`
|
||||
|
||||
Automaticke overenie:
|
||||
|
||||
- template obsahuje test, ktory porovnava strukturu klucov v `i18n/locales/sk.json` a `i18n/locales/en.json`
|
||||
- pri pridani noveho textu ho dopln do oboch suborov, inak test zlyha
|
||||
|
||||
## Pinia
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- centralny stav aplikacie
|
||||
- pripraveny `auth` store v `app/stores/auth.ts`
|
||||
- pripraveny `ui` store v `app/stores/ui.ts`
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- ale je odporucany pre zdielany stav
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- lokalny stav formulara drz v komponente
|
||||
- globalny alebo zdielany stav drz v store
|
||||
|
||||
Priklad auth store:
|
||||
|
||||
```ts
|
||||
const authStore = useAuthStore()
|
||||
|
||||
if (authStore.isAuthenticated) {
|
||||
console.log(authStore.displayName)
|
||||
}
|
||||
```
|
||||
|
||||
Priklad ui store:
|
||||
|
||||
```ts
|
||||
const uiStore = useUiStore()
|
||||
|
||||
uiStore.startLoading()
|
||||
|
||||
try {
|
||||
uiStore.pushNotification({
|
||||
title: 'Hotovo',
|
||||
message: 'Data boli ulozene.',
|
||||
tone: 'success'
|
||||
})
|
||||
} finally {
|
||||
uiStore.stopLoading()
|
||||
}
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- pridat dalsie store-y, napriklad `filters`, `settings`, `drafts`
|
||||
- napojit `ui` store na globalne toasty alebo loading overlay
|
||||
- rozsirit `auth` store o session info alebo permission model
|
||||
|
||||
Automaticke overenie:
|
||||
|
||||
- existuju unit testy pre `auth` aj `ui` store, takze zmeny v ich API alebo vypocitavanych hodnotach vies chytit skor, nez sa dostanu do UI
|
||||
|
||||
## Autorizacia A Auth Kostra
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- vendor-neutral auth vrstvu
|
||||
- `useAuth()` composable
|
||||
- auth plugin v `app/plugins/auth.ts`
|
||||
- globalny middleware v `app/middleware/auth.global.ts`
|
||||
- route meta typy `public`, `requiresAuth`, `roles`
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- auth je volitelna
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- nastav mod cez `.env`
|
||||
- route ochran len tam, kde to dava zmysel
|
||||
|
||||
Dostupne mody:
|
||||
|
||||
- `disabled`
|
||||
- `mock`
|
||||
- `userinfo`
|
||||
|
||||
Priklad `.env`:
|
||||
|
||||
```env
|
||||
NUXT_PUBLIC_AUTH_MODE=mock
|
||||
```
|
||||
|
||||
Priklad v komponente:
|
||||
|
||||
```ts
|
||||
const auth = useAuth()
|
||||
|
||||
await auth.ensureInitialized()
|
||||
|
||||
if (auth.isAuthenticated.value) {
|
||||
console.log(auth.user.value?.email)
|
||||
}
|
||||
```
|
||||
|
||||
Priklad ochrany route:
|
||||
|
||||
```ts
|
||||
definePageMeta({
|
||||
requiresAuth: true
|
||||
})
|
||||
```
|
||||
|
||||
Priklad ochrany podla role:
|
||||
|
||||
```ts
|
||||
definePageMeta({
|
||||
requiresAuth: true,
|
||||
roles: ['ADMIN']
|
||||
})
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- napojit `userinfo` mod na realny backend alebo oauth2-proxy endpoint
|
||||
- doplnit mapovanie backend user modelu
|
||||
- pridat jemnejsi access model typu `permissions` alebo `hasAccess(user)`
|
||||
- doplnit login alebo logout UI do layoutu
|
||||
|
||||
Automaticke overenie:
|
||||
|
||||
- auth plugin ma testy pre `disabled`, `mock` a `userinfo`
|
||||
- middleware ma testy pre `public`, `requiresAuth` a `roles`
|
||||
- to znamena, ze zmeny v auth kostre vies overit bez browser manualu
|
||||
|
||||
## API Vrstva
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- centralnu API konfiguraciu v `nuxt.config.ts`
|
||||
- API plugin v `app/plugins/api.client.ts`
|
||||
- `useApi()` composable
|
||||
- wrapper vrstvu v `api/wrappers`
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- ale je to odporucany sposob volania backendu
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- z komponentov volaj `useApi()`
|
||||
- konkretne HTTP detaily drz vo wrapperoch
|
||||
|
||||
Priklad:
|
||||
|
||||
```ts
|
||||
const api = useApi()
|
||||
|
||||
const health = await api.example.getHealth()
|
||||
const welcome = await api.example.getWelcome()
|
||||
```
|
||||
|
||||
Zakladne env:
|
||||
|
||||
```env
|
||||
NUXT_PUBLIC_API_BASE_URL=/api
|
||||
NUXT_PUBLIC_API_TIMEOUT_MS=10000
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- pridat dalsie API wrappery do `api/wrappers`
|
||||
- rozdelit klientov podla domen, napriklad `users`, `projects`, `reports`
|
||||
- doplnit error handling, retry alebo auth headers
|
||||
|
||||
Odporucanie:
|
||||
|
||||
- UI nema volat `fetch` napriamo, ak to nie je jednorazova drobnost
|
||||
- preferuj centralnu API vrstvu pre konzistenciu
|
||||
|
||||
Automaticke overenie:
|
||||
|
||||
- ukazkovy wrapper `api/wrappers/example.ts` aj plugin `app/plugins/api.client.ts` maju Vitest testy
|
||||
- pri pridani dalsieho wrappera je dobry standard doplnit rovnaky test hned s implementaciou
|
||||
|
||||
## OpenAPI Priprava
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- `openapi-spec` pre specifikacie a generator configy
|
||||
- `openapi-client` pre generovanych klientov
|
||||
- `openapi-ts.config.ts`
|
||||
- skripty `pnpm generate:api` a `pnpm generate:example-api`
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- je to priprava pre projekty, kde FE alebo BE kontrakt existuje ako OpenAPI
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
1. vloz alebo nahrad OpenAPI specifikaciu v `openapi-spec`
|
||||
2. uprav `openapi-ts.config.ts`
|
||||
3. spusti generator
|
||||
4. napoj vysledok cez `api/wrappers`
|
||||
|
||||
Priklad:
|
||||
|
||||
```bash
|
||||
pnpm generate:api
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- generovat viac klientov pre viac backendov
|
||||
- verzovat alebo neverzovat generovany kod podla timovej dohody
|
||||
- doplnit wrappery, ktore skryju rozdiely medzi backendmi
|
||||
|
||||
Odporucanie:
|
||||
|
||||
- negenerovany kod nech ostane v `api/wrappers` a `app/composables`
|
||||
- komponenty nech nevolaju generovany OpenAPI klient priamo
|
||||
- generator je Node-native, takze workflow funguje aj bez Javy
|
||||
|
||||
## Logger
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- jednoduchy logger plugin
|
||||
- `useLogger()` composable
|
||||
- dostupnost cez Nuxt inject
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
```ts
|
||||
const logger = useLogger()
|
||||
|
||||
logger.info('User opened page', { section: 'dashboard' })
|
||||
logger.error('Save failed', { id: '123' })
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- napojit logovanie na externe sluzby
|
||||
- doplnit odlisne spravanie pre dev a production
|
||||
- pridat korelacne ID alebo request context
|
||||
|
||||
Automaticke overenie:
|
||||
|
||||
- logger plugin ma test na format vystupu
|
||||
- `useLogger()` ma test na spravne Nuxt inject spravanie
|
||||
|
||||
## Testovanie A Overenie
|
||||
|
||||
Co sa overuje automaticky:
|
||||
|
||||
- store-y
|
||||
- pluginy
|
||||
- middleware
|
||||
- API wrappery
|
||||
- i18n kluce
|
||||
|
||||
Zakladny verify workflow:
|
||||
|
||||
```bash
|
||||
pnpm lint
|
||||
pnpm typecheck
|
||||
pnpm test:run
|
||||
pnpm build
|
||||
```
|
||||
|
||||
Cielene spustenie infrastructure testov template-u:
|
||||
|
||||
```bash
|
||||
pnpm vitest run tests/auth.plugin.spec.ts tests/auth.middleware.spec.ts tests/i18n.locales.spec.ts tests/api.plugin.spec.ts tests/logger.plugin.spec.ts tests/use-logger.spec.ts
|
||||
```
|
||||
|
||||
Poznamka:
|
||||
|
||||
- testy pre pluginy a middleware pouzivaju `vitest.config.ts`, kde su nastavene aliasy `~`, `@`, `~~` a `@@`
|
||||
- ak pridas nove runtime injekcie alebo novu rozsirenu Nuxt vrstvu, je dobre doplnit test este v tom istom PR
|
||||
|
||||
## Globalne Styly A Tokeny
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- `app/assets/styles/ui.css`
|
||||
- `app/assets/styles/_tokens.scss`
|
||||
- `app/assets/styles/_theme.scss`
|
||||
- `app/assets/styles/_base.scss`
|
||||
- `app/assets/styles/main.scss`
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- ciastocne ano
|
||||
- stylova vrstva je sucast template-u, ale mozes ju zmensit alebo vymenit
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- `ui.css` nechaj ako vstup pre `tailwindcss` a `@nuxt/ui`
|
||||
- layoutove a globalne upravy rob v `_base.scss`
|
||||
- Nuxt UI farby skus najprv nastavit v `nuxt.config.ts` cez `appConfig.ui.colors`
|
||||
- `_theme.scss` pouzi len na male override-y nad Nuxt UI tokenmi
|
||||
- zakladne app-level hodnoty drz v `_tokens.scss`
|
||||
|
||||
Priklad:
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
appConfig: {
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
neutral: 'slate'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- doplnit branding projektu
|
||||
- upravit typografiu, spacing a farby
|
||||
- v pripade potreby jemne prepisat Nuxt UI tokeny bez budovania vlastneho design systemu
|
||||
|
||||
Odporucany mentalny model:
|
||||
|
||||
- Nuxt UI je zdroj pravdy pre komponentovy vizual
|
||||
- `_tokens.scss` drzi male spolocne hodnoty pre app shell
|
||||
- `_theme.scss` riesi rozdiel medzi light a dark vizualom
|
||||
- `_base.scss` riesi vlastne layout triedy a app-specific CSS
|
||||
|
||||
### Co menit v ktorom subore
|
||||
|
||||
`nuxt.config.ts`
|
||||
|
||||
- semanticke farby pre Nuxt UI ako prvy krok
|
||||
- ine Nuxt-level nastavenia
|
||||
|
||||
Priklad:
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
appConfig: {
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
neutral: 'slate'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
`app/assets/styles/ui.css`
|
||||
|
||||
- nechaj len import Nuxt UI vrstvy
|
||||
- tento subor nie je miesto na app-specific styling
|
||||
|
||||
Priklad:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
```
|
||||
|
||||
`app/assets/styles/_tokens.scss`
|
||||
|
||||
- radius
|
||||
- font family
|
||||
- layout max width
|
||||
|
||||
Priklad:
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--font-family-base: 'Segoe UI', sans-serif;
|
||||
--page-max-width: 1320px;
|
||||
--ui-radius: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
`app/assets/styles/_theme.scss`
|
||||
|
||||
- jemne prepisy Nuxt UI CSS tokenov
|
||||
- light/dark rozdiely bez stavania vlastnej komponentovej kniznice
|
||||
|
||||
Priklad:
|
||||
|
||||
```scss
|
||||
:root,
|
||||
.light {
|
||||
--ui-primary: var(--ui-color-primary-600);
|
||||
--ui-bg: #f8fafc;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--ui-primary: var(--ui-color-primary-400);
|
||||
--ui-bg: #0b1220;
|
||||
}
|
||||
```
|
||||
|
||||
`app/assets/styles/_base.scss`
|
||||
|
||||
- vlastne wrapper triedy
|
||||
- spacing a layout pre shell
|
||||
- app-specific utility a responzivne pravidla
|
||||
|
||||
Priklad:
|
||||
|
||||
```scss
|
||||
.page-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
```
|
||||
|
||||
### Ako funguje light, dark a system tema
|
||||
|
||||
Template pouziva `useColorMode()` a prepinac v `app/layouts/default.vue`.
|
||||
|
||||
Pouzivane hodnoty:
|
||||
|
||||
- `light`
|
||||
- `dark`
|
||||
- `system`
|
||||
|
||||
Priklad vlastneho prepinaca:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const colorMode = useColorMode()
|
||||
|
||||
function cycleTheme() {
|
||||
colorMode.preference =
|
||||
colorMode.preference === 'light'
|
||||
? 'dark'
|
||||
: colorMode.preference === 'dark'
|
||||
? 'system'
|
||||
: 'light'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton @click="cycleTheme">
|
||||
Zmenit temu
|
||||
</UButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
Kedy menit `preference` a kedy CSS premenne:
|
||||
|
||||
- `colorMode.preference` meni aktivny mod
|
||||
- CSS premenne v `_theme.scss` menia, ako light a dark mod vyzera
|
||||
|
||||
### Typicke scenare uprav
|
||||
|
||||
1. Chces iny primary button color.
|
||||
Najprv skus `appConfig.ui.colors` v `nuxt.config.ts`, a ak chces presnejsi vysledok, dolad `--ui-primary` v `_theme.scss`.
|
||||
2. Chces tmavsi dark background a jemnejsie card borders.
|
||||
Uprav `--ui-bg`, `--ui-bg-muted` a `--ui-border` v `_theme.scss`.
|
||||
3. Chces vacsi radius pre buttony, inputs a cards.
|
||||
Zmen `--ui-radius` v `_tokens.scss`.
|
||||
4. Chces sirsi layout alebo iny spacing hero sekcie.
|
||||
Uprav `_base.scss`.
|
||||
|
||||
### Priklady praktickych uprav
|
||||
|
||||
Zmena radiusu pre celu app:
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--ui-radius: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
Jemnejsi light mode:
|
||||
|
||||
```scss
|
||||
:root,
|
||||
.light {
|
||||
--ui-bg: #f8fafc;
|
||||
--ui-bg-muted: #f1f5f9;
|
||||
--ui-border: #dbe4ee;
|
||||
}
|
||||
```
|
||||
|
||||
Vyraznejsi dark mode:
|
||||
|
||||
```scss
|
||||
.dark {
|
||||
--ui-bg: #0b1220;
|
||||
--ui-bg-muted: #111827;
|
||||
--ui-border: #1f2937;
|
||||
--ui-text: #e5eef9;
|
||||
}
|
||||
```
|
||||
|
||||
Silnejsia primarna farba v light mode a jemnejsia v dark mode:
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--ui-primary: var(--ui-color-primary-700);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--ui-primary: var(--ui-color-primary-400);
|
||||
}
|
||||
```
|
||||
|
||||
## Docker Release Image
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- [Dockerfile](/c:/Data/Development/MANET/prjtemplates/vue/Dockerfile)
|
||||
- [.dockerignore](/c:/Data/Development/MANET/prjtemplates/vue/.dockerignore)
|
||||
- produkcny image pre Nitro server
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- ale je to odporucana cesta pre release a deploy
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- buildni image cez `docker build`
|
||||
- spusti kontajner s namapovanym portom `3000`
|
||||
- runtime premenne dodaj cez `-e`
|
||||
|
||||
Priklad:
|
||||
|
||||
```bash
|
||||
docker build -t nuxt-workspace-template:latest .
|
||||
docker run --rm -p 3000:3000 nuxt-workspace-template:latest
|
||||
```
|
||||
|
||||
Priklad s runtime premennymi:
|
||||
|
||||
```powershell
|
||||
docker run --rm -p 3000:3000 `
|
||||
-e NUXT_PUBLIC_API_BASE_URL=https://api.example.com `
|
||||
-e NUXT_PUBLIC_AUTH_MODE=userinfo `
|
||||
nuxt-workspace-template:latest
|
||||
```
|
||||
|
||||
Poznamky:
|
||||
|
||||
- build stage pouziva `node:24-bookworm-slim`
|
||||
- runtime stage pouziva hardened `gcr.io/distroless/nodejs24-debian12:nonroot`
|
||||
- kontajner spusta `.output/server/index.mjs`
|
||||
- image je urceny pre release alebo deploy, nie pre hot-reload development
|
||||
|
||||
## Layout
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- spolocny shell aplikacie v `app/layouts/default.vue`
|
||||
- branding, prepinanie locale a prepinanie temy
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- ale je to predvoleny layout
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- nechaj sem spolocne prvky aplikacie
|
||||
- stranky sa do neho renderuju cez `<slot />`
|
||||
|
||||
Priklad rozsirenia:
|
||||
|
||||
- pridat navigation bar
|
||||
- pridat user menu
|
||||
- pridat globalne notifikacie alebo loading indikator
|
||||
|
||||
## Demo Stranka
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- ukazkovu domovsku stranku v `app/pages/index.vue`
|
||||
- priklad pouzitia i18n, loggera, Nuxt UI a theme switchingu
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- je to iba demo start point
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- nahrad ju vlastnym dashboardom alebo landing page
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- prerobit na prehlad systemu
|
||||
- pouzit ju ako interny style guide pre tim
|
||||
- rozdelit ukazky do samostatnych routes
|
||||
|
||||
## VS Code
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- `.vscode` konfiguraciu
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- ale je to odporucany editorovy setup pre konzistentny workflow
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
- otvor repo vo VS Code
|
||||
- spusti `pnpm dev`
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- pridat dalsie VS Code extensions
|
||||
- upravit Node verziu na hoste
|
||||
- pridat lokalne helper sluzby podla potrieb projektu
|
||||
|
||||
## Kvalita Kodu
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- ESLint
|
||||
- Prettier
|
||||
- Typecheck
|
||||
- Vitest
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- technicky nie
|
||||
- prakticky ano, ak chces udrzatelny projekt
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
```bash
|
||||
pnpm lint
|
||||
pnpm typecheck
|
||||
pnpm test:run
|
||||
pnpm format
|
||||
```
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- doplnit unit testy
|
||||
- doplnit component testy
|
||||
- zapojit CI pipeline
|
||||
- pridat pre-commit hooks
|
||||
|
||||
## Runtime Config
|
||||
|
||||
Co poskytuje:
|
||||
|
||||
- centralne public config hodnoty v `nuxt.config.ts`
|
||||
- API a auth env premenne
|
||||
|
||||
Musi sa pouzit:
|
||||
|
||||
- nie
|
||||
- ale je to odporucany sposob konfiguracie
|
||||
|
||||
Ako pouzit:
|
||||
|
||||
Priklad `.env`:
|
||||
|
||||
```env
|
||||
NUXT_PUBLIC_API_BASE_URL=/api
|
||||
NUXT_PUBLIC_API_TIMEOUT_MS=10000
|
||||
NUXT_PUBLIC_AUTH_MODE=disabled
|
||||
NUXT_PUBLIC_AUTH_USERINFO_URL=/api/auth/me
|
||||
```
|
||||
|
||||
Prakticky start:
|
||||
|
||||
1. skopiruj `.env.example` do `.env`
|
||||
2. nastav `NUXT_PUBLIC_API_BASE_URL`
|
||||
3. rozhodni `NUXT_PUBLIC_AUTH_MODE`
|
||||
4. ak budes pouzivat `userinfo`, dopln aj login, logout a userinfo URL
|
||||
|
||||
Poznamka:
|
||||
|
||||
- public runtime config patri do `.env`, nie natvrdo do komponentov
|
||||
|
||||
Moznosti rozsirenia:
|
||||
|
||||
- pridat dalsie public a private env premenne
|
||||
- rozdelit config podla modulov
|
||||
- doplnit feature flags
|
||||
|
||||
## Co Je Povinny Zaklad A Co Je Volitelne
|
||||
|
||||
Povinny zaklad:
|
||||
|
||||
- Nuxt 4
|
||||
- TypeScript
|
||||
- zakladna adresarova struktura
|
||||
- `nuxt.config.ts`
|
||||
|
||||
Silno odporucane, ale volitelne:
|
||||
|
||||
- Nuxt UI
|
||||
- i18n
|
||||
- Pinia
|
||||
- API vrstva
|
||||
- logger
|
||||
- globalne styly
|
||||
|
||||
Volitelne casti:
|
||||
|
||||
- auth kostra
|
||||
- OpenAPI generator workflow
|
||||
- lokalny host workflow nad VS Code
|
||||
- demo stranka v aktualnej podobe
|
||||
|
||||
## Odporucany Sposob Pouzitia Template-u
|
||||
|
||||
Ak chces z template-u spravit realny projekt, odporucany postup je:
|
||||
|
||||
1. uprav branding, title a preklady
|
||||
2. rozhodni, ci pouzijes auth a v akom mode
|
||||
3. nastav API base URL a priprav prve wrappery
|
||||
4. ak mate OpenAPI kontrakt, nahraj specifikaciu a nastav generator
|
||||
5. zacni stavat stranky priamo nad Nuxt UI komponentmi
|
||||
6. zdielany stav presuvaj do Pinia store-ov
|
||||
7. pred odovzdanim pravidelne pustaj lint, typecheck a testy
|
||||
|
||||
Ako spravit prvy krok prakticky:
|
||||
|
||||
- v `package.json` zmen `name`
|
||||
- v `nuxt.config.ts` uprav `app.head.title`, `titleTemplate` a `description`
|
||||
- v `i18n/locales/sk.json` a `i18n/locales/en.json` prepis demo texty
|
||||
- v `app/pages/index.vue` nahrad ukazkovu domovsku stranku vlastnym obsahom
|
||||
- v `nuxt.config.ts`, `app/assets/styles/_tokens.scss`, `_theme.scss` a `_base.scss` dolad semanticke farby, spacing a globalny vizual
|
||||
|
||||
## Odporucany Sposob Rozsirovania
|
||||
|
||||
Najrozumnejsie miesto pre rozsirovanie podla typu zmeny:
|
||||
|
||||
- nova route alebo obrazovka:
|
||||
`app/pages`
|
||||
- nova zdielana UI cast alebo zlozitejsi widget:
|
||||
`app/components`
|
||||
- nova zdielana logika:
|
||||
`app/composables`
|
||||
- novy globalny stav:
|
||||
`app/stores`
|
||||
- nove backend volania:
|
||||
`api/wrappers`
|
||||
- nova OpenAPI specifikacia:
|
||||
`openapi-spec`
|
||||
- nova plugin integracia:
|
||||
`app/plugins`
|
||||
- nove typy:
|
||||
`app/types`
|
||||
|
||||
Priklad rozsirania o novu feature:
|
||||
|
||||
1. vytvor `app/pages/users/list.vue`
|
||||
2. pridaj `api/wrappers/users.ts`
|
||||
3. dopln typy do `app/types/api.ts` alebo pouzi generovany klient
|
||||
4. ak treba, pridaj `app/stores/users.ts`
|
||||
5. texty dopln do `i18n/locales/*.json`
|
||||
|
||||
## Zaverecne Odporucanie
|
||||
|
||||
Tento template nie je monolit, ktory musis pouzit cely. Je to pripraveny zaklad, z ktoreho si mozes zobrat:
|
||||
|
||||
- len Nuxt UI a i18n
|
||||
- len API a OpenAPI workflow
|
||||
- len auth skeleton
|
||||
- alebo kompletne vsetky vrstvy spolu
|
||||
|
||||
Najlepsie funguje vtedy, ked:
|
||||
|
||||
- bezne UI stavas priamo s Nuxt UI
|
||||
- backend komunikaciu drzis v wrapperoch
|
||||
- zdielany stav davas do Pinie
|
||||
- auth zapinas len tam, kde ho naozaj potrebujes
|
||||
+293
@@ -0,0 +1,293 @@
|
||||
# Quick Start
|
||||
|
||||
Tento dokument je rychly start po vytvoreni projektu z template.
|
||||
|
||||
Ak nechces citat celu dokumentaciu, chod podla tychto krokov.
|
||||
|
||||
## 1. Spusti Projekt
|
||||
|
||||
```bash
|
||||
corepack enable
|
||||
pnpm install
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Poznamka:
|
||||
|
||||
- projekt ocakava Node `^22.12.0 || >=24`
|
||||
|
||||
Ak chces rovno pripravit release image namiesto lokalneho dev servera:
|
||||
|
||||
```bash
|
||||
docker build -t nuxt-workspace-template:latest .
|
||||
docker run --rm -p 3000:3000 nuxt-workspace-template:latest
|
||||
```
|
||||
|
||||
Potom otvor `http://localhost:3000`.
|
||||
|
||||
Poznamka:
|
||||
|
||||
- runtime image je distroless Node 24 image urceny pre release a deploy
|
||||
|
||||
## Co Spravit Hned Po Spusteni
|
||||
|
||||
Po tom, co aplikacia bezi, urob aspon tieto zakladne kroky:
|
||||
|
||||
1. vytvor `.env` z `.env.example` a nastav minimalne API a auth hodnoty
|
||||
2. uprav branding v `package.json`, `nuxt.config.ts` a textoch v `i18n/locales`
|
||||
3. rozhodni auth mod: `disabled`, `mock` alebo `userinfo`
|
||||
4. rozhodni, ci pojdes cez vlastne wrappery v `api/wrappers`, alebo cez OpenAPI codegen
|
||||
5. nahrad demo obsah v `app/pages/index.vue` prvou realnou obrazovkou alebo dashboardom
|
||||
6. skontroluj globalne styly v `app/assets/styles`
|
||||
7. pred vacsou zmenou pust `pnpm lint`, `pnpm typecheck`, `pnpm test:run` a `pnpm build`
|
||||
|
||||
Kde to najdes podrobne:
|
||||
|
||||
- `.env` a runtime config: nizsie v tomto dokumente a v `programing_guide.md`
|
||||
- branding a preklady: sekcia `Uprav Branding`
|
||||
- auth: sekcia `Rozhodni Sa O Auth`
|
||||
- API a OpenAPI: sekcia `Rozhodni Sa O API Integracii`
|
||||
- prva feature: sekcia `Vytvor Prvu Feature`
|
||||
|
||||
## 2. Vytvor `.env`
|
||||
|
||||
Skopiruj `.env.example` do `.env` a uprav hodnoty podla projektu.
|
||||
|
||||
Minimalny start:
|
||||
|
||||
```env
|
||||
NUXT_PUBLIC_API_BASE_URL=/api
|
||||
NUXT_PUBLIC_API_TIMEOUT_MS=10000
|
||||
NUXT_PUBLIC_AUTH_MODE=disabled
|
||||
```
|
||||
|
||||
Ak chces lokalny mock auth:
|
||||
|
||||
```env
|
||||
NUXT_PUBLIC_AUTH_MODE=mock
|
||||
```
|
||||
|
||||
## 3. Uprav Branding
|
||||
|
||||
Najcastejsie prve zmeny:
|
||||
|
||||
- nazov projektu v `package.json`
|
||||
- title a meta v `nuxt.config.ts`
|
||||
- texty v `i18n/locales/sk.json`
|
||||
- texty v `i18n/locales/en.json`
|
||||
- obsah domovskej stranky v `app/pages/index.vue`
|
||||
|
||||
Odporucanie:
|
||||
|
||||
- nenechaj template texty v produkcnom projekte
|
||||
|
||||
## 4. Rozhodni Sa O Auth
|
||||
|
||||
Template podporuje volitelny auth skeleton.
|
||||
|
||||
Moznosti:
|
||||
|
||||
- `disabled`
|
||||
pouzi, ak aplikacia auth nepotrebuje
|
||||
- `mock`
|
||||
pouzi pri lokalnom vyvoji bez realneho prihlasenia
|
||||
- `userinfo`
|
||||
pouzi, ak backend alebo proxy vracia user info endpoint
|
||||
|
||||
Priklad ochrany route:
|
||||
|
||||
```ts
|
||||
definePageMeta({
|
||||
requiresAuth: true
|
||||
})
|
||||
```
|
||||
|
||||
Priklad s rolou:
|
||||
|
||||
```ts
|
||||
definePageMeta({
|
||||
requiresAuth: true,
|
||||
roles: ['ADMIN']
|
||||
})
|
||||
```
|
||||
|
||||
## 5. Rozhodni Sa O API Integracii
|
||||
|
||||
Mas 2 hlavne cesty:
|
||||
|
||||
- bez OpenAPI
|
||||
pouzivaj `useApi()` a doplnaj vlastne wrappery do `api/wrappers`
|
||||
- s OpenAPI
|
||||
nahraj specifikaciu do `openapi-spec` a vygeneruj klienta
|
||||
|
||||
Priklad pouzitia API:
|
||||
|
||||
```ts
|
||||
const api = useApi()
|
||||
const health = await api.example.getHealth()
|
||||
```
|
||||
|
||||
Ak mas OpenAPI:
|
||||
|
||||
1. nahrad `openapi-spec/example-api.yaml`
|
||||
2. uprav `openapi-ts.config.ts`
|
||||
3. spusti:
|
||||
|
||||
```bash
|
||||
pnpm generate:api
|
||||
```
|
||||
|
||||
Poznamka:
|
||||
|
||||
- generator bezi cez `@hey-api/openapi-ts`, takze netreba Javu
|
||||
|
||||
## 6. Stavaj UI S Nuxt UI
|
||||
|
||||
Template pouziva Nuxt UI ako predvolenu komponentovu vrstvu.
|
||||
|
||||
Pouzivaj najma:
|
||||
|
||||
- `UButton`
|
||||
- `UCard`
|
||||
- `UInput`
|
||||
- `USelect`
|
||||
- `UFormField`
|
||||
- `UAlert`
|
||||
|
||||
Priklad:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2>Nova stranka</h2>
|
||||
</template>
|
||||
|
||||
<UFormField label="Nazov">
|
||||
<UInput v-model="name" />
|
||||
</UFormField>
|
||||
|
||||
<UButton>Ulozit</UButton>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const name = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
Odporucanie:
|
||||
|
||||
- nebuduj novu vrstvu `BaseButton`, `BaseInput`, `BaseCard`, ak na to nie je silny dovod
|
||||
|
||||
## 7. Pouzivaj Pinia Len Na Zdielany Stav
|
||||
|
||||
Pripravene store-y:
|
||||
|
||||
- `useAuthStore()`
|
||||
- `useUiStore()`
|
||||
|
||||
Pouzivaj ich na:
|
||||
|
||||
- user/session stav
|
||||
- loading
|
||||
- notifikacie
|
||||
|
||||
Nepouzivaj ich na:
|
||||
|
||||
- kazdy maly lokalny input
|
||||
- docasny stav jedneho formulara, ak ho nepotrebuje viac casti appky
|
||||
|
||||
Priklad:
|
||||
|
||||
```ts
|
||||
const uiStore = useUiStore()
|
||||
|
||||
uiStore.pushNotification({
|
||||
title: 'Ulozene',
|
||||
message: 'Operacia prebehla uspesne.',
|
||||
tone: 'success'
|
||||
})
|
||||
```
|
||||
|
||||
## 8. Vytvor Prvu Feature
|
||||
|
||||
Odporucany postup pri novej feature:
|
||||
|
||||
1. vytvor route v `app/pages`
|
||||
2. vytvor alebo dopln API wrapper v `api/wrappers`
|
||||
3. ak treba, vytvor store v `app/stores`
|
||||
4. dopln preklady do `i18n/locales`
|
||||
5. postav UI pomocou Nuxt UI
|
||||
|
||||
Priklad:
|
||||
|
||||
- `app/pages/users/list.vue`
|
||||
- `api/wrappers/users.ts`
|
||||
- `app/stores/users.ts`
|
||||
|
||||
## 9. Over Kvalitu
|
||||
|
||||
Pred vacsou zmenou alebo commitom pustaj:
|
||||
|
||||
```bash
|
||||
pnpm lint
|
||||
pnpm typecheck
|
||||
pnpm test:run
|
||||
pnpm build
|
||||
```
|
||||
|
||||
Ak menis formatovanie:
|
||||
|
||||
```bash
|
||||
pnpm format:fix
|
||||
```
|
||||
|
||||
Template uz obsahuje automaticke testy pre:
|
||||
|
||||
- `auth` a `ui` store-y
|
||||
- auth plugin a auth middleware
|
||||
- API wrapper a API plugin
|
||||
- logger plugin a `useLogger()`
|
||||
- konzistenciu i18n klucov
|
||||
|
||||
Ak chces rychly smoke check len pre testovaciu kostru template-u, pouzi:
|
||||
|
||||
```bash
|
||||
pnpm vitest run tests/auth.plugin.spec.ts tests/auth.middleware.spec.ts tests/i18n.locales.spec.ts tests/api.plugin.spec.ts tests/logger.plugin.spec.ts tests/use-logger.spec.ts
|
||||
```
|
||||
|
||||
Poznamka:
|
||||
|
||||
- Vitest aliasy pre Nuxt importy su nastavene vo `vitest.config.ts`
|
||||
|
||||
## 10. Co Zmenit Ako Prve V Realnom Projekte
|
||||
|
||||
Najcastejsie prve upravy:
|
||||
|
||||
- branding a preklady
|
||||
- title a meta udaje
|
||||
- `.env` konfiguracia
|
||||
- auth mod
|
||||
- API base URL
|
||||
- vlastna domovska stranka
|
||||
- prvy realny API wrapper
|
||||
- prva chranena route, ak treba auth
|
||||
|
||||
## Odporucane Minimalne Rozhodnutia Na Start
|
||||
|
||||
Predtym, nez zacnes feature vyvoj, rozhodni aspon toto:
|
||||
|
||||
1. bude auth `disabled`, `mock` alebo `userinfo`?
|
||||
2. bude FE/BE kontrakt rieseny cez OpenAPI?
|
||||
3. budete generovat klientov do `openapi-client`?
|
||||
4. budete drzat globalny stav v Pinia store-och?
|
||||
5. zostavate pri Nuxt UI ako hlavnej UI vrstve?
|
||||
|
||||
## Ked Chces Ist Dalej
|
||||
|
||||
Podrobnejsi popis najdes v:
|
||||
|
||||
- `readme.md`
|
||||
- `programing_guide.md`
|
||||
- `openapi-spec/README.md`
|
||||
@@ -0,0 +1,700 @@
|
||||
# Nuxt Workspace Template
|
||||
|
||||
Nuxt 4 template pre lokalny vyvoj vo VS Code na hoste. Repozitar obsahuje zakladnu aplikaciu s i18n, Nuxt UI, jednoduchym loggerom, volitelnou auth kostrou, OpenAPI-ready API vrstvou a predpripravenym workspace nastavenim pre lokalny vyvoj.
|
||||
|
||||
Dalsia dokumentacia:
|
||||
|
||||
- `quick_start.md`: rychly postup po vytvoreni projektu z template
|
||||
- `programing_guide.md`: podrobny prehlad toho, co template poskytuje, ako sa to pouziva a ako sa to da rozsirovat
|
||||
|
||||
## Co je pripravene
|
||||
|
||||
- Nuxt `4.4.2`
|
||||
- TypeScript `5.9.3`
|
||||
- `pnpm` ako package manager
|
||||
- `@nuxtjs/i18n` s jazykmi `sk` a `en`
|
||||
- light, dark a system tema cez Nuxt color mode
|
||||
- klientsky logger dostupny cez composable
|
||||
- volitelna auth kostra s modmi `disabled`, `mock` a `userinfo`
|
||||
- OpenAPI-ready API vrstva s generator skriptmi a wrappermi
|
||||
- Nuxt UI ako predvolena komponentova vrstva
|
||||
- `.vscode` konfiguracia pre vyvoj vo VS Code
|
||||
- ESLint, Prettier a Vitest
|
||||
|
||||
## Pre koho je template
|
||||
|
||||
Template je vhodny ako vychodiskovy bod pre:
|
||||
|
||||
- dashboardy a interne aplikacie
|
||||
- portalove aplikacie
|
||||
- administracne rozhrania
|
||||
- mensie a stredne Nuxt projekty, kde chces zacat rychlo, ale nie od nuly
|
||||
|
||||
## Struktura projektu
|
||||
|
||||
Najdolezitejsie casti repozitara:
|
||||
|
||||
- `app/pages`:
|
||||
routovatelne stranky aplikacie
|
||||
- `app/layouts`:
|
||||
spolocny layout aplikacie
|
||||
- `app/components`:
|
||||
miesto pre vlastne feature alebo komplexne komponenty nad Nuxt UI
|
||||
- `app/composables`:
|
||||
zdielana klientska logika, napr. tema a logger
|
||||
- `app/plugins`:
|
||||
Nuxt pluginy dostupne v runtime
|
||||
- `tests`:
|
||||
Vitest testy pre store-y, pluginy, middleware a i18n konzistenciu
|
||||
- `app/assets/styles`:
|
||||
globalne SCSS styly, tokeny a tema
|
||||
- `i18n/locales`:
|
||||
preklady pre jednotlive jazyky
|
||||
- `.vscode`:
|
||||
odporucane rozsirrenia, settings a debug konfiguracia
|
||||
- `nuxt.config.ts`:
|
||||
hlavna konfiguracia Nuxtu, modulov, globalnych stylov a i18n
|
||||
- `vitest.config.ts`:
|
||||
Vitest aliasy pre `~`, `@`, `~~` a `@@`, aby sa dali testovat Nuxt subory mimo runtime
|
||||
|
||||
## Ako pouzit tento template
|
||||
|
||||
### 1. Vytvor projekt z template
|
||||
|
||||
Pouzi tento repozitar ako zaklad a uprav si aspon:
|
||||
|
||||
- nazov projektu v `package.json`
|
||||
- titulok, meta a popis v `nuxt.config.ts`
|
||||
- texty v `i18n/locales/sk.json` a `i18n/locales/en.json`
|
||||
- uvodnu stranku v `app/pages/index.vue`
|
||||
- vizualny styl v `app/assets/styles`
|
||||
|
||||
### 2. Nastav prostredie
|
||||
|
||||
Skopiruj `.env.example` do `.env` a dopln vlastne hodnoty podla potreby.
|
||||
|
||||
Priklady:
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
```powershell
|
||||
Copy-Item .env.example .env
|
||||
```
|
||||
|
||||
## Spustenie projektu
|
||||
|
||||
### Lokalny vyvoj na hoste
|
||||
|
||||
Pozadovane je:
|
||||
|
||||
- Node.js `^22.12.0 || >=24`
|
||||
- `corepack`
|
||||
|
||||
Spustenie:
|
||||
|
||||
```bash
|
||||
corepack enable
|
||||
pnpm install
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Potom otvor `http://localhost:3000`.
|
||||
|
||||
Poznamky:
|
||||
|
||||
- pri prvom starte moze Nuxt v dev rezime buildit pomalsie
|
||||
- ak je port `3000` obsadeny, Nuxt pouzije iny port, typicky `3001`
|
||||
- po otvoreni stranky sa moze prvy Vite build spustit az na prvy request
|
||||
|
||||
### Produkcny Docker image
|
||||
|
||||
Template obsahuje pripraveny:
|
||||
|
||||
- [Dockerfile](/c:/Data/Development/MANET/prjtemplates/vue/Dockerfile)
|
||||
- [.dockerignore](/c:/Data/Development/MANET/prjtemplates/vue/.dockerignore)
|
||||
|
||||
Build image:
|
||||
|
||||
```bash
|
||||
docker build -t nuxt-workspace-template:latest .
|
||||
```
|
||||
|
||||
Spustenie kontajnera:
|
||||
|
||||
```bash
|
||||
docker run --rm -p 3000:3000 nuxt-workspace-template:latest
|
||||
```
|
||||
|
||||
Kontajner spusti hotovy Nitro server z `.output/server/index.mjs` a aplikacia bude dostupna na `http://localhost:3000`.
|
||||
|
||||
Ak potrebujes odovzdat runtime premenne:
|
||||
|
||||
```powershell
|
||||
docker run --rm -p 3000:3000 `
|
||||
-e NUXT_PUBLIC_API_BASE_URL=https://api.example.com `
|
||||
-e NUXT_PUBLIC_AUTH_MODE=userinfo `
|
||||
nuxt-workspace-template:latest
|
||||
```
|
||||
|
||||
Poznamky:
|
||||
|
||||
- image je urceny pre release a deploy, nie pre hot-reload vyvoj
|
||||
- build stage pouziva `pnpm install --frozen-lockfile` a `pnpm build`
|
||||
- runtime stage pouziva hardened distroless Node 24 image a publikuje port `3000`
|
||||
- runtime image neobsahuje shell ani balast navyse, co pomaha znizit attack surface
|
||||
|
||||
## Zakladne skripty
|
||||
|
||||
- `pnpm dev`: spusti vyvojovy server
|
||||
- `pnpm build`: vytvori produkcny build
|
||||
- `pnpm preview`: spusti preview produkcneho buildu
|
||||
- `pnpm generate:api`: spusti pripraveny OpenAPI codegen workflow
|
||||
- `pnpm generate:example-api`: vygeneruje ukazkoveho klienta do `openapi-client/example` cez `@hey-api/openapi-ts`
|
||||
- `pnpm lint`: spusti ESLint
|
||||
- `pnpm lint:fix`: opravi cast lint problemov automaticky
|
||||
- `pnpm typecheck`: spusti Nuxt typecheck
|
||||
- `pnpm test`: spusti Vitest v beznom rezime
|
||||
- `pnpm test:run`: spusti Vitest jednorazovo
|
||||
- `pnpm format`: skontroluje formatovanie cez Prettier
|
||||
- `pnpm format:fix`: naformatuje subory cez Prettier
|
||||
|
||||
## Automaticke Overenie
|
||||
|
||||
Template ma pripraveny automaticky test coverage pre najdolezitejsie stavebne casti:
|
||||
|
||||
- store-y `auth` a `ui`
|
||||
- auth plugin pre mody `disabled`, `mock` a `userinfo`
|
||||
- auth middleware pre `public`, `requiresAuth` a `roles`
|
||||
- API wrapper a API plugin
|
||||
- logger plugin a `useLogger()`
|
||||
- konzistenciu i18n klucov medzi `sk` a `en`
|
||||
|
||||
Odporucany minimalny verify postup pred vacsou zmenou:
|
||||
|
||||
```bash
|
||||
pnpm lint
|
||||
pnpm typecheck
|
||||
pnpm test:run
|
||||
pnpm build
|
||||
```
|
||||
|
||||
Ak chces spustit len novejsie infrastrukturalne testy template-u:
|
||||
|
||||
```bash
|
||||
pnpm vitest run tests/auth.plugin.spec.ts tests/auth.middleware.spec.ts tests/i18n.locales.spec.ts tests/api.plugin.spec.ts tests/logger.plugin.spec.ts tests/use-logger.spec.ts
|
||||
```
|
||||
|
||||
## Ako v tomto template vyvijat
|
||||
|
||||
### Kde upravovat stranky
|
||||
|
||||
Kazdy subor v `app/pages` reprezentuje route.
|
||||
|
||||
Priklad:
|
||||
|
||||
- `app/pages/index.vue`: domovska stranka `/`
|
||||
|
||||
Ak chces pridat novu stranku, vytvor novy `.vue` subor v `app/pages`.
|
||||
|
||||
### Kde upravovat spolocny layout
|
||||
|
||||
Hlavny layout aplikacie je v:
|
||||
|
||||
- `app/layouts/default.vue`
|
||||
|
||||
Tu sa nachadza spolocna hlavicka, prepinac jazyka a prepinac temy. Vsetky stranky renderovane cez `NuxtPage` sa zobrazia v tomto layoute.
|
||||
|
||||
Layout je postaveny na Nuxt UI komponentoch, najma `UBadge` a `USelect`. Korektne obalenie aplikacie cez `UApp` je v `app/app.vue`.
|
||||
|
||||
### Kde upravovat preklady
|
||||
|
||||
Preklady su v:
|
||||
|
||||
- `i18n/locales/sk.json`
|
||||
- `i18n/locales/en.json`
|
||||
|
||||
Projekt pouziva `@nuxtjs/i18n` s jazykmi:
|
||||
|
||||
- `sk` ako default
|
||||
- `en` ako druhy jazyk
|
||||
|
||||
Ak pridas novy text do komponentu, dopln ho do oboch JSON suborov.
|
||||
|
||||
### Kde upravovat temu a vizual
|
||||
|
||||
Globalne styly su nacitane cez `nuxt.config.ts` z:
|
||||
|
||||
- `app/assets/styles/ui.css`
|
||||
- `app/assets/styles/main.scss`
|
||||
|
||||
Subory stylov:
|
||||
|
||||
- `app/assets/styles/ui.css`: nacitanie Tailwind CSS a Nuxt UI vrstvy
|
||||
- `app/assets/styles/_tokens.scss`: lahke app-level tokeny, napr. font, radius a layout rozmery
|
||||
- `app/assets/styles/_theme.scss`: volitelne theme override-y nad Nuxt UI tokenmi
|
||||
- `app/assets/styles/_base.scss`: globalne layout a app-specific styly
|
||||
|
||||
Theme runtime logika je v:
|
||||
|
||||
- Nuxt UI a `useColorMode()`
|
||||
|
||||
Template rozlisuje:
|
||||
|
||||
- preferenciu temy: `light`, `dark`, `system`
|
||||
- vyslednu aktivnu temu: `light` alebo `dark`
|
||||
|
||||
Odporucany pristup je nemenit cely design system rucne, ale nechat Nuxt UI ako zdroj pravdy a upravovat len:
|
||||
|
||||
- `nuxt.config.ts` cez `appConfig.ui.colors` ako prvy krok pre semanticke farby ako `primary` a `neutral`
|
||||
- `_theme.scss` pre male vizualne doladenia nad Nuxt UI tokenmi
|
||||
|
||||
Prakticky to znamena:
|
||||
|
||||
- v `ui.css` nechaj iba `@import "tailwindcss"` a `@import "@nuxt/ui"`
|
||||
- v `nuxt.config.ts` zacni semantickymi farbami a inymi Nuxt nastaveniami
|
||||
- v `_tokens.scss` men spolocne hodnoty ako `--ui-radius`, font alebo layout sirku
|
||||
- v `_theme.scss` men light/dark rozdiely cez Nuxt UI CSS premenne
|
||||
- v `_base.scss` rob app-level layout a globalne utility pre vlastne bloky ako `.shell`, `.page-grid` a podobne
|
||||
|
||||
### Ako funguje prepnutie temy
|
||||
|
||||
Runtime prepnutie temy je postavene na `useColorMode()` a prepinaci v `app/layouts/default.vue`.
|
||||
|
||||
Aktualna preferencia moze byt:
|
||||
|
||||
- `light`
|
||||
- `dark`
|
||||
- `system`
|
||||
|
||||
Pouzitie v komponente:
|
||||
|
||||
```ts
|
||||
const colorMode = useColorMode()
|
||||
|
||||
colorMode.preference = 'dark'
|
||||
```
|
||||
|
||||
Ak chces spravit vlastne tlacidlo na prepnutie temy:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const colorMode = useColorMode()
|
||||
|
||||
function toggleTheme() {
|
||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton @click="toggleTheme">
|
||||
Prepnut temu
|
||||
</UButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Ako menit vizual bez vlastneho design systemu
|
||||
|
||||
Najcastejsie scenare:
|
||||
|
||||
- chces inu primarnu farbu buttonov a aktivnych prvkov:
|
||||
najprv skus `appConfig.ui.colors` v `nuxt.config.ts`
|
||||
- chces jemnejsie texty, tmavsie pozadie alebo iny border v dark mode:
|
||||
zmen Nuxt UI CSS premenne v `_theme.scss`
|
||||
- chces iny radius alebo sirsu app shell:
|
||||
zmen hodnoty v `_tokens.scss`
|
||||
- chces iny layout alebo spacing vlastnych blokov:
|
||||
uprav `_base.scss`
|
||||
|
||||
Priklad zmeny radiusu a layoutu:
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--ui-radius: 1rem;
|
||||
--page-max-width: 1320px;
|
||||
}
|
||||
```
|
||||
|
||||
Priklad jemneho doladenia backgroundu a borderov:
|
||||
|
||||
```scss
|
||||
:root,
|
||||
.light {
|
||||
--ui-bg: #f8fafc;
|
||||
--ui-bg-muted: #f1f5f9;
|
||||
--ui-border: #dbe4ee;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--ui-bg: #0b1220;
|
||||
--ui-bg-muted: #111827;
|
||||
--ui-border: #1f2937;
|
||||
}
|
||||
```
|
||||
|
||||
Priklad zmeny intenzity primarnej farby medzi light a dark modom:
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--ui-primary: var(--ui-color-primary-600);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--ui-primary: var(--ui-color-primary-400);
|
||||
}
|
||||
```
|
||||
|
||||
To je vhodne hlavne vtedy, ked chces nechat Nuxt UI komponenty a ich logiku bez zmeny, ale potrebujes jemne upravit kontrast alebo ton farby.
|
||||
|
||||
### Priklad konfiguracie v tomto template
|
||||
|
||||
Aktualny template drzi semanticke farby v `nuxt.config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
appConfig: {
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
neutral: 'slate'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Tento zapis hovori Nuxt UI, aku paletu ma ma preferovat pre:
|
||||
|
||||
- `color="primary"`
|
||||
- `color="neutral"`
|
||||
- utility ako `text-primary`, `bg-primary`, `text-muted`, `bg-default` a podobne
|
||||
|
||||
Ak by si pri konkretnej verzii Nuxt UI potreboval jemnejsiu kontrolu nad realnym vysledkom, najspolahlivejsia cesta je doplnit CSS tokeny v `_theme.scss`, napr. `--ui-primary`, `--ui-bg` alebo `--ui-border`.
|
||||
|
||||
### Kde upravovat komponenty
|
||||
|
||||
Template pouziva standardne Nuxt UI komponenty ako predvolenu UI vrstvu.
|
||||
|
||||
Najcastejsie pouzite v template:
|
||||
|
||||
- `UButton`
|
||||
- `UCard`
|
||||
- `UInput`
|
||||
- `USelect`
|
||||
- `UFormField`
|
||||
- `UAlert`
|
||||
- `UBadge`
|
||||
|
||||
Pouzitie v komponente:
|
||||
|
||||
```vue
|
||||
<UCard variant="soft">
|
||||
<template #header>
|
||||
<h2>Nadpis</h2>
|
||||
</template>
|
||||
|
||||
<UFormField label="Meno">
|
||||
<UInput v-model="name" />
|
||||
</UFormField>
|
||||
|
||||
<UButton>Ulozit</UButton>
|
||||
</UCard>
|
||||
```
|
||||
|
||||
Ak budes chciet rozsirit UI o vlastne komplexne komponenty, odporucany postup je skladat ich nad Nuxt UI, nie vytvarat paralelnu mini kniznicu zakladnych button/input/card komponentov.
|
||||
|
||||
### Kde upravovat logger
|
||||
|
||||
Logger je pripraveny ako Nuxt plugin a composable:
|
||||
|
||||
- `app/plugins/logger.ts`
|
||||
- `app/composables/useLogger.ts`
|
||||
|
||||
Pouzitie v komponente:
|
||||
|
||||
```ts
|
||||
const logger = useLogger()
|
||||
|
||||
logger.info('Akcia vykonana', { section: 'home' })
|
||||
```
|
||||
|
||||
Logy z klienta idu do konzoly prehliadaca.
|
||||
|
||||
Logger ma aj automaticke testy, ktore overuju prefix, timestamp a spravanie s payloadom aj bez neho.
|
||||
|
||||
### Kde upravovat API a OpenAPI kontrakt
|
||||
|
||||
Zaklad API vrstvy je v:
|
||||
|
||||
- `app/plugins/api.client.ts`
|
||||
- `app/composables/useApi.ts`
|
||||
- `app/types/api.ts`
|
||||
- `api/wrappers`
|
||||
|
||||
OpenAPI priprava je v:
|
||||
|
||||
- `openapi-spec`
|
||||
- `openapi-client`
|
||||
- `openapi-ts.config.ts`
|
||||
|
||||
Template funguje aj bez generovaneho klienta. Predvoleny wrapper `api/wrappers/example.ts` pouziva bezny `fetch` styl cez `$fetch`, ale ma rovnaky tvar ako vrstva, ktoru vies neskor napojit na vygenerovany OpenAPI client.
|
||||
|
||||
API plugin a ukazkovy wrapper maju samostatne Vitest testy, takze zmeny v `runtimeConfig` alebo wrapper rozhrani vies zachytit automaticky.
|
||||
|
||||
Pouzitie v stranke alebo komponente:
|
||||
|
||||
```ts
|
||||
const api = useApi()
|
||||
|
||||
const health = await api.example.getHealth()
|
||||
const welcome = await api.example.getWelcome()
|
||||
```
|
||||
|
||||
Odporucany vzor:
|
||||
|
||||
- komponent alebo page vola `useApi()`
|
||||
- `useApi()` vracia klientov injectnutych z `app/plugins/api.client.ts`
|
||||
- konkretne HTTP volania alebo OpenAPI klient je schovany vo `api/wrappers`
|
||||
|
||||
Tymto sposobom ostane UI oddelene od detailov backend komunikacie.
|
||||
|
||||
Zakladne env pre API:
|
||||
|
||||
- `NUXT_PUBLIC_API_BASE_URL`
|
||||
- `NUXT_PUBLIC_API_TIMEOUT_MS`
|
||||
|
||||
Zakladny generator prikaz:
|
||||
|
||||
```bash
|
||||
pnpm generate:api
|
||||
```
|
||||
|
||||
Odporucany postup:
|
||||
|
||||
1. nahrad `openapi-spec/example-api.yaml` vlastnou specifikaciou
|
||||
2. uprav `openapi-ts.config.ts`
|
||||
3. spusti `pnpm generate:api`
|
||||
4. napoj vygenerovaneho klienta cez `api/wrappers`
|
||||
|
||||
Ak uz mas backend kontrakt cez OpenAPI, odporucany sposob integracie je:
|
||||
|
||||
1. pridaj alebo aktualizuj `.yaml` specifikaciu v `openapi-spec`
|
||||
2. vygeneruj klienta do `openapi-client`
|
||||
3. v `api/wrappers` vytvor tenku vrstvu, ktora premapuje volania na domenove funkcie
|
||||
4. z komponentov volaj iba `useApi()`, nie vygenerovany klient priamo
|
||||
|
||||
Poznamka ku gitu:
|
||||
|
||||
- obsah `openapi-client` je v template ignorovany, pretoze ide o generovane subory
|
||||
- v gite ostava len `openapi-client/README.md`, aby bolo jasne, na co adresar sluzi
|
||||
- ak bude tvoj tim chciet verzovat aj generovanych klientov, uprav `.gitignore`
|
||||
|
||||
### Kde upravovat autorizaciu
|
||||
|
||||
Auth vrstva je zamerne volitelna. Ak ju projekt nepotrebuje, ostava vypnuta.
|
||||
|
||||
Zakladne casti su v:
|
||||
|
||||
- `app/plugins/auth.ts`
|
||||
- `app/composables/useAuth.ts`
|
||||
- `app/middleware/auth.global.ts`
|
||||
- `app/stores/auth.ts`
|
||||
- `app/types/auth.ts`
|
||||
|
||||
Rezim auth sa nastavuje cez `.env`:
|
||||
|
||||
- `NUXT_PUBLIC_AUTH_MODE=disabled`: auth je vypnuta a middleware nic nevynucuje
|
||||
- `NUXT_PUBLIC_AUTH_MODE=mock`: lokalny vyvoj s mock userom
|
||||
- `NUXT_PUBLIC_AUTH_MODE=userinfo`: nacitanie usera z endpointu `NUXT_PUBLIC_AUTH_USERINFO_URL`
|
||||
|
||||
Pouzitie v komponente:
|
||||
|
||||
```ts
|
||||
const auth = useAuth()
|
||||
|
||||
await auth.ensureInitialized()
|
||||
|
||||
if (auth.isAuthenticated.value) {
|
||||
console.log(auth.user.value?.email)
|
||||
}
|
||||
```
|
||||
|
||||
Pouzitie cez store:
|
||||
|
||||
```ts
|
||||
const authStore = useAuthStore()
|
||||
|
||||
if (authStore.hasRole('ADMIN')) {
|
||||
// zobraz admin cast rozhrania
|
||||
}
|
||||
```
|
||||
|
||||
Ak chces ochranit konkretnu stranku, pouzi route meta:
|
||||
|
||||
```ts
|
||||
definePageMeta({
|
||||
requiresAuth: true
|
||||
})
|
||||
```
|
||||
|
||||
Alebo s rolami:
|
||||
|
||||
```ts
|
||||
definePageMeta({
|
||||
requiresAuth: true,
|
||||
roles: ['ADMIN']
|
||||
})
|
||||
```
|
||||
|
||||
Bezny scenar:
|
||||
|
||||
- pocas lokalneho vyvoja nastav `NUXT_PUBLIC_AUTH_MODE=mock`
|
||||
- pre projekt bez prihlasenia nechaj `NUXT_PUBLIC_AUTH_MODE=disabled`
|
||||
- pre realne SSO alebo proxy endpoint pouzi `NUXT_PUBLIC_AUTH_MODE=userinfo`
|
||||
|
||||
Auth middleware sa spusta globalne, ale zasahuje len na routach s `requiresAuth` alebo `roles`.
|
||||
|
||||
### Kde upravovat globalny stav cez Pinia
|
||||
|
||||
Pinia sa hodi na stav, ktory je zdielany vo viacerych castiach aplikacie.
|
||||
|
||||
Pripravene store-y:
|
||||
|
||||
- `app/stores/auth.ts`: user, role, session stav
|
||||
- `app/stores/ui.ts`: loading a notifikacie
|
||||
|
||||
Pouzitie `ui` store:
|
||||
|
||||
```ts
|
||||
const uiStore = useUiStore()
|
||||
|
||||
uiStore.startLoading()
|
||||
|
||||
try {
|
||||
uiStore.pushNotification({
|
||||
title: 'Ulozene',
|
||||
message: 'Zmena bola uspesne ulozena.',
|
||||
tone: 'success'
|
||||
})
|
||||
} finally {
|
||||
uiStore.stopLoading()
|
||||
}
|
||||
```
|
||||
|
||||
Pouzitie `auth` store:
|
||||
|
||||
```ts
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const userName = authStore.displayName
|
||||
const isLoggedIn = authStore.isAuthenticated
|
||||
```
|
||||
|
||||
Odporucanie:
|
||||
|
||||
- lokalny stav formulára nechaj v komponente
|
||||
- zdielany stav typu user, loading, notifikacie alebo filtre dava zmysel drzat v store
|
||||
|
||||
### Ako pouzit Nuxt UI v tomto template
|
||||
|
||||
Nuxt UI je zapojene ako Nuxt modul a je predvolenou UI vrstvou template.
|
||||
|
||||
Zakladne pouzitie:
|
||||
|
||||
1. do page alebo komponentu pouzi `U*` komponenty priamo
|
||||
2. nebuduj dalsiu vrstvu `BaseButton`, `BaseInput`, `BaseCard`, ak na to nie je silny dovod
|
||||
3. vlastne komplikovane komponenty, napriklad diagramy alebo specialne editory, stavaj ako bezne Vue komponenty a Nuxt UI pouzi na ich okolie, toolbar, formulare a akcie
|
||||
|
||||
Priklad:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="stack">
|
||||
<p class="section-kicker">Demo</p>
|
||||
<h2>Nuxt UI komponent</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UAlert
|
||||
color="info"
|
||||
variant="soft"
|
||||
title="Stav"
|
||||
description="Komponent je pripraveny."
|
||||
/>
|
||||
</UCard>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Kde upravovat hlavnu konfiguraciu
|
||||
|
||||
Hlavne nastavenia su v:
|
||||
|
||||
- `nuxt.config.ts`
|
||||
|
||||
Tu upravis napr.:
|
||||
|
||||
- globalne CSS
|
||||
- Nuxt moduly
|
||||
- title a meta tagy
|
||||
- i18n konfiguraciu
|
||||
- devtools spravanie
|
||||
|
||||
## Odporucany workflow
|
||||
|
||||
Pri beznej praci sa osvedci tento postup:
|
||||
|
||||
1. Spusti `pnpm dev`.
|
||||
2. Otvor aplikaciu v prehliadaci.
|
||||
3. Men stranky v `app/pages`, layout v `app/layouts` a texty v `i18n/locales`.
|
||||
4. Priebežne kontroluj typy a lint:
|
||||
|
||||
```bash
|
||||
pnpm typecheck
|
||||
pnpm lint
|
||||
```
|
||||
|
||||
5. Pred odovzdanim alebo commitom over:
|
||||
|
||||
```bash
|
||||
pnpm format
|
||||
pnpm test:run
|
||||
pnpm build
|
||||
```
|
||||
|
||||
## VS Code
|
||||
|
||||
Repozitar obsahuje:
|
||||
|
||||
- `.vscode/settings.json`: workspace nastavenia
|
||||
- `.vscode/extensions.json`: odporucane rozsirrenia
|
||||
- `.vscode/launch.json`: jednoduche spustenie `pnpm dev` z VS Code
|
||||
|
||||
Predinstalovane a odporucane rozsirrenia su zamerane najma na:
|
||||
|
||||
- Vue a TypeScript
|
||||
- ESLint a Prettier
|
||||
- i18n preklady
|
||||
- Vitest
|
||||
|
||||
## Poznamky k dev rezimu
|
||||
|
||||
- `pnpm install` spusta `postinstall`, ktory vola `nuxt prepare`
|
||||
- OpenAPI codegen ide cez `@hey-api/openapi-ts`, takze netreba Javu
|
||||
- prvy start po cistom install moze byt pomalsi
|
||||
- prvy Vite build sa moze spustit az pri prvom otvoreni stranky
|
||||
- ak sa objavi problem s viacerymi servermi, ukonci beziace Node alebo Nuxt procesy vo svojom terminali alebo cez Spravcu uloh a spusti iba jeden `pnpm dev`
|
||||
|
||||
## Co typicky zmenit ako prve
|
||||
|
||||
Po vytvoreni noveho projektu z template sa obvykle meni:
|
||||
|
||||
- branding a texty v prekladoch
|
||||
- titulky a meta udaje
|
||||
- farby, spacing a tokeny v stylech
|
||||
- obsah `app/pages/index.vue`
|
||||
- pouzitie a konfiguracia Nuxt UI komponentov podla potrieb projektu
|
||||
- vlastne feature komponenty v `app/components`
|
||||
- doplnenie dalsich stranok, API endpointov a testov
|
||||
@@ -0,0 +1,39 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
async function loadPlugin() {
|
||||
vi.resetModules()
|
||||
vi.stubGlobal('defineNuxtPlugin', (setup: unknown) => setup)
|
||||
|
||||
return (await import('../app/plugins/api.client')).default
|
||||
}
|
||||
|
||||
describe('api plugin', () => {
|
||||
beforeEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
|
||||
it('creates API clients from runtime config values', async () => {
|
||||
vi.stubGlobal('useRuntimeConfig', () => ({
|
||||
public: {
|
||||
apiBaseUrl: 'https://api.example.test',
|
||||
apiTimeoutMs: 4321
|
||||
}
|
||||
}))
|
||||
|
||||
const plugin = await loadPlugin()
|
||||
const { provide } = plugin()
|
||||
|
||||
const fetchMock = vi.fn().mockResolvedValue({ status: 'ok' })
|
||||
vi.stubGlobal('$fetch', fetchMock)
|
||||
|
||||
const response = await provide.api.example.getHealth()
|
||||
|
||||
expect(response).toEqual({ status: 'ok' })
|
||||
expect(fetchMock).toHaveBeenCalledWith('/health', {
|
||||
baseURL: 'https://api.example.test',
|
||||
signal: undefined,
|
||||
timeout: 4321
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,114 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { computed } from 'vue'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { useAuthStore } from '../app/stores/auth'
|
||||
|
||||
async function loadMiddleware() {
|
||||
vi.resetModules()
|
||||
vi.stubGlobal('defineNuxtRouteMiddleware', (setup: unknown) => setup)
|
||||
|
||||
return (await import('../app/middleware/auth.global')).default
|
||||
}
|
||||
|
||||
function createAuthClient(overrides: Partial<ReturnType<typeof buildAuthClient>> = {}) {
|
||||
return {
|
||||
...buildAuthClient(),
|
||||
...overrides
|
||||
}
|
||||
}
|
||||
|
||||
function buildAuthClient() {
|
||||
return {
|
||||
isEnabled: true,
|
||||
isAuthenticated: computed(() => false),
|
||||
ensureInitialized: vi.fn().mockResolvedValue(undefined),
|
||||
login: vi.fn().mockResolvedValue(undefined)
|
||||
}
|
||||
}
|
||||
|
||||
describe('auth middleware', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.restoreAllMocks()
|
||||
vi.unstubAllGlobals()
|
||||
vi.stubGlobal('useAuthStore', useAuthStore)
|
||||
})
|
||||
|
||||
it('skips public routes and disabled auth', async () => {
|
||||
const publicAuth = createAuthClient()
|
||||
vi.stubGlobal('useAuth', () => publicAuth)
|
||||
|
||||
const middleware = await loadMiddleware()
|
||||
|
||||
await expect(middleware({ meta: { public: true } })).resolves.toBeUndefined()
|
||||
expect(publicAuth.ensureInitialized).not.toHaveBeenCalled()
|
||||
|
||||
const disabledAuth = createAuthClient({ isEnabled: false })
|
||||
vi.stubGlobal('useAuth', () => disabledAuth)
|
||||
|
||||
await expect(middleware({ meta: { requiresAuth: true } })).resolves.toBeUndefined()
|
||||
expect(disabledAuth.ensureInitialized).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('requests login for unauthenticated protected routes', async () => {
|
||||
const auth = createAuthClient({
|
||||
isAuthenticated: computed(() => false)
|
||||
})
|
||||
vi.stubGlobal('useAuth', () => auth)
|
||||
|
||||
const middleware = await loadMiddleware()
|
||||
|
||||
await expect(middleware({ meta: { requiresAuth: true } })).resolves.toBeUndefined()
|
||||
|
||||
expect(auth.ensureInitialized).toHaveBeenCalledOnce()
|
||||
expect(auth.login).toHaveBeenCalledOnce()
|
||||
})
|
||||
|
||||
it('allows authenticated users with a matching role', async () => {
|
||||
const authStore = useAuthStore()
|
||||
authStore.setUser({
|
||||
id: 'user-1',
|
||||
roles: ['ADMIN']
|
||||
})
|
||||
|
||||
const auth = createAuthClient({
|
||||
isAuthenticated: computed(() => true)
|
||||
})
|
||||
vi.stubGlobal('useAuth', () => auth)
|
||||
|
||||
const middleware = await loadMiddleware()
|
||||
|
||||
await expect(middleware({ meta: { roles: ['ADMIN'] } })).resolves.toBeUndefined()
|
||||
|
||||
expect(auth.ensureInitialized).toHaveBeenCalledOnce()
|
||||
expect(auth.login).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('throws a 403 error for authenticated users without a required role', async () => {
|
||||
const authStore = useAuthStore()
|
||||
authStore.setUser({
|
||||
id: 'user-2',
|
||||
roles: ['USER']
|
||||
})
|
||||
|
||||
const createErrorMock = vi.fn((error: { statusCode: number; statusMessage: string }) => error)
|
||||
vi.stubGlobal('createError', createErrorMock)
|
||||
|
||||
const auth = createAuthClient({
|
||||
isAuthenticated: computed(() => true)
|
||||
})
|
||||
vi.stubGlobal('useAuth', () => auth)
|
||||
|
||||
const middleware = await loadMiddleware()
|
||||
|
||||
await expect(middleware({ meta: { roles: ['ADMIN'] } })).rejects.toMatchObject({
|
||||
statusCode: 403,
|
||||
statusMessage: 'Forbidden'
|
||||
})
|
||||
|
||||
expect(createErrorMock).toHaveBeenCalledWith({
|
||||
statusCode: 403,
|
||||
statusMessage: 'Forbidden'
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,152 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { useAuthStore, type AuthUser } from '../app/stores/auth'
|
||||
|
||||
type AuthPlugin = typeof import('../app/plugins/auth').default
|
||||
|
||||
function createRuntimeConfig(authMode: string | undefined = undefined) {
|
||||
return {
|
||||
public: {
|
||||
authMode,
|
||||
authLoginUrl: '/login',
|
||||
authLogoutUrl: '/logout',
|
||||
authUserinfoUrl: '/api/auth/me'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPlugin() {
|
||||
vi.resetModules()
|
||||
vi.stubGlobal('defineNuxtPlugin', (setup: AuthPlugin) => setup)
|
||||
|
||||
return (await import('../app/plugins/auth')).default
|
||||
}
|
||||
|
||||
describe('auth plugin', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.restoreAllMocks()
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
|
||||
it('initializes a disabled auth client and keeps auth turned off', async () => {
|
||||
vi.stubGlobal('useRuntimeConfig', () => createRuntimeConfig())
|
||||
|
||||
const plugin = await loadPlugin()
|
||||
const { provide } = plugin()
|
||||
const auth = provide.auth
|
||||
|
||||
expect(auth.mode).toBe('disabled')
|
||||
expect(auth.isEnabled).toBe(false)
|
||||
|
||||
await auth.ensureInitialized()
|
||||
|
||||
const store = useAuthStore()
|
||||
expect(auth.isReady.value).toBe(true)
|
||||
expect(auth.isAuthenticated.value).toBe(false)
|
||||
expect(store.isInitialized).toBe(true)
|
||||
expect(store.user).toBeNull()
|
||||
})
|
||||
|
||||
it('uses a mock user in mock mode and supports login and logout locally', async () => {
|
||||
vi.stubGlobal('useRuntimeConfig', () => createRuntimeConfig('mock'))
|
||||
|
||||
const plugin = await loadPlugin()
|
||||
const { provide } = plugin()
|
||||
const auth = provide.auth
|
||||
|
||||
await auth.ensureInitialized()
|
||||
|
||||
const store = useAuthStore()
|
||||
expect(auth.mode).toBe('mock')
|
||||
expect(auth.isEnabled).toBe(true)
|
||||
expect(auth.isAuthenticated.value).toBe(true)
|
||||
expect(store.user).toMatchObject({
|
||||
id: 'mock-user',
|
||||
email: 'mock@example.com',
|
||||
roles: ['USER']
|
||||
})
|
||||
|
||||
auth.logout()
|
||||
expect(store.user).toBeNull()
|
||||
|
||||
auth.login()
|
||||
expect(store.user).toMatchObject({
|
||||
id: 'mock-user',
|
||||
email: 'mock@example.com'
|
||||
})
|
||||
})
|
||||
|
||||
it('loads the current user from the userinfo endpoint in userinfo mode', async () => {
|
||||
const fetchMock = vi.fn().mockResolvedValue({
|
||||
id: 'user-1',
|
||||
email: 'john@example.com',
|
||||
roles: ['USER']
|
||||
} satisfies AuthUser)
|
||||
|
||||
vi.stubGlobal('useRuntimeConfig', () => createRuntimeConfig('userinfo'))
|
||||
vi.stubGlobal('$fetch', fetchMock)
|
||||
|
||||
const plugin = await loadPlugin()
|
||||
const { provide } = plugin()
|
||||
const auth = provide.auth
|
||||
|
||||
await auth.ensureInitialized()
|
||||
|
||||
const store = useAuthStore()
|
||||
expect(fetchMock).toHaveBeenCalledWith('/api/auth/me', {
|
||||
credentials: 'include'
|
||||
})
|
||||
expect(auth.isAuthenticated.value).toBe(true)
|
||||
expect(store.user).toMatchObject({
|
||||
id: 'user-1',
|
||||
email: 'john@example.com'
|
||||
})
|
||||
})
|
||||
|
||||
it('falls back to an anonymous session when userinfo loading fails', async () => {
|
||||
const fetchMock = vi.fn().mockRejectedValue(new Error('network error'))
|
||||
|
||||
vi.stubGlobal('useRuntimeConfig', () => createRuntimeConfig('userinfo'))
|
||||
vi.stubGlobal('$fetch', fetchMock)
|
||||
|
||||
const plugin = await loadPlugin()
|
||||
const { provide } = plugin()
|
||||
const auth = provide.auth
|
||||
|
||||
await auth.ensureInitialized()
|
||||
|
||||
const store = useAuthStore()
|
||||
expect(auth.isReady.value).toBe(true)
|
||||
expect(auth.isAuthenticated.value).toBe(false)
|
||||
expect(store.isInitialized).toBe(true)
|
||||
expect(store.user).toBeNull()
|
||||
})
|
||||
|
||||
it('redirects login and logout in userinfo mode', async () => {
|
||||
vi.stubGlobal('useRuntimeConfig', () => createRuntimeConfig('userinfo'))
|
||||
vi.stubGlobal('$fetch', vi.fn().mockResolvedValue(null))
|
||||
vi.stubGlobal('window', {
|
||||
location: {
|
||||
href: ''
|
||||
}
|
||||
})
|
||||
|
||||
const plugin = await loadPlugin()
|
||||
const { provide } = plugin()
|
||||
const auth = provide.auth
|
||||
|
||||
auth.login()
|
||||
expect(window.location.href).toBe('/login')
|
||||
|
||||
const store = useAuthStore()
|
||||
store.setUser({
|
||||
id: 'user-2',
|
||||
roles: ['USER']
|
||||
})
|
||||
|
||||
auth.logout()
|
||||
expect(window.location.href).toBe('/logout')
|
||||
expect(store.user).toBeNull()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,67 @@
|
||||
import { beforeEach, describe, expect, it } from 'vitest'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { useAuthStore, type AuthUser } from '../app/stores/auth'
|
||||
|
||||
describe('useAuthStore', () => {
|
||||
const baseUser: AuthUser = {
|
||||
id: 'user-1',
|
||||
email: 'john@example.com',
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
roles: ['USER', 'ADMIN']
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
})
|
||||
|
||||
it('initializes authenticated session state from a user', () => {
|
||||
const store = useAuthStore()
|
||||
|
||||
store.initialize(baseUser)
|
||||
|
||||
expect(store.isInitialized).toBe(true)
|
||||
expect(store.isAuthenticated).toBe(true)
|
||||
expect(store.user).toEqual(baseUser)
|
||||
expect(store.roles).toEqual(['USER', 'ADMIN'])
|
||||
expect(store.displayName).toBe('John Doe')
|
||||
})
|
||||
|
||||
it('falls back to email or id when full name is not available', () => {
|
||||
const store = useAuthStore()
|
||||
|
||||
store.setUser({
|
||||
id: 'user-2',
|
||||
email: 'fallback@example.com',
|
||||
roles: ['USER']
|
||||
})
|
||||
|
||||
expect(store.displayName).toBe('fallback@example.com')
|
||||
|
||||
store.setUser({
|
||||
id: 'user-3',
|
||||
roles: ['USER']
|
||||
})
|
||||
|
||||
expect(store.displayName).toBe('user-3')
|
||||
})
|
||||
|
||||
it('checks roles and clears session safely', () => {
|
||||
const store = useAuthStore()
|
||||
|
||||
store.initialize(baseUser)
|
||||
|
||||
expect(store.hasRole('ADMIN')).toBe(true)
|
||||
expect(store.hasRole('GUEST')).toBe(false)
|
||||
expect(store.hasAnyRole(['GUEST', 'ADMIN'])).toBe(true)
|
||||
expect(store.hasAnyRole(['GUEST'])).toBe(false)
|
||||
|
||||
store.clearSession()
|
||||
|
||||
expect(store.isInitialized).toBe(true)
|
||||
expect(store.isAuthenticated).toBe(false)
|
||||
expect(store.user).toBeNull()
|
||||
expect(store.roles).toEqual([])
|
||||
expect(store.displayName).toBe('')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,47 @@
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { createExampleApi } from '../api/wrappers/example'
|
||||
|
||||
describe('createExampleApi', () => {
|
||||
afterEach(() => {
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
|
||||
it('calls the expected endpoint configuration for getHealth', async () => {
|
||||
const fetchMock = vi.fn().mockResolvedValue({ status: 'ok' })
|
||||
vi.stubGlobal('$fetch', fetchMock)
|
||||
|
||||
const api = createExampleApi({
|
||||
baseURL: '/api',
|
||||
timeoutMs: 10_000
|
||||
})
|
||||
const controller = new AbortController()
|
||||
|
||||
const response = await api.getHealth({ signal: controller.signal })
|
||||
|
||||
expect(response).toEqual({ status: 'ok' })
|
||||
expect(fetchMock).toHaveBeenCalledWith('/health', {
|
||||
baseURL: '/api',
|
||||
signal: controller.signal,
|
||||
timeout: 10_000
|
||||
})
|
||||
})
|
||||
|
||||
it('calls the expected endpoint configuration for getWelcome', async () => {
|
||||
const fetchMock = vi.fn().mockResolvedValue({ message: 'Welcome' })
|
||||
vi.stubGlobal('$fetch', fetchMock)
|
||||
|
||||
const api = createExampleApi({
|
||||
baseURL: 'https://example.test',
|
||||
timeoutMs: 5_000
|
||||
})
|
||||
|
||||
const response = await api.getWelcome()
|
||||
|
||||
expect(response).toEqual({ message: 'Welcome' })
|
||||
expect(fetchMock).toHaveBeenCalledWith('/welcome', {
|
||||
baseURL: 'https://example.test',
|
||||
signal: undefined,
|
||||
timeout: 5_000
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,29 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import en from '../i18n/locales/en.json'
|
||||
import sk from '../i18n/locales/sk.json'
|
||||
|
||||
type JsonValue = string | number | boolean | null | JsonObject | JsonValue[]
|
||||
type JsonObject = Record<string, JsonValue>
|
||||
|
||||
function collectLeafPaths(value: JsonValue, prefix = ''): string[] {
|
||||
if (Array.isArray(value)) {
|
||||
return value.flatMap((item, index) => collectLeafPaths(item, `${prefix}[${index}]`))
|
||||
}
|
||||
|
||||
if (value !== null && typeof value === 'object') {
|
||||
return Object.entries(value as JsonObject).flatMap(([key, nestedValue]) =>
|
||||
collectLeafPaths(nestedValue, prefix ? `${prefix}.${key}` : key)
|
||||
)
|
||||
}
|
||||
|
||||
return [prefix]
|
||||
}
|
||||
|
||||
describe('i18n locale files', () => {
|
||||
it('keep the same translation key structure in slovak and english', () => {
|
||||
const skPaths = collectLeafPaths(sk as JsonObject).sort()
|
||||
const enPaths = collectLeafPaths(en as JsonObject).sort()
|
||||
|
||||
expect(skPaths).toEqual(enPaths)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,52 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
async function loadPlugin() {
|
||||
vi.resetModules()
|
||||
vi.stubGlobal('defineNuxtPlugin', (setup: unknown) => setup)
|
||||
|
||||
return (await import('../app/plugins/logger')).default
|
||||
}
|
||||
|
||||
describe('logger plugin', () => {
|
||||
beforeEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
|
||||
it('logs messages with the expected prefix and payload', async () => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date('2026-03-29T12:00:00.000Z'))
|
||||
|
||||
const infoSpy = vi.spyOn(console, 'info').mockImplementation(() => {})
|
||||
|
||||
const plugin = await loadPlugin()
|
||||
const { provide } = plugin()
|
||||
|
||||
provide.logger.info('Action completed', { section: 'home' })
|
||||
|
||||
expect(infoSpy).toHaveBeenCalledWith(
|
||||
'[template:info] 2026-03-29T12:00:00.000Z Action completed',
|
||||
{ section: 'home' }
|
||||
)
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('logs messages without payload as a single console argument', async () => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date('2026-03-29T12:00:00.000Z'))
|
||||
|
||||
const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
|
||||
|
||||
const plugin = await loadPlugin()
|
||||
const { provide } = plugin()
|
||||
|
||||
provide.logger.warn('Missing optional data')
|
||||
|
||||
expect(warnSpy).toHaveBeenCalledWith(
|
||||
'[template:warn] 2026-03-29T12:00:00.000Z Missing optional data'
|
||||
)
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,69 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { useUiStore } from '../app/stores/ui'
|
||||
|
||||
describe('useUiStore', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.restoreAllMocks()
|
||||
})
|
||||
|
||||
it('tracks page loading state across nested requests', () => {
|
||||
const store = useUiStore()
|
||||
|
||||
expect(store.isPageLoading).toBe(false)
|
||||
|
||||
store.startLoading()
|
||||
store.startLoading()
|
||||
|
||||
expect(store.isPageLoading).toBe(true)
|
||||
|
||||
store.stopLoading()
|
||||
expect(store.isPageLoading).toBe(true)
|
||||
|
||||
store.stopLoading()
|
||||
store.stopLoading()
|
||||
expect(store.isPageLoading).toBe(false)
|
||||
|
||||
store.setLoading(true)
|
||||
expect(store.isPageLoading).toBe(true)
|
||||
|
||||
store.setLoading(false)
|
||||
expect(store.isPageLoading).toBe(false)
|
||||
})
|
||||
|
||||
it('creates notifications with a default tone and removes them by id', () => {
|
||||
const store = useUiStore()
|
||||
|
||||
vi.spyOn(crypto, 'randomUUID').mockReturnValue('generated-id')
|
||||
|
||||
const id = store.pushNotification({
|
||||
title: 'Saved',
|
||||
message: 'Changes were stored.'
|
||||
})
|
||||
|
||||
expect(id).toBe('generated-id')
|
||||
expect(store.notifications).toEqual([
|
||||
{
|
||||
id: 'generated-id',
|
||||
title: 'Saved',
|
||||
message: 'Changes were stored.',
|
||||
tone: 'info'
|
||||
}
|
||||
])
|
||||
|
||||
store.pushNotification({
|
||||
id: 'custom-id',
|
||||
title: 'Warning',
|
||||
tone: 'warning'
|
||||
})
|
||||
|
||||
expect(store.notifications).toHaveLength(2)
|
||||
|
||||
store.removeNotification('generated-id')
|
||||
expect(store.notifications.map((notification) => notification.id)).toEqual(['custom-id'])
|
||||
|
||||
store.clearNotifications()
|
||||
expect(store.notifications).toEqual([])
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,24 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { useLogger } from '../app/composables/useLogger'
|
||||
|
||||
describe('useLogger', () => {
|
||||
beforeEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
|
||||
it('returns the logger injected into the Nuxt app', () => {
|
||||
const logger = {
|
||||
debug: vi.fn(),
|
||||
info: vi.fn(),
|
||||
warn: vi.fn(),
|
||||
error: vi.fn()
|
||||
}
|
||||
|
||||
vi.stubGlobal('useNuxtApp', () => ({
|
||||
$logger: logger
|
||||
}))
|
||||
|
||||
expect(useLogger()).toBe(logger)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "./.nuxt/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
export default defineConfig({
|
||||
resolve: {
|
||||
alias: {
|
||||
'~': fileURLToPath(new URL('./app', import.meta.url)),
|
||||
'@': fileURLToPath(new URL('./app', import.meta.url)),
|
||||
'~~': fileURLToPath(new URL('./', import.meta.url)),
|
||||
'@@': fileURLToPath(new URL('./', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user