ALI
ALI
Explore posts from servers
NNuxtAAlokai
PostsComments
NNuxt
Created by ALI on 7/4/2024 in #❓・help
incorrect favicon appears when we try to share the link of the app on whatsapp.
i was loading wrong favicon
2 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
okay, my bad. it isn't in the docs. perhaps chatGPT told me that (free version LOL). any word about parsing errors?
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
right, I read somewhere in the documentation ( i think it was for createError) that by default ~/error.vue is rendered with error layout. I tried to create a custom error layout by actually creating one and naming it error.vue but I don't think it worked.. I need to test that again though. Also, if there is some parsing error like so: <div> {{ hello world! }} </div> how does nuxt throw error for that? because first when I navigate to the page which contains this code, it will show me that I have a parsing error in a modal kind of window. because of 'hello world!' . Now, if I refresh the page; I am taken to the ~/error.vue but I see no layout at all (normally I see default which was setup by my team lead). and I have used useError there which will get the 'statusCode', 'message' and ' statusMessage' etc. they are displayed but no layout. but, instead of refreshing the page, if I just press escape and remove that error modal that showed parsing error. try to go to that page again (the one that has parsing error) I am taken to the ~/error.vue page but this time it prints default error message which is kind of fallback and doesn't show any statusCode etc. Same thing when I try to render a nuxt context related composable outside the context. I would really be thankful if you could share your opnion on it. thanks
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
but I would still love to know why it didn't work with createError
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
okay, using useRequestEvent() and setResponseStatus(event, 404); resolved the issue.
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
hi again, I have used throw createError but whenever I use it, my layout doesn't load, does any of you have idea about what's going on here?
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
does the error page in the root load when some other errors appear as well? for example there is a function that I am calling but it doesn't exist or some composable that has been called outside the nuxt context?
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
it works but for some reason my ui doesn't load
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
yes, I do.. we have three apps using same code base. and there is a [...slug].vue page in the pages directory which is basically being used to render components based on the app coming from the configurations..
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
but this also has problems... lets say I directly enter the address of a certain page.. for example a direct link to a product. this code is going to add 404 status code to that as well..
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
Thank you for the help, I got it. See below: 
import { defineNuxtRouteMiddleware } from 'nuxt/app';

export default defineNuxtRouteMiddleware((to) => {
  const pages = ['/', '/login', '/register', '/cart', '/about', '/checkout', '/contact-us'];
  const isKnownPage = pages.includes(to.path);

  if (!isKnownPage) {
    const event = useRequestEvent();
    return setResponseStatus(event, 404, 'Page Not Found');
  }
});
import { defineNuxtRouteMiddleware } from 'nuxt/app';

export default defineNuxtRouteMiddleware((to) => {
  const pages = ['/', '/login', '/register', '/cart', '/about', '/checkout', '/contact-us'];
  const isKnownPage = pages.includes(to.path);

  if (!isKnownPage) {
    const event = useRequestEvent();
    return setResponseStatus(event, 404, 'Page Not Found');
  }
});
Thank you @Thr0nSK and @manniL / TheAlexLichter
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
does that mean, I can't use the useRequestEvent compoable and etResponseStatus() plugin?
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
something wrong with my project then...
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
okay, I am getting 404 here
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
https://stackblitz.com/edit/github-jagvr2?file=error.vue,app.vue,pages%2Fproducts.vue
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
okay let me try
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
LOL.. that'd be a big big reply
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
what could I be missing...
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
but I get 200
42 replies
NNuxt
Created by ALI on 6/24/2024 in #❓・help
Custom Error Page
~/error.vue 
<template>
  <div>
    <h1>Page Not Found!</h1>
  </div>
</template>

<script setup>
  definePageMeta({
  middleware: [
    () => {
      if (process.server) {
        console.log('server process');
        const event = useRequestEvent();
        setResponseStatus(event, 404);
      }
    },
  ],
});
</script>
<template>
  <div>
    <h1>Page Not Found!</h1>
  </div>
</template>

<script setup>
  definePageMeta({
  middleware: [
    () => {
      if (process.server) {
        console.log('server process');
        const event = useRequestEvent();
        setResponseStatus(event, 404);
      }
    },
  ],
});
</script>
42 replies