This page is temporarily unavailable after adding clerk

[AbdelilahOu]

I have a Nuxt 3.13 app deployed on NuxtHub Its been working fine until I added clerk-vue since then its shows 500 error page and This page is temporarily unavailable message Im using npm@10.5.2 And node@20.10.0 And NuxtHub uses : npm@9.6.7, nodejs@18.17.1 Heres my package.json:

{
  "name": "mahalli",
  "type": "module",
  "version": "1.7.2",
  "private": true,
  "description": "inventory & invoicing management app",
  "author": "abdelilah ouaadouch",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "start": "node .output/server/index.mjs",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
    "@nuxtjs/i18n": "^8.3.1",
    "@pdf-lib/fontkit": "^1.1.1",
    "@unovis/ts": "^1.3.5",
    "@unovis/vue": "^1.3.5",
    "@vee-validate/zod": "^4.13.1",
    "@vueuse/core": "^10.10.0",
    "@vueuse/motion": "^2.1.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "h3": "^1.12.0",
    "h3-clerk": "^0.4.12",
    "lucide-vue-next": "^0.387.0",
    "node-fetch-native": "^1.6.4",
    "nuxt": "^3.13.0",
    "pdf-lib": "^1.17.1",
    "radix-vue": "^1.8.3",
    "shadcn-nuxt": "^0.10.4",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "v-calendar": "^3.1.2",
    "vee-validate": "^4.13.1",
    "vue": "^3.4.27",
    "vue-clerk": "^0.4.20",
    "vue-router": "^4.3.2",
    "vue-sonner": "^1.1.1",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^2.27.1",
    "@nuxtjs/tailwindcss": "^6.12.0",
    "typescript": "^5.4.5"
  }
}

[wobsoriano]

Hey, I'll try deploying to NuxtHub later!

Also I advice you wait for.... the nuxt module ;)

export default defineNuxtConfig({
  modules: ['vue-clerk/nuxt'],
})

This will make it easy for you. Probably releasing this weekend

[AbdelilahOu]

Ow this is nice it will be worth the wait thank you for the amazing work, this is good news cuz I have been facing this issue for more than a week now 🫡😅

[wobsoriano]

Deployed a demo here - https://nuxt-clerk-template.nuxt.dev

You can follow the steps here on Nuxt usage - https://www.vue-clerk.com/guides/nuxt#_3-set-your-environment-variables

The problem was Cloudflare not being able to read the env vars :D Fixed it with Nuxt runtime config

[AbdelilahOu]

@wobsoriano maaaan cant thank you enough amazing work just amazing, everything works great now thank you...one last question how can I define like public pages and signup and signin pages like the old way ?

[wobsoriano]

how can I define like public pages and signup and signin pages like the old way

I think I don't get this one haha

[AbdelilahOu]

I guess you used to have a plugin and you define like sign-in and sign-up pages also for the public page it was inside a pages middleware to tell clerk to skip those pages

[wobsoriano]

Oh! You can do that in the config itself:

export default defineNuxtConfig({
  modules: ['vue-clerk/nuxt'],
  clerk: {
    signInUrl: '/sign-in',
    signUpUrl: '/sign-up',
  }
})

or the recommended way, which will overwrite the config above:

NUXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NUXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

[AbdelilahOu]

Oh yeah, that's what i was looking for thank you

[wobsoriano]

feel free to close then if we're good!