Replies: 17 comments 13 replies
-
|
Related module to inspire: https://github.com/ihavecoke/nuxt-seo-meta by @ihavecoke |
Beta Was this translation helpful? Give feedback.
-
|
Is functionality like "titleTemplate" coming back? While it is easy to add it myself now, it was one of the small things i was missing when i started with nuxt3. |
Beta Was this translation helpful? Give feedback.
-
|
Was still looking for a solution, thought I found it with in docs on useHead and definePageMeta, did not work for me! Later found a clean solution using useState and useHead <3 in another issue here https://github.com/nuxt/framework/issues/3522#issuecomment-1074168040 I personally think the useState example would be better in the documentation, because there are probably more people like me who dont understand the limitations of definePageMeta ( like me :P haha ) |
Beta Was this translation helpful? Give feedback.
-
|
useMeta seems to break the build. Just adding causes the following build error: |
Beta Was this translation helpful? Give feedback.
-
|
Remove the |
Beta Was this translation helpful? Give feedback.
-
|
It's not exactly clear what level of implementation useMeta is meant to offer when set up like this. If the intent is for it to be high level then I have some ideas on how to make it more initiative. From the top of my mind so may need some more thoughts Author Not too sure about the PWA side of things, but it's not clear what Defaults for open-graph Directly copying the meta title and description to og is a common practice so that the preview is properly shown for link expanding. Therefore it's useful to have a way to configure them both in one go like the https://github.com/ihavecoke/nuxt-seo-meta package. Ideally setting the useMeta({
title: 'My Title'
})
// <title>My Title</title>
// <meta property="og:title" content="My Title">This could be overridden by manually specifying the Indexable Pages are indexable by default. Users can opt-out by passing in definePageMeta({
indexable: false
})It would be great if this would somehow set this useMeta({
meta: [
{ name: 'robots', content: 'noindex' }
]
})Mostly just a very obvious way to ensure pages that shouldn't be indexed, aren't. This could also be useful for any sort of static analysis on which pages to include in the sitemap or robots.txt |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the feedback 💚 Indeed we want to introduce some high-level options as of pwa meta and similary, generic options like
Regarding defaults like I love idea for easy indexing opt-out! We might introduce something more conventional like |
Beta Was this translation helpful? Give feedback.
-
|
Oh yeah good call on
|
Beta Was this translation helpful? Give feedback.
-
|
Following on https://github.com/nuxt/framework/issues/3878 |
Beta Was this translation helpful? Give feedback.
-
|
I think that |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
How about using https://vite-plugin-pwa.netlify.app/ |
Beta Was this translation helpful? Give feedback.
-
|
This certainly looks interesting as one of the main features for PWA is support for sw out of the box |
Beta Was this translation helpful? Give feedback.
-
|
Anyone using vite-plugin-pwa successfully? |
Beta Was this translation helpful? Give feedback.
-
|
yes, but only using Vite: https://github.com/userquin/top-nuxt3 but it seems the output on the deploy is broken (on local works): |
Beta Was this translation helpful? Give feedback.
-
|
Great package for PWA asset generation |
Beta Was this translation helpful? Give feedback.
-
|
A good plugin that just works : Nuxt 3 PWA |
Beta Was this translation helpful? Give feedback.
-
|
Inspired by https://github.com/nuxt/framework/issues/5565#issuecomment-1172925533, I want to point our that we should distinguish two "kinds" of meta tags
Critical tags are the tags that should appear immediately after loading the page, otherwise, they might compromise the behavior of the page. |
Beta Was this translation helpful? Give feedback.
-
|
A cool addition to this module would be "native"-mode, aka. cache-first and when the PWA install prompt is triggered cache all routes immediately. This would allow building PWAs that feel and behave almost like native apps with full offline support. Currently the problem is, if you install the PWA (potentially also as Trusted Web Activity from the PlayStore) and the device goes offline only routes that have been visited before work because the other ones haven't been cached yet, leading to bad UX. With the exception of a few device APIs this would be the last puzzle piece to make a TWA feel truly native. |
Beta Was this translation helpful? Give feedback.
-
|
Any status for finish this module? |
Beta Was this translation helpful? Give feedback.
-
|
nuxt-hedge ships will flat meta tag support: https://github.com/harlan-zw/nuxt-hedge/blob/main/src/runtime/composables.ts The new head management implementation will likely ship this as well, so may land as a nuxt core composable (will see). |
Beta Was this translation helpful? Give feedback.
-
|
I'm also wondering how this module is coming along. With Nuxt2, I have seen a problem for a number of users on Firefox where the network requests become extremely slow (30s or so each). I can workaround this by disabling service workers in Firefox, but a) that needs to be done on a per user basis and b) Chrome doesn't have that feature. I'm interested in whether the Nuxt3 version will have the same issue, and also whether it will have any features to allow disabling of the service workers at runtime. |
Beta Was this translation helpful? Give feedback.
-
|
Can anyone help how to get Started with PWA in new nuxt3 ?? |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
is this module still under development or is the current recommendation to use this module: https://github.com/kevinmarrec/nuxt-pwa-module ? If this module is no longer in development can we update the main discussion post to say so to avoid having to read this entire discussion to figure out the current status? |
Beta Was this translation helpful? Give feedback.
-
|
It looks like this could be the official module for PWA in Nuxt 3: https://github.com/vite-pwa/nuxt |
Beta Was this translation helpful? Give feedback.
-
|
I have no idea if https://github.com/vite-pwa/nuxt becomes the official PWA module for Nuxt 3 (will work only with Vite: will not have webpack support), here some plans we have for the module:
|
Beta Was this translation helpful? Give feedback.
-
|
@userquin Either way, great work! For my use case, Vite is fine (no webpack needed), so for me it'll be "official" :) |
Beta Was this translation helpful? Give feedback.
-
|
I am hyped for PWA Support with i18n. Gonna be big |
Beta Was this translation helpful? Give feedback.
-
|
@pi0 Maybe it's worth changing the scope of this discussion to just "Nuxt PWA" considering we have |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Nuxt PWA module is providing a preset of meta tags helping both SEO and PWA application spec compatibility and integrated defaults working out of the box with pwa meta and icon (See https://pwa.nuxtjs.org/meta).
Over time, it became a no-brainer that almost every Nuxt project needs most of these meta tags. The idea is to that, with the new meta tags API provided by Nuxt 3, we can introduce a built-in functionality for SEO/PWA friendly meta tags and in the next major version of PWA module depending on this.
Defaults
Initial options we can migrate from pwa meta:
charset(defaultutf-8)viewport(defaultwidth=device-width, initial-scale=1?)namedescriptionauthorlangogSiteName/ogTitle/ogDescription/ogHost(more)Notes:
og: { siteName }for sake of API and implementation simplitynameis used instead oftitlesince while we shall use it for default value of title, it has purposes like default forogSiteNameand is usually site's short nameUsage
Nuxt config:
Inside app (composables
As a component:
Next steps
themeColorandappleStatusBarStyleto the core tootwitterCardBeta Was this translation helpful? Give feedback.
All reactions