feat: Switch to Nuxt v4 compatibility (#134)

apps/app/.gitignore

@@ -27,4 +27,7 @@ logs
 .vercel
 
 # Shelve config
-.shelve
+.shelve
+
+# Nitro
+.nitro/

apps/app/app.vue → apps/app/app/app.vue

@@ -29,7 +29,7 @@ const reduceMotion = useCookie<boolean>('reduceMotion', {
 if (import.meta.client) setPrefersReducedMotion(reduceMotion.value)
 
 
-await useSession().refresh()
+useSession().refresh()
 </script>
 
 <template>

apps/app/components/landing/GithubStar.vue → apps/app/app/components/landing/GithubStar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type repoType = {
+type RepoType = {
  name: string
  stars: number
  watchers: number
@@ -14,7 +14,7 @@ if (!githubStars.value) {
 
 async function fetchRepo() {
  try {
- const res = await $fetch('https://ungh.cc/repos/hugorcd/shelve') as { repo: repoType }
+ const res = await $fetch('https://ungh.cc/repos/hugorcd/shelve') as { repo: RepoType }
  githubStars.value = res.repo.stars.toString()
  } catch (e) { /* empty */ }
 }

apps/app/components/project/CreateVariables.vue → apps/app/app/components/project/CreateVariables.vue

@@ -79,7 +79,7 @@ const items = [
 
 onMounted(() => {
  document.addEventListener('paste', (e) => {
- const clipboardData = e.clipboardData
+ const { clipboardData } = e
  if (!clipboardData) return
  const pastedData = clipboardData.getData('text')
  if (!e.target?.closest('#varCreation')) return

apps/app/pages/app/profile.vue → apps/app/app/pages/app/profile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const user = useSession().user
+const { user } = useSession()
 
 const usePassword = useCookie('usePassword')
 

apps/app/pages/app/projects.vue → apps/app/app/pages/app/projects.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { isMounted } from '~/composables/useDOM'
-
 const {
  projects,
  loading,

apps/app/pages/index.vue → apps/app/app/pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const copy = ref(false)
-function copy_to_clipboard(text: string) {
+function copyToClipboard(text: string) {
  copyToClipboard(text, 'Copied to clipboard')
  copy.value = true
  setTimeout(() => {
@@ -29,7 +29,7 @@ function copy_to_clipboard(text: string) {
  <div class="absolute bottom-16 z-20 flex w-full items-center justify-center [mask-image:linear-gradient(to_bottom,white,transparent)]">
  <div
  class="flex items-center justify-center gap-4 rounded-md bg-white/5 px-4 py-2 backdrop-blur-lg"
- @click="copy_to_clipboard('npm install -g @shelve/cli')"
+ @click="copyToClipboard('npm install -g @shelve/cli')"
  >
  <div class="flex cursor-pointer items-center justify-center gap-2 text-sm text-gray-300">
  <span>

apps/app/pages/login.vue → apps/app/app/pages/login.vue

@@ -60,7 +60,7 @@ const sendOtp = async () => {
 }
 
 const login = async () => {
- if (!otp.value) {
+ if (!otp.value && !password.value) {
  toast.error('Please fill in all required fields.')
  return
  }
@@ -115,7 +115,10 @@ onMounted(() => {
  required
  placeholder="password"
  />
- <UButton type="submit" class="flex w-full items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-sm text-white transition-colors duration-300 hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-100">
+ <UButton
+ :disabled="passwordMode ? verifyStatus === 'pending' : status === 'pending'"
+ type="submit"
+ class="flex w-full items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-sm text-white transition-colors duration-300 hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-100">
  {{ passwordMode ? "Login" : "Send me a magic link" }}
  <Loader v-if="passwordMode ? verifyStatus === 'pending' : status === 'pending'" />
  </UButton>

apps/app/nuxt.config.ts

@@ -1,4 +1,5 @@
 import { getIconCollections } from '@egoist/tailwindcss-icons'
+import vue from '@vitejs/plugin-vue'
 
 export default defineNuxtConfig({
  app: {
@@ -14,6 +15,10 @@ export default defineNuxtConfig({
  },
  },
 
+ future: {
+ compatibilityVersion: 4,
+ },
+
  experimental: {
  componentIslands: true,
  },
@@ -25,9 +30,8 @@ export default defineNuxtConfig({
  },
 
  nitro: {
- prerender: {
- crawlLinks: true,
- routes: ['/'],
+ rollupConfig: {
+ plugins: [vue()]
  },
  },
 
@@ -38,15 +42,14 @@ export default defineNuxtConfig({
  private: {
  resendApiKey: process.env.NUXT_PRIVATE_RESEND_API_KEY,
  authSecret: process.env.NUXT_PRIVATE_AUTH_SECRET,
- secret_encryption_key: process.env.NUXT_PRIVATE_SECRET_ENCRYPTION_KEY,
- secret_encryption_iterations: process.env.NUXT_PRIVATE_SECRET_ENCRYPTION_ITERATIONS,
+ secretEncryptionKey: process.env.NUXT_PRIVATE_SECRET_ENCRYPTION_KEY,
+ secretEncryptionIterations: process.env.NUXT_PRIVATE_SECRET_ENCRYPTION_ITERATIONS,
  },
  },
 
  modules: [
  '@nuxt/content',
  '@nuxt/image',
- '@vue-email/nuxt',
  '@nuxt/ui',
  '@nuxt/fonts',
  '@vueuse/nuxt',
@@ -55,10 +58,6 @@ export default defineNuxtConfig({
 
  css: ['~/assets/style/main.css'],
 
- vueEmail: {
- autoImport: true,
- },
-
  devtools: {
  enabled: true,
 

apps/app/package.json

@@ -9,6 +9,7 @@
  "dev": "nuxt dev",
  "generate": "nuxt generate",
  "preview": "nuxt preview",
+ "start": "node .output/server/index.mjs",
  "postinstall": "nuxt prepare && npm run prisma:generate --no-engine",
  "lint": "eslint .",
  "lint:fix": "eslint --fix .",
@@ -23,9 +24,8 @@
  "schema": "server/database/schema.prisma"
  },
  "devDependencies": {
- "@hrcd/eslint-config": "^1.1.5",
+ "@hrcd/eslint-config": "^2.0.0",
  "@iconify-json/lucide": "^1.1.194",
- "@linear/sdk": "^22.0.0",
  "@nuxt/content": "^2.13.0",
  "@nuxt/fonts": "latest",
  "@nuxt/image": "latest",
@@ -38,17 +38,16 @@
  "@tsparticles/slim": "^3.4.0",
  "@types/bcryptjs": "^2.4.6",
  "@types/ua-parser-js": "^0.7.39",
- "@vercel/analytics": "^1.3.1",
- "@vue-email/nuxt": "^0.8.19",
+ "@vitejs/plugin-vue": "^5.0.5",
+ "@vue-email/components": "^0.0.17",
+ "@vue-email/render": "^0.0.9",
  "@vueuse/core": "^10.11.0",
  "@vueuse/nuxt": "^10.11.0",
  "bcryptjs": "^2.4.3",
  "eslint": "^9.5.0",
  "jsonwebtoken": "^9.0.2",
- "nuxt": "latest",
+ "nuxt": "^3.12.2",
  "nuxt-build-cache": "latest",
- "octokit": "^4.0.2",
- "openai": "^4.52.0",
  "prisma": "^5.15.1",
  "resend": "^3.3.0",
  "ua-parser-js": "^1.0.38",

apps/app/server/api/admin/users/[userId].delete.ts

@@ -1,8 +1,8 @@
 import { H3Event } from 'h3'
-import { deleteUser } from '~/server/app/userService'
+import { deleteUser } from '~~/server/app/userService'
 
 export default eventHandler(async (event: H3Event) => {
- const user = event.context.user
+ const { user } = event.context
  const id = getRouterParam(event, 'userId') as string
  if (!id) throw createError({ statusCode: 400, statusMessage: 'missing params' })
  if (user.id === parseInt(id)) throw createError({ statusCode: 400, statusMessage: 'you can\'t delete your own account' })

apps/app/server/api/admin/users/[userId].put.ts

@@ -1,8 +1,8 @@
 import { H3Event } from 'h3'
-import prisma from '~/server/database/client'
+import prisma from '~~/server/database/client'
 
 export default eventHandler(async (event: H3Event) => {
- const user = event.context.user
+ const { user } = event.context
  const body = await readBody(event)
  const id = getRouterParam(event, 'userId') as string
 

apps/app/server/api/admin/users/index.get.ts

@@ -1,4 +1,4 @@
-import prisma, { formatUser } from '~/server/database/client'
+import prisma, { formatUser } from '~~/server/database/client'
 
 export default eventHandler(async () => {
  const users = await prisma.user.findMany()

apps/app/server/api/auth/currentUser.get.ts

@@ -1,5 +1,5 @@
 import { H3Event } from 'h3'
-import { getUserByAuthToken, verifyUserToken } from '~/server/app/userService'
+import { getUserByAuthToken, verifyUserToken } from '~~/server/app/userService'
 
 export default eventHandler(async (event: H3Event) => {
  const authToken = getCookie(event, 'authToken')

apps/app/server/api/auth/login.post.ts

@@ -1,11 +1,11 @@
 import { H3Event } from 'h3'
-import { formatUser } from '~/server/database/client'
-import { login } from '~/server/app/authService'
+import { formatUser } from '~~/server/database/client'
+import { login } from '~~/server/app/authService'
 
 export default eventHandler(async (event: H3Event) => {
  const body = await readBody(event)
  body.authToken = getCookie(event, 'authToken') || ''
- const { user, authToken} = await login(body)
+ const { user, authToken } = await login(body)
  setCookie(event, 'authToken', authToken, {
  httpOnly: true,
  secure: true,

apps/app/server/api/auth/logout.post.ts

@@ -1,8 +1,8 @@
 import { H3Event } from 'h3'
-import { deleteSession } from '~/server/app/sessionService'
+import { deleteSession } from '~~/server/app/sessionService'
 
 export default eventHandler(async (event: H3Event) => {
- const authToken = event.context.authToken
+ const { authToken } = event.context
  deleteCookie(event, 'authToken')
  if (!authToken) {
  return {

apps/app/server/api/auth/send-code.post.ts

@@ -1,6 +1,6 @@
 import type { CreateUserInput } from '@shelve/types'
 import { H3Event } from 'h3'
-import { upsertUser } from '~/server/app/userService'
+import { upsertUser } from '~~/server/app/userService'
 
 export default eventHandler(async (event: H3Event) => {
  const body = await readBody(event) as CreateUserInput

apps/app/server/api/project/[id]/index.delete.ts

@@ -1,8 +1,8 @@
 import { H3Event } from 'h3'
-import { deleteProject } from '~/server/app/projectService'
+import { deleteProject } from '~~/server/app/projectService'
 
 export default eventHandler(async (event: H3Event) => {
- const user = event.context.user
+ const { user } = event.context
  const id = getRouterParam(event, 'id') as string
  if (!id) throw createError({ statusCode: 400, statusMessage: 'Missing params' })
  await deleteProject(id, user.id)

apps/app/server/api/project/[id]/index.get.ts

@@ -1,5 +1,5 @@
 import { H3Event } from 'h3'
-import { getProjectById } from '~/server/app/projectService'
+import { getProjectById } from '~~/server/app/projectService'
 
 export default eventHandler(async (event: H3Event) => {
  const id = getRouterParam(event, 'id') as string

apps/app/server/api/project/[id]/index.put.ts

@@ -1,8 +1,8 @@
 import { H3Event } from 'h3'
-import { updateProject } from '~/server/app/projectService'
+import { updateProject } from '~~/server/app/projectService'
 
 export default eventHandler(async (event: H3Event) => {
- const user = event.context.user
+ const { user } = event.context
  const id = getRouterParam(event, 'id') as string
  if (!id) throw createError({ statusCode: 400, statusMessage: 'Missing params' })
  const projectUpdateInput = await readBody(event)

apps/app/server/api/project/[id]/team/[teamId].delete.ts

@@ -1,5 +1,5 @@
 import { H3Event } from 'h3'
-import { removeTeamFromProject } from '~/server/app/projectService'
+import { removeTeamFromProject } from '~~/server/app/projectService'
 
 export default defineEventHandler(async (event: H3Event) => {
  const id = getRouterParam(event, 'id') as string

apps/app/server/api/project/[id]/team/[teamId].post.ts

@@ -1,5 +1,5 @@
 import { H3Event } from 'h3'
-import { addTeamToProject } from '~/server/app/projectService'
+import { addTeamToProject } from '~~/server/app/projectService'
 
 export default defineEventHandler(async (event: H3Event) => {
  const id = getRouterParam(event, 'id') as string

apps/app/server/api/project/index.get.ts

@@ -1,7 +1,7 @@
 import { H3Event } from 'h3'
-import { getProjectsByUserId } from '~/server/app/projectService'
+import { getProjectsByUserId } from '~~/server/app/projectService'
 
 export default eventHandler(async (event: H3Event) => {
- const user = event.context.user
+ const { user } = event.context
  return await getProjectsByUserId(user.id)
 })