How to remove the Nuxt loading page in PWA mode - vue.js

I just created a PWA using NUXTjs + the PWA configuration.
I've uploaded it to firebase and it works fine on my phones browser.
But when I save it to the home screen. When I run the app, I get the Nuxt loading screen before entering the app. Is there a way to remove this or customise it to my use?
Thank you.

You have to change icon.png existed in static folder.
Or you can change defaults with following doc:
https://pwa.nuxtjs.org/modules/icon.html#options

Related

react native firebase dynamic links package error

I am using #react-native-firebase/dynamic-links package
When clicking on the link which i created, it works fine for android but for ios it doesn't Redirect to my app and it gives me this screen in the browser
This is an intermediate page and can be eliminated by configuring your dynamic links apple behavior like this.

react-navigation Drawer always displaying when using react-native-web

I have managed to get a web version of my app loading in a browser using native-base, react-navigation and react-native-web but the react-navigation Drawer permanently displays (even with headerShown set to false) and no interaction will get rid of it.
There are numerous config files and components so I have included a test app as a means to test this issue if anyone can help.
Here is a link the the repro:
testApp on GitHub
To set up the app:
yarn
yarn web

Nuxt & Capacitor - Unable to add android support

I have a Nuxt 2 app. I'm following the docs to add Capacitor and Android Support.
Everything is fine up to the point of running npx cap add android. The android folder is generated however there are errors in the terminal
√ Adding native android project in android in 342.51ms
√ Syncing Gradle in 944.40μp
√ add in 345.44ms
× copy android - failed!
[error] The web assets directory (.\.nuxt) must contain an index.html file.
It will be the entry point for the web portion of the Capacitor app.
√ Updating Android plugins in 33.68ms
× update android - failed!
[error] Error: ENOENT: no such file or directory, open
'<sourceroot>\android\app\src\main\assets\capacitor.plugins.json'
I’m not running Nuxt in static mode (due to routes and content pulled in dynamically from a CMS). So I run nuxt build which generates the output into a folder named .nuxt by default.
However nuxt build doesn’t create an index.html as an entry point, the nuxt build actually states Entrypoint app = server.js server.js.map. Hence the error above where it can’t find index.html in the .nuxt directory.
Does anyone know a way to resolve this? Or have implemented Capacitor with a Nuxt SPA?
I’ve found resources when using nuxt generate for a static app but not nuxt build for a spa like in my case.
I have a Nuxt2 web app with servers (app server and separate API server), also deployed as an Android app on the Play Store (in alpha testing). Both app flavours look and behave identical and use the same API server, as I desire.
IMHO, in the lifetime of your (universal) app, BOTH build and generate will get leveraged:
build, likely by whatever web app host you use (ie AWS, Heroku, etc), during deployment of the web app.
generate by yourself, when you're ready to submit to the app stores (Apple, Google, etc), making use of Capacitor.
Let's say you have a new feature to add to the app. On that day, you make git commits and increment your version number and when you're ready to deploy the update...
For the web app...
Make commit(s) and version number change
Deploy to your app host, which for most people, will also run the build step for you
The only time I ever run build locally is when I need to make final tests, troubleshoot bugs or make optimizations (e.g. lower final package size).
For the Android or iOS apps...
Make commit(s) and version number change
nuxt generate
Run Capacitor sync (however which way you do it (for me I use: npx cap sync)
Prepare the app store build & submit (however which way you do it)
What nuxt generate does for you, and what Capacitor needs, is a fully rendered snapshot of all your app views together, all at once. It's the equivalent of a web app user opening all your app's views all at once (e.g. 50 browser tabs), pulling all components/styles/etc into their local browser. This fully rendered app state ultimately gets bundled and is what will get submitted to the app store(s).
In Nuxt docs and terminal output, they seem to strongly suggest that if you're using nuxt generate, that you want to be using target: static, however I will say you should completely ignore this advice. Static is what you'd consider if you had a "brochureware" website or some recipe book app that you update once-in-awhile. It goes as far as in the terminal output of nuxt generate, even if I have target: server defined, you'll still see a line saying something along the lines of "Outputting for target static...". Just ignore it.
There is hardly anything static about a typical universal web app.
I personally use target: server with nuxt generate and I haven't seen any problems in the app (web or Android version).

How can i turn my nuxt universal app to mobile native app

i already made couple of Nuxt RND (universal and spa) application.
Now i want to turn those application into native mobile app.
Vue native is one option,but i just want keep everything in a shape with SSR mode
Please give me your valuable suggestions
Thanks Everyone,
Thanks in advance :)
You can also take a look at Capacitor by Ionic, which enables you to build Hybrid apps. It will basically take your built UI, bundle that inside generated native apps and render it through WebView. After you install Capacitor and run npx cap init you might need to set the directory of your built web assets inside capacitor.config.json to "webDir": "dist".

Nuxt does not load proper css in first load

I am using nuxtjs/vuetify and I used the command npm run generate and uploaded it to my server. In the first load, It doesn't show the right theme for my nuxt app.
After I reload again, it shows the proper color of my website.