[SOLVED] nuxt 3 : generate and host a small pwa

nuxt 3 : generate and host a small pwa

I'm testing Nuxt 3 (RC for now), and really love it.

I made a very small front-end application ( no backend, 3 pages, a complex form with some formulas to display some results ).

it works nice locally, there is nothing related to backend, so I obviously could used only Vue,
but for testing purpose and to go further, I would like to generate a PWA, host it on a dev server ( in a subfolder ) and try to install it on my phone. It seems nuxt-pwa is not still compatible with nuxt 3, according to this issue, I've installed kevinmarrec/nuxt-pwa-module,

It works partially ( well.. favion and icons is generated locally ) but I don't know how to configure nuxt.config.js:

the router didn't match the subfolder,
no styles or reactivity is working, I got only my html displayed
I don't even know which command to use : npm run build or generate

I've looked a couple of hours, unsuccesfully, so is there someone knowing some good resources explaining how to turn a Nuxt 3 app into PWA and solve my silly problems

thanks :)

Solution

Hey sorry for the late reply, but the API is similar to that of nuxt/pwa meaning configuration from nuxt/pwa will most likely work with the module. To confirm try adding the following pwa config to your nuxt.config.js and check if it works

meta: {
      name: 'Demo Site',
      description: "Some juicy description",
      theme_color: "#dddddd",
},

Note: the name property changes the title of the page. The description adds a meta description tag and the theme_color adds a meta theme-color tag

You can find out more from https://pwa.nuxtjs.org/meta

Any of the commands build or generate will work, but preferably build