Nuxt•4d ago

nuxttime formatting to just say today, yesterday, 2 days ago etc and not 24 hours ago 49 hours ago

   <NuxtTime
                  v-else
                  :datetime="(item.data as any).dateForNuxtTime"
                  relative
                  numeric="auto"
                  style="long"
                />

   <NuxtTime
                  v-else
                  :datetime="(item.data as any).dateForNuxtTime"
                  relative
                  numeric="auto"
                  style="long"
                />

I'm using the nuxttime thing with relative time and i want to display "today" "yesterday", "2 days ago" etc. however it will say 24 hours ago, 49 hours ago which feels unnatural. I'm passing in a messages time do i need to maybe cut the hours etc out of the time im passing in so i only pass the day in? would that solve it?

22 Replies

kapa.ai•4d ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The <NuxtTime> component supports relative time formatting using the Intl.RelativeTimeFormat API. When you use the props relative, numeric="auto", and style="long", it will display phrases like "yesterday" or "today"—but only if the underlying browser or environment's Intl.RelativeTimeFormat implementation supports those phrases for your locale. From the documentation:

When relative is set to true, the component also accepts properties from Intl.RelativeTimeFormat.
Example:
<NuxtTime 
  :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000" 
  relative 
  numeric="auto"
  style="long"
/>
<NuxtTime 
  :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000" 
  relative 
  numeric="auto"
  style="long"
/>
This would output something like: "3 days ago" or "last Friday" depending on the numeric setting.

— NuxtTime API Docs

So, using numeric="auto" is the correct approach to get "yesterday" and "today" instead of "1 day ago" or "24 hours ago". However, if you are still seeing "24 hours ago" or "49 hours ago", it is likely due to the way the date is being calculated or the locale's support for these phrases. You do not need to manually strip the hours from your date. The component should handle this if the input is a valid date and the locale supports it. Make sure: - You are passing a valid date (e.g., a Date object, timestamp, or ISO string). - The locale you are using supports these phrases. Try explicitly setting the locale prop to "en-US" or another supported locale. Example:

<NuxtTime
  :datetime="(item.data as any).dateForNuxtTime"
  relative
  numeric="auto"
  style="long"
  locale="en-US"
/>

<NuxtTime
  :datetime="(item.data as any).dateForNuxtTime"
  relative
  numeric="auto"
  style="long"
  locale="en-US"
/>

If you still see "24 hours ago" instead of "yesterday", it's due to the limitations of Intl.RelativeTimeFormat for your locale or the exact time difference. The component itself does not provide custom mapping for "yesterday" or "today" beyond what Intl.RelativeTimeFormat offers. Summary:
- Use numeric="auto" and style="long" (as you are). - Optionally, set locale="en-US". - No need to strip hours from your date. - The output depends on Intl.RelativeTimeFormat support in your environment and locale. For more details, see the NuxtTime API documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•4d ago

@kapa.ai alright I guess that's just how it's formatted in that case. btw i have some nuxt content pages like a privacy policy, blog pages and support pages. can i somehow easily specify for all those content pages to be rendered at build time for performance?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can easily specify that your Nuxt Content pages (such as privacy policy, blog, and support pages) should be prerendered at build time for better performance. Nuxt provides several ways to do this: 1. Using routeRules in nuxt.config.ts You can use the routeRules option to tell Nuxt to prerender specific routes or groups of routes. For example, to prerender all blog posts and your privacy policy/support pages:

export default defineNuxtConfig({
  routeRules: {
    '/privacy-policy': { prerender: true },
    '/support': { prerender: true },
    '/blog/**': { prerender: true }, // All blog pages
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/privacy-policy': { prerender: true },
    '/support': { prerender: true },
    '/blog/**': { prerender: true }, // All blog pages
  }
})

This will ensure those routes are statically generated at build time, as long as they are discoverable (linked from somewhere or specified explicitly) Hybrid Rendering. 2. Using the Nitro Prerender Option Alternatively, you can specify exact routes in the nitro.prerender.routes array:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/privacy-policy',
        '/support',
        '/blog/post-1',
        '/blog/post-2',
        // ...add all your content routes here
      ]
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/privacy-policy',
        '/support',
        '/blog/post-1',
        '/blog/post-2',
        // ...add all your content routes here
      ]
    }
  }
})

This is useful if you have routes that are not easily discoverable by the crawler Prerendering. 3. Crawl-based Prerendering If your content pages are linked from your site (e.g., from the homepage or a menu), Nuxt’s crawler will automatically find and prerender them when you run nuxi generate Prerendering. Summary - Use routeRules for patterns (recommended for content pages). - Use nitro.prerender.routes for explicit routes. - Ensure pages are linked for crawl-based discovery. This approach works seamlessly with Nuxt Content pages, so your privacy policy, blog, and support pages can all be statically generated for optimal performance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•4d ago

@kapa.ai and is this a good idea for content pages or does it not make much difference?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, prerendering content pages like privacy policy, blog, and support pages is generally a good idea in Nuxt. The official documentation highlights several benefits of prerendering (static generation) for such pages: - Performance: Prerendered pages are served as static HTML, which means they load very quickly for users since there is no server-side computation required at request time. - SEO: Search engines can easily index prerendered pages because the full HTML content is available immediately. - Accessibility: Content is available right away, which benefits users relying on assistive technologies. - Reduced server load: Since the pages are static, your server or hosting platform doesn't need to generate them on each request, which is especially beneficial for high-traffic or informational pages. These benefits are particularly relevant for content pages that do not change frequently and do not require real-time data. The Nuxt documentation specifically recommends prerendering for such use cases to optimize performance and SEO Prerendering Server-Side Rendering. In summary, prerendering is a best practice for static content pages in Nuxt and is likely to improve both user experience and site performance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•4d ago

so i have a few pages /privacy-policy /terms-of-service etc do i just put each one on one line or can i group them for pre rendering? @kapa.ai

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To prerender specific pages like /privacy-policy and /terms-of-service, you need to list each route individually in your routeRules or in the nitro.prerender.routes array. There is no built-in way to group arbitrary, non-patterned routes together in a single line; each must be specified separately unless they share a common path pattern (e.g., /blog/** for all blog pages). Example using routeRules:

export default defineNuxtConfig({
  routeRules: {
    '/privacy-policy': { prerender: true },
    '/terms-of-service': { prerender: true },
    // Add more pages as needed
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/privacy-policy': { prerender: true },
    '/terms-of-service': { prerender: true },
    // Add more pages as needed
  }
})

Example using Nitro's prerender.routes:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/privacy-policy',
        '/terms-of-service',
        // Add more pages as needed
      ]
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/privacy-policy',
        '/terms-of-service',
        // Add more pages as needed
      ]
    }
  }
})

If your pages share a common prefix, you can use a wildcard (e.g., /legal/**), but for individual pages with different paths, you must list each one separately Hybrid Rendering Prerendering. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•4d ago

@kapa.ai is there not a way to somehow scan my content folder for all my content pages to pre render them?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Nuxt’s prerendering system relies on either crawling discoverable links in your site or on explicit route configuration. According to the documentation, the crawler will automatically find and prerender all pages that are linked from your site (such as from your navigation or homepage) when you run nuxi generate. This means if your content pages (from the content/ directory) are linked somewhere in your app, they will be discovered and prerendered automatically—there is no built-in config to “scan the content folder” directly for prerendering, only for crawling or explicit route listing Prerendering. If some content pages are not linked anywhere and you want to ensure they are prerendered, you must manually specify their routes in nitro.prerender.routes or routeRules. There is no documented option to automatically scan the content/ directory and prerender every file as a page without either linking them or listing their routes explicitly. In summary:
- Linked content pages: Will be discovered and prerendered by the crawler.
- Unlinked content pages: Must be listed manually for prerendering.
- No built-in “scan content folder for prerender” option is documented. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•4d ago

@kapa.ai oh so i don't need to put my privacy-policy page set to pre render in my nuxt config then? since its linked in my footer it will know it's a content page and pre render it is that correct?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, that's correct! If your /privacy-policy page is linked from your site (for example, in your footer), Nuxt's crawler will automatically discover and prerender it when you run nuxi generate. You do not need to explicitly add it to your Nuxt config for prerendering in this case. The crawler works by starting at your root page and following all anchor links it finds, so any linked content page will be included in the prerendered output Prerendering. If you have content pages that are not linked anywhere, you would need to specify them manually in your config to ensure they are prerendered. But for linked pages like your privacy policy, no extra config is needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•4d ago

@kapa.ai but not all of my site should be pre rendered right, just the content pages which are static content that won't change? so during a standard nuxt build when i deploy my site to my server i do need to specify to pre render those pages in that case to not need to do nuxi generate?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct that not all of your site needs to be prerendered—typically, you only want to prerender static content pages that don't change often (like privacy policy, terms of service, blog posts, etc.). If you use the standard nuxi build command, pages are not prerendered by default; instead, Nuxt prepares your app for server-side rendering (SSR) or hybrid rendering, depending on your configuration. If you want specific pages to be prerendered during a standard build (without running nuxi generate), you need to explicitly specify which routes to prerender using routeRules or nitro.prerender.routes in your nuxt.config.ts Hybrid Rendering Prerendering. For example:

export default defineNuxtConfig({
  routeRules: {
    '/privacy-policy': { prerender: true },
    '/terms-of-service': { prerender: true },
    // other static content pages
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/privacy-policy': { prerender: true },
    '/terms-of-service': { prerender: true },
    // other static content pages
  }
})

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/privacy-policy',
        '/terms-of-service',
        // other static content pages
      ]
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/privacy-policy',
        '/terms-of-service',
        // other static content pages
      ]
    }
  }
})

If you want Nuxt to prerender all discoverable pages (like with a static site), you should use nuxi generate instead, which will crawl and prerender all linked pages automatically Prerendering. Summary:
- With nuxi build, you must specify which pages to prerender. - With nuxi generate, all linked pages are prerendered by default. - Only prerender static content pages that don't change often, as you mentioned. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

johntanzer•3d ago

Hey you should use vue use useTimeAgo() it is reactive and has a really nice API

WiFi PlugOP•3d ago

oh sweet thank you, that does seem perfect for my usecase

Gaming

Programming

nuxttime formatting to just say today, yesterday, 2 days ago etc and not 24 hours ago 49 hours ago

Did you find this page helpful?