Nuxt•2w ago

Nuxt /app Pages Not Detecting API Route from /server Directory

Hello, I am using the new Nuxt /app directory structure for pages, but unfortunately, these pages are not able to detect the /server/api/auth/register.ts API route. I'm receiving the following warning in the console:

WARN [Vue Router warn]: No match found for location with path "/api/auth/register"

WARN [Vue Router warn]: No match found for location with path "/api/auth/register"

Any insights on how to resolve this issue?

7 Replies

Ahm@•2w ago

app/pages/auth/register.vue file scripts:

 async function onSubmit(data: any) {
    isLoading.value = true; 
    try {
      const { data: response, error } = await useFetch('/api/auth/register', {
        method: 'POST',
        body: { name: data.name, email: data.email, password: data.password },
      });
  
      if (error.value) {
        userMessage.value = 'Registration failed. Please try again.';
        toast.add({ title: userMessage.value, icon: 'i-heroicons-x-circle', color: 'red' });
      } else {
        userMessage.value = 'Registration successful.';
        toast.add({ title: userMessage.value, icon: 'i-heroicons-check-circle', color: 'green' });
        isSuccess.value = true;
        router.push('/login');
      }
    } catch (err) {
      console.error('Registration error:', err);
      userMessage.value = 'Something went wrong. Please try again.';
      toast.add({ title: userMessage.value, icon: 'i-heroicons-x-circle', color: 'red' });
    } finally {
      isLoading.value = false; 
    }
  }

 async function onSubmit(data: any) {
    isLoading.value = true; 
    try {
      const { data: response, error } = await useFetch('/api/auth/register', {
        method: 'POST',
        body: { name: data.name, email: data.email, password: data.password },
      });
  
      if (error.value) {
        userMessage.value = 'Registration failed. Please try again.';
        toast.add({ title: userMessage.value, icon: 'i-heroicons-x-circle', color: 'red' });
      } else {
        userMessage.value = 'Registration successful.';
        toast.add({ title: userMessage.value, icon: 'i-heroicons-check-circle', color: 'green' });
        isSuccess.value = true;
        router.push('/login');
      }
    } catch (err) {
      console.error('Registration error:', err);
      userMessage.value = 'Something went wrong. Please try again.';
      toast.add({ title: userMessage.value, icon: 'i-heroicons-x-circle', color: 'red' });
    } finally {
      isLoading.value = false; 
    }
  }

server/api/auth/register.post.ts file:

import bcrypt from 'bcryptjs';
import { createJWT } from '~/server/utils/jwt';
import User from '~/server/models/User';

export default defineEventHandler(async (event) => {
  const { email, password, name, role } = await readBody(event);

  const existingUser = await User.findOne({ email });
  if (existingUser) {
    throw createError({
      statusCode: 400,
      statusMessage: 'User already exists.',
    });
  }

  const hashedPassword = await bcrypt.hash(password, 10);

  const user = new User({
    email,
    password: hashedPassword,
    name,
    role: role || 'customer', 
  });

  await user.save();

  const token = createJWT(user.email);

  await setAuth(event, token);

  return { success: true, user: { email: user.email, role: user.role } };
});

import bcrypt from 'bcryptjs';
import { createJWT } from '~/server/utils/jwt';
import User from '~/server/models/User';

export default defineEventHandler(async (event) => {
  const { email, password, name, role } = await readBody(event);

  const existingUser = await User.findOne({ email });
  if (existingUser) {
    throw createError({
      statusCode: 400,
      statusMessage: 'User already exists.',
    });
  }

  const hashedPassword = await bcrypt.hash(password, 10);

  const user = new User({
    email,
    password: hashedPassword,
    name,
    role: role || 'customer', 
  });

  await user.save();

  const token = createJWT(user.email);

  await setAuth(event, token);

  return { success: true, user: { email: user.email, role: user.role } };
});

Artist201•7d ago

Please use this when sharing code How to Create a Coloured Code Block: https://www.geeksforgeeks.org/how-to-format-text-into-code-block-on-discord/

GeeksforGeeks

How to Format Text Into Code Block on Discord

Here are the following steps to format text into code block on discord : Step 1: Open Discord ;Step 2: Navigate to the server;

Artist201•7d ago

As for the error Are you sure you saved the file And maybe try to restart the dev server Typically that's when I face this issue

Ahm@•7d ago

yes I saved it, I tried rebooting but it didn't work. the new nuxt system includes the contents in the app folder and does not see the server folder in the root folder when I take everything out of the app folder it works fine, it's weird. when defining the path I tried things like ../ or ~/ but again it didn't work.

Artist201•7d ago

Oh, you are using the nuxt4 patch ? The server folder should not be inside the app folder

Artist201•7d ago

https://www.vuemastery.com/blog/upgrading-to-nuxt-4/

Vue Mastery

Upgrading to Nuxt 4 | Vue Mastery

Nuxt 4 introduces performance upgrades and API consistency. Learn about the new folder structure, caching data, and other changes in this tutorial.

Artist201•7d ago

Gaming

Programming

Nuxt /app Pages Not Detecting API Route from /server Directory