@nuxt-tmpl/nuxt 0.0.5

package/dist/module.d.mts

@@ -0,0 +1,25 @@
+import * as nuxt_schema from 'nuxt/schema';
+
+interface NuxtTmplOptions {
+    auth?: {
+        enabled?: boolean;
+        afterSignInRoute?: string;
+        guestRoutes?: string[];
+        publicRoutes?: string[];
+    };
+    apiResponse?: {
+        enabled?: boolean;
+    };
+    logging?: {
+        enabled?: boolean;
+    };
+}
+declare module '#app' {
+    interface PageMeta {
+        auth?: 'guest' | 'public' | 'required';
+    }
+}
+declare const _default: nuxt_schema.NuxtModule<NuxtTmplOptions, NuxtTmplOptions, false>;
+
+export { _default as default };
+export type { NuxtTmplOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@nuxt-tmpl/nuxt",
+  "configKey": "nuxtTmpl",
+  "version": "0.0.5",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,177 @@
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { defineNuxtModule, createResolver, addImports, addComponentsDir, addPlugin, addLayout, addServerHandler, addTemplate, addServerPlugin, addRouteMiddleware, extendPages, addServerImportsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@nuxt-tmpl/nuxt",
+    configKey: "nuxtTmpl"
+  },
+  defaults: {
+    auth: { enabled: true, afterSignInRoute: "/dashboard" },
+    apiResponse: { enabled: true },
+    logging: { enabled: false }
+  },
+  moduleDependencies(nuxt) {
+    const provider = process.env.NUXT_PUBLIC_AUTH_PROVIDER || "";
+    if (provider !== "clerk")
+      return {};
+    const publishableKey = process.env.NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+    if (!publishableKey) {
+      throw new Error(
+        "[nuxt-tmpl] NUXT_PUBLIC_AUTH_PROVIDER=clerk requires NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY to be set"
+      );
+    }
+    const afterSignInRoute = nuxt.options.nuxtTmpl?.auth?.afterSignInRoute ?? "/dashboard";
+    return {
+      "@clerk/nuxt": {
+        defaults: {
+          publishableKey,
+          afterSignOutUrl: "/",
+          signInForceRedirectUrl: afterSignInRoute,
+          signInFallbackRedirectUrl: afterSignInRoute
+        }
+      }
+    };
+  },
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const provider = process.env.NUXT_PUBLIC_AUTH_PROVIDER || "";
+    nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {};
+    nuxt.options.runtimeConfig.public.authProvider = provider;
+    nuxt.options.runtimeConfig.public.baseUrl = process.env.BASE_URL || "";
+    nuxt.options.runtimeConfig.public.nuxtTmpl = {
+      afterSignInRoute: options.auth?.afterSignInRoute ?? "/dashboard",
+      guestRoutes: options.auth?.guestRoutes ?? [],
+      publicRoutes: options.auth?.publicRoutes ?? [],
+      ...nuxt.options.runtimeConfig.public.nuxtTmpl || {}
+    };
+    if (provider === "clerk") {
+      nuxt.options.runtimeConfig.clerk = {
+        secretKey: process.env.NUXT_CLERK_SECRET_KEY,
+        ...nuxt.options.runtimeConfig.clerk || {}
+      };
+    }
+    addImports([
+      {
+        name: "defineApiHandler",
+        as: "defineApiHandler",
+        from: resolve("./runtime/server/utils/handler")
+      }
+    ]);
+    if (options.auth?.enabled !== false) {
+      addComponentsDir({
+        path: resolve("./runtime/components/auth"),
+        prefix: "Auth"
+      });
+      addPlugin(resolve("./runtime/plugins/auth"));
+      addImports([
+        {
+          name: "useAuth",
+          as: "useAuth",
+          from: resolve("./runtime/composables/useAuth")
+        },
+        {
+          name: "provideAuthForms",
+          as: "provideAuthForms",
+          from: resolve("./runtime/composables/useAuthForms")
+        },
+        {
+          name: "useAuthForms",
+          as: "useAuthForms",
+          from: resolve("./runtime/composables/useAuthForms")
+        },
+        {
+          name: "getAuthMode",
+          as: "getAuthMode",
+          from: resolve("./runtime/utils/authRoute")
+        }
+      ]);
+      addLayout(
+        { src: resolve("./runtime/layouts/default.vue") },
+        "ipa-default"
+      );
+      addServerHandler({
+        middleware: true,
+        handler: resolve("./runtime/server/middleware/auth")
+      });
+      const tmpl = addTemplate({
+        filename: "nuxt-tmpl/auth-guards.mjs",
+        write: true,
+        getContents: () => generateAuthGuards(nuxt, resolve)
+      });
+      addServerPlugin(tmpl.dst);
+      addRouteMiddleware({
+        name: "auth",
+        path: resolve("./runtime/middleware/auth"),
+        global: true
+      });
+      extendPages((pages) => {
+        const hasSignIn = pages.some((p) => p.path.startsWith("/sign-in"));
+        const hasSignUp = pages.some((p) => p.path.startsWith("/sign-up"));
+        if (!hasSignIn) {
+          pages.push({
+            name: "sign-in",
+            path: "/sign-in/:slug(.*)*",
+            file: resolve("./runtime/pages/sign-in.vue")
+          });
+        }
+        if (!hasSignUp) {
+          pages.push({
+            name: "sign-up",
+            path: "/sign-up/:slug(.*)*",
+            file: resolve("./runtime/pages/sign-up.vue")
+          });
+        }
+      });
+    }
+    if (options.apiResponse?.enabled !== false) {
+      addServerPlugin(resolve("./runtime/server/plugins/api-response"));
+    }
+    if (options.logging?.enabled) {
+      addServerHandler({
+        middleware: true,
+        handler: resolve("./runtime/server/middleware/log")
+      });
+    }
+    addServerImportsDir(resolve("./runtime/server/utils"));
+  }
+});
+function generateAuthGuards(nuxt, resolve) {
+  const r = (path) => pathToFileURL(`${resolve(path)}.js`).href;
+  const imports = [
+    `import { registerAuthGuard } from ${JSON.stringify(r("./runtime/server/utils/auth"))}`
+  ];
+  const registrations = [];
+  imports.push(
+    `import { clerkGuard } from ${JSON.stringify(r("./runtime/server/guards/clerk"))}`
+  );
+  registrations.push(`  registerAuthGuard('clerk', clerkGuard)`);
+  imports.push(
+    `import { supabaseGuard } from ${JSON.stringify(r("./runtime/server/guards/supabase"))}`
+  );
+  registrations.push(`  registerAuthGuard('supabase', supabaseGuard)`);
+  const sharedDir = nuxt.options.alias?.["#shared"];
+  if (sharedDir) {
+    const fileExists = [".ts", ".mjs", ".js"].some(
+      (ext) => existsSync(join(sharedDir, `utils/better-auth${ext}`))
+    );
+    if (fileExists) {
+      imports.push(
+        `import { betterAuthGuard } from ${JSON.stringify(r("./runtime/server/guards/better-auth"))}`
+      );
+      registrations.push(`  registerAuthGuard('better-auth', betterAuthGuard)`);
+    }
+  }
+  return [
+    ...imports,
+    "",
+    "const plugin = (nitroApp) => {",
+    ...registrations,
+    "}",
+    "export default plugin"
+  ].join("\n");
+}
+
+export { module$1 as default };

package/dist/runtime/components/auth/AuthGuard.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { useAuth } from "#imports";
+const provider = useAuth();
+</script>
+
+<template>
+  <slot v-if="provider.isSignedIn.value" />
+  <slot v-else name="fallback">
+    <div>Please sign in to view this content.</div>
+  </slot>
+</template>

package/dist/runtime/components/auth/AuthGuard.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/components/auth/AuthSignIn.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { computed } from "vue";
+import { useAuth, useAuthForms } from "#imports";
+import DefaultSignIn from "./DefaultSignIn.vue";
+const appForms = useAuthForms();
+const provider = useAuth();
+const signInForm = computed(
+  () => appForms.SignInForm || provider.SignInForm || DefaultSignIn
+);
+</script>
+
+<template>
+  <component :is="signInForm" v-bind="$attrs" />
+</template>

package/dist/runtime/components/auth/AuthSignIn.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/components/auth/AuthSignInButton.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { useAuth } from "#imports";
+const provider = useAuth();
+</script>
+
+<template>
+  <span style="cursor: pointer" @click="provider.openSignIn?.()">
+    <slot />
+  </span>
+</template>

package/dist/runtime/components/auth/AuthSignInButton.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/components/auth/AuthSignUp.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { computed } from "vue";
+import { useAuth, useAuthForms } from "#imports";
+import DefaultSignUp from "./DefaultSignUp.vue";
+const appForms = useAuthForms();
+const provider = useAuth();
+const signUpForm = computed(
+  () => appForms.SignUpForm || provider.SignUpForm || DefaultSignUp
+);
+</script>
+
+<template>
+  <component :is="signUpForm" v-bind="$attrs" />
+</template>

package/dist/runtime/components/auth/AuthSignUp.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/components/auth/AuthSignUpButton.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { useAuth } from "#imports";
+const provider = useAuth();
+</script>
+
+<template>
+  <span style="cursor: pointer" @click="provider.openSignUp?.()">
+    <slot />
+  </span>
+</template>

package/dist/runtime/components/auth/AuthSignUpButton.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/components/auth/AuthUserAvatar.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { computed } from "vue";
+import { useAuth } from "#imports";
+const provider = useAuth();
+const user = computed(() => provider.user.value);
+const initials = computed(() => {
+  const name = user.value?.name || user.value?.email || "";
+  return name ? name.charAt(0).toUpperCase() : "";
+});
+</script>
+
+<template>
+  <img v-if="user.avatarUrl" :src="user.avatarUrl" class="ipa-user-avatar ipa-user-avatar--image">
+  <span v-else class="ipa-user-avatar ipa-user-avatar--text">{{ initials
+  }}</span>
+</template>
+
+<style>
+.ipa-user-avatar{border-radius:50%;cursor:pointer;height:32px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:32px}.ipa-user-avatar--image{-o-object-fit:cover;object-fit:cover}.ipa-user-avatar--text{align-items:center;background:#e0e0e0;color:var(--el-text-color-primary,#555);display:inline-flex;font-size:14px;font-weight:600;justify-content:center}
+</style>

package/dist/runtime/components/auth/AuthUserAvatar.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/components/auth/DefaultSignIn.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { useTranslator } from "@ipa-vue/core";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { useAuth } from "#imports";
+defineProps({
+  withSignUp: { type: Boolean, required: false }
+});
+const { signIn } = useAuth();
+const router = useRouter();
+const t = useTranslator();
+const email = ref("");
+const password = ref("");
+const loading = ref(false);
+const error = ref("");
+async function handleSubmit() {
+  loading.value = true;
+  error.value = "";
+  const result = await signIn({ email: email.value, password: password.value });
+  if (!result.success)
+    error.value = result.error?.message ?? "";
+  loading.value = false;
+}
+</script>
+
+<template>
+  <form class="ntm-form" @submit.prevent="handleSubmit">
+    <p v-if="error" class="ntm-form__error" role="alert">
+      {{ error }}
+    </p>
+
+    <div class="ntm-form__field">
+      <input
+        v-model="email"
+        class="ntm-form__input"
+        type="email"
+        :placeholder="t('common.email') || 'Email'"
+        autocomplete="email"
+        required
+      >
+    </div>
+
+    <div class="ntm-form__field">
+      <input
+        v-model="password"
+        class="ntm-form__input"
+        type="password"
+        :placeholder="t('common.password') || 'Password'"
+        autocomplete="current-password"
+        required
+      >
+    </div>
+
+    <button type="submit" class="ntm-form__submit" :disabled="loading">
+      <span v-if="loading" class="ntm-form__spinner" aria-hidden="true" />
+      {{ t("signIn") || "Sign In" }}
+    </button>
+
+    <p v-if="withSignUp" class="ntm-form__switch">
+      {{ t("auth.noAccount", "") || "Don't have an account?" }}
+      <a class="ntm-form__link" @click.prevent="router.push('/sign-up')">
+        {{ t("signUp") || "Sign Up" }}
+      </a>
+    </p>
+  </form>
+</template>
+
+<style scoped>
+.ntm-form{display:flex;flex-direction:column;gap:14px;width:100%}.ntm-form__input{background:var(--el-fill-color-blank,#fff);border:1px solid var(--el-border-color,#dcdfe6);border-radius:var(--el-border-radius-base,4px);box-sizing:border-box;color:var(--el-text-color-primary,#303133);font-size:14px;height:38px;outline:none;padding:0 12px;transition:border-color .2s;width:100%}.ntm-form__input::-moz-placeholder{color:var(--el-text-color-placeholder,#a8abb2)}.ntm-form__input::placeholder{color:var(--el-text-color-placeholder,#a8abb2)}.ntm-form__input:focus{border-color:var(--el-color-primary,#409eff)}.ntm-form__submit{align-items:center;background:var(--el-color-primary,#409eff);border:none;border-radius:var(--el-border-radius-base,4px);color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;height:38px;justify-content:center;transition:opacity .2s;width:100%}.ntm-form__submit:hover:not(:disabled){opacity:.85}.ntm-form__submit:disabled{cursor:not-allowed;opacity:.6}.ntm-form__spinner{animation:ntm-spin .6s linear infinite;border:2px solid hsla(0,0%,100%,.4);border-radius:50%;border-top-color:#fff;flex-shrink:0;height:14px;width:14px}@keyframes ntm-spin{to{transform:rotate(1turn)}}.ntm-form__error{background:var(--el-color-danger-light-9,#fef0f0);border-radius:var(--el-border-radius-base,4px);color:var(--el-color-danger,#f56c6c);font-size:13px;margin:0;padding:8px 12px}.ntm-form__switch{color:var(--el-text-color-secondary,#909399);font-size:13px;margin:0;text-align:center}.ntm-form__link{color:var(--el-color-primary,#409eff);cursor:pointer;text-decoration:none}.ntm-form__link:hover{opacity:.8}@media (prefers-color-scheme:dark){.ntm-form__input{background:var(--el-fill-color-blank,#1d1e1f);border-color:var(--el-border-color,#4c4d4f);color:var(--el-text-color-primary,#e5eaf3)}.ntm-form__input::-moz-placeholder{color:var(--el-text-color-placeholder,#606266)}.ntm-form__input::placeholder{color:var(--el-text-color-placeholder,#606266)}.ntm-form__error{background:var(--el-color-danger-light-9,#2b1d1d)}}
+</style>

package/dist/runtime/components/auth/DefaultSignIn.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/components/auth/DefaultSignUp.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { useTranslator } from "@ipa-vue/core";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { useAuth } from "#imports";
+defineProps({
+  withSignIn: { type: Boolean, required: false }
+});
+const { signUp } = useAuth();
+const router = useRouter();
+const t = useTranslator();
+const name = ref("");
+const email = ref("");
+const password = ref("");
+const loading = ref(false);
+const error = ref("");
+async function handleSubmit() {
+  loading.value = true;
+  error.value = "";
+  const result = await signUp({ name: name.value, email: email.value, password: password.value });
+  if (!result.success)
+    error.value = result.error?.message ?? "";
+  loading.value = false;
+}
+</script>
+
+<template>
+  <form class="ntm-form" @submit.prevent="handleSubmit">
+    <p v-if="error" class="ntm-form__error" role="alert">
+      {{ error }}
+    </p>
+
+    <div class="ntm-form__field">
+      <input
+        v-model="name"
+        class="ntm-form__input"
+        type="text"
+        :placeholder="t('common.name') || 'Name'"
+        autocomplete="name"
+      >
+    </div>
+
+    <div class="ntm-form__field">
+      <input
+        v-model="email"
+        class="ntm-form__input"
+        type="email"
+        :placeholder="t('common.email') || 'Email'"
+        autocomplete="email"
+        required
+      >
+    </div>
+
+    <div class="ntm-form__field">
+      <input
+        v-model="password"
+        class="ntm-form__input"
+        type="password"
+        :placeholder="t('common.password') || 'Password'"
+        autocomplete="new-password"
+        required
+      >
+    </div>
+
+    <button type="submit" class="ntm-form__submit" :disabled="loading">
+      <span v-if="loading" class="ntm-form__spinner" aria-hidden="true" />
+      {{ t("signUp") || "Sign Up" }}
+    </button>
+
+    <p v-if="withSignIn" class="ntm-form__switch">
+      {{ t("auth.hasAccount") || "Already have an account?" }}
+      <a class="ntm-form__link" @click.prevent="router.push('/sign-in')">
+        {{ t("signIn") || "Sign In" }}
+      </a>
+    </p>
+  </form>
+</template>
+
+<style scoped>
+.ntm-form{display:flex;flex-direction:column;gap:14px;width:100%}.ntm-form__input{background:var(--el-fill-color-blank,#fff);border:1px solid var(--el-border-color,#dcdfe6);border-radius:var(--el-border-radius-base,4px);box-sizing:border-box;color:var(--el-text-color-primary,#303133);font-size:14px;height:38px;outline:none;padding:0 12px;transition:border-color .2s;width:100%}.ntm-form__input::-moz-placeholder{color:var(--el-text-color-placeholder,#a8abb2)}.ntm-form__input::placeholder{color:var(--el-text-color-placeholder,#a8abb2)}.ntm-form__input:focus{border-color:var(--el-color-primary,#409eff)}.ntm-form__submit{align-items:center;background:var(--el-color-primary,#409eff);border:none;border-radius:var(--el-border-radius-base,4px);color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;height:38px;justify-content:center;transition:opacity .2s;width:100%}.ntm-form__submit:hover:not(:disabled){opacity:.85}.ntm-form__submit:disabled{cursor:not-allowed;opacity:.6}.ntm-form__spinner{animation:ntm-spin .6s linear infinite;border:2px solid hsla(0,0%,100%,.4);border-radius:50%;border-top-color:#fff;flex-shrink:0;height:14px;width:14px}@keyframes ntm-spin{to{transform:rotate(1turn)}}.ntm-form__error{background:var(--el-color-danger-light-9,#fef0f0);border-radius:var(--el-border-radius-base,4px);color:var(--el-color-danger,#f56c6c);font-size:13px;margin:0;padding:8px 12px}.ntm-form__switch{color:var(--el-text-color-secondary,#909399);font-size:13px;margin:0;text-align:center}.ntm-form__link{color:var(--el-color-primary,#409eff);cursor:pointer;text-decoration:none}.ntm-form__link:hover{opacity:.8}@media (prefers-color-scheme:dark){.ntm-form__input{background:var(--el-fill-color-blank,#1d1e1f);border-color:var(--el-border-color,#4c4d4f);color:var(--el-text-color-primary,#e5eaf3)}.ntm-form__input::-moz-placeholder{color:var(--el-text-color-placeholder,#606266)}.ntm-form__input::placeholder{color:var(--el-text-color-placeholder,#606266)}.ntm-form__error{background:var(--el-color-danger-light-9,#2b1d1d)}}
+</style>

package/dist/runtime/components/auth/DefaultSignUp.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/composables/useAuth.d.ts

@@ -0,0 +1,2 @@
+import type { AuthProvider } from '@nuxt-tmpl/core';
+export declare function useAuth(): AuthProvider;

package/dist/runtime/composables/useAuth.js

@@ -0,0 +1,5 @@
+import { useNuxtApp } from "nuxt/app";
+export function useAuth() {
+  const nuxtApp = useNuxtApp();
+  return nuxtApp.$auth;
+}

package/dist/runtime/composables/useAuthForms.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from "vue";
+interface AuthForms {
+    SignInForm?: Component;
+    SignUpForm?: Component;
+}
+/** Call inside a component's `<script setup>` (e.g. `app.vue`) to override the default auth form components. */
+export declare function provideAuthForms(forms: AuthForms): void;
+export declare function useAuthForms(): AuthForms;
+export {};

package/dist/runtime/composables/useAuthForms.js

@@ -0,0 +1,8 @@
+import { provide, inject } from "vue";
+const AUTH_FORMS_KEY = Symbol("nuxt-tmpl:auth-forms");
+export function provideAuthForms(forms) {
+  provide(AUTH_FORMS_KEY, forms);
+}
+export function useAuthForms() {
+  return inject(AUTH_FORMS_KEY, {});
+}

package/dist/runtime/layouts/default.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { useTranslator } from "@ipa-vue/core";
+import { useRuntimeConfig } from "nuxt/app";
+import { computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { getAuthMode, useAuth } from "#imports";
+const t = useTranslator();
+const provider = useAuth();
+const user = computed(() => provider.user.value);
+const route = useRoute();
+const router = useRouter();
+const config = useRuntimeConfig();
+const afterSignInRoute = config.public?.nuxtTmpl?.afterSignInRoute ?? "/dashboard";
+const guestRoutes = config.public?.nuxtTmpl?.guestRoutes ?? [];
+const publicRoutes = config.public?.nuxtTmpl?.publicRoutes ?? [];
+const authMode = computed(
+  () => getAuthMode(route.path, route.meta, guestRoutes, publicRoutes)
+);
+watch(
+  [() => provider.isLoaded.value, () => provider.isSignedIn.value, authMode],
+  ([loaded, signedIn, mode]) => {
+    if (!loaded || provider.id === "none")
+      return;
+    if (signedIn && mode === "guest") {
+      router.push(afterSignInRoute);
+      return;
+    }
+    if (!signedIn && mode === "required") {
+      router.push("/");
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full">
+    <div style="border-bottom: 1px solid var(--el-border-color)">
+      <div class="mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between items-center h-10">
+          <slot name="app-name">
+            <el-link type="primary" href="/" class="text-lg font-bold">
+              {{ t("appName") }}
+            </el-link>
+          </slot>
+          <slot name="nav" />
+          <nav class="flex items-center space-x-4">
+            <slot name="header-actions" />
+            <template v-if="provider.id !== 'none'">
+              <template v-if="!provider.isSignedIn.value">
+                <AuthSignInButton>
+                  <el-button size="small" type="primary">
+                    {{ t("signIn") }}
+                  </el-button>
+                </AuthSignInButton>
+                <AuthSignUpButton>
+                  <el-button size="small" type="primary">
+                    {{ t("signUp") }}
+                  </el-button>
+                </AuthSignUpButton>
+              </template>
+              <slot v-else name="user-avatar" :user="user" :provider="provider">
+                <AuthUserAvatar @click="provider.openUserProfile?.()" />
+              </slot>
+            </template>
+          </nav>
+        </div>
+      </div>
+    </div>
+    <slot name="content">
+      <div class="flex-1 flex overflow-hidden">
+        <slot name="sidebar" />
+        <div class="flex-1 overflow-auto">
+          <slot />
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>

package/dist/runtime/layouts/default.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/middleware/auth.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").RouteMiddleware;
+export default _default;

package/dist/runtime/middleware/auth.js

@@ -0,0 +1,32 @@
+import { defineNuxtRouteMiddleware, navigateTo, useNuxtApp, useRuntimeConfig } from "nuxt/app";
+import { watch } from "vue";
+import { getAuthMode } from "#imports";
+export default defineNuxtRouteMiddleware(async (to, _from) => {
+  const config = useRuntimeConfig();
+  const providerId = config.public?.authProvider;
+  if (!providerId || providerId === "none")
+    return;
+  const guestRoutes = config.public?.nuxtTmpl?.guestRoutes ?? [];
+  const publicRoutes = config.public?.nuxtTmpl?.publicRoutes ?? [];
+  const mode = getAuthMode(to.path, to.meta, guestRoutes, publicRoutes);
+  if (mode === "public")
+    return;
+  const { $auth } = useNuxtApp();
+  if (!$auth.isLoaded.value) {
+    await new Promise((resolve) => {
+      const stop = watch(
+        () => $auth.isLoaded.value,
+        (loaded) => {
+          if (loaded) {
+            stop();
+            resolve();
+          }
+        },
+        { immediate: true }
+      );
+    });
+  }
+  if (!$auth.isSignedIn.value && mode === "required" && _from.path !== "/") {
+    return navigateTo("/");
+  }
+});

package/dist/runtime/pages/sign-in.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="auth-page">
+    <div class="auth-card">
+      <h2 class="auth-card__title">
+        {{ $t?.("signIn") ?? "Sign In" }}
+      </h2>
+      <AuthSignIn with-sign-up />
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({ tab: false });
+</script>
+
+<style scoped>
+.auth-page{align-items:center;display:flex;height:100%;justify-content:center}.auth-card{background:var(--el-bg-color);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:24px;padding:40px;width:400px}.auth-card__title{color:var(--el-text-color-primary);font-size:22px;font-weight:600;margin:0;text-align:center}
+</style>