I'm developing my extension's options page with Vue, but when I run the dev server, I am not in my extension and therefore can't access chrome.storage.sync. Is there any way to allow access?
Right now, I have to run npm run build, which places the static assets in my chrome extension's directory and takes almost 30 seconds, and refresh the extension in chrome to test changes.
Please let me know if I haven't provided enough info.
Related
I have a tiny project with a bunch of images and vuetify.js library
Project works fine with vue serve or npm run serve
I then do npm run build, copy dist folder to my Raspberry Pi Zero v1.3 where it already runs a few other websites and they work fine
But when I open the built project in browser it just gives me infinite loading tab
Browser also throws "this tab is slowing down browser. Stop it?" kinda error
If I DO stop it I sometimes get this warning in console
"Script terminated by timeout at:" referring to chunk-vendors.js in FireFox or "RESULT_CODE_HUNG" in Chrome
Do I need to deploy code on the same computer I develop it on? Are there any spec requirements or do I need npm packages or something?
Also when I open the tab I can hear the fans in my PC speed up a bit if that helps
Also if I stop the tab the HTML structure is being shown but without images. Can that be the cause of this?
What version of vuetify.js are you using, there was a bug before version 3 in the v-slider: https://github.com/vuetifyjs/vuetify/issues/4746
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).
I am trying to access my VueJS application running on my node server on IE11 by accessing the URL http://localhost:8080. However I cant access the same as only a blank screen appears. I have babel polyfill installed and imported in my main file and have babel presets already setup in babelrc file.
My app is currently running and is accessible on Chrome but not on IE11.
I don't get a single error message in console and have no clue what could be going wrong. Has anyone ever faced this?
You need to use polyfills. IE11 does not support ES2015, it needs to be transiled by babel. There seem to be various ways of doing this.
Please check this guide: jacklyons.me/how-to-fix-vuejs-not-working-in-ie11
or here: cli.vuejs.org/guide/browser-compatibility.html
I've just lost a frustrating amount of time trying to work out why npm run serve was hanging when attempting to run my vue js app. Eventually, I tracked it down to one error in a vue file I made, it took me a long time to work this out since the issue manifests itself in a way that the console window just hangs.
Is there some other way developers can get a more descriptive error list from vue js prior to attempting to run/build?
Personally, I find the most useful and essential tools to be (I use VS Code as "IDE")
Vetur: includes syntax-highlighting, snippets, linter (error checking), auto completition, etc.
Vue.js devtools (for chrome): Not sure about other browsers, but this is incredibly useful for chrome. Let's you see what's really going on with vue.js' components, the store, etc (screenshot from the chrome store page).
Hope this helps!
I want to redirect users to another page if they are loading my web app from a standard desktop browser. I've tried detection scripts using php and javascript in the index file which both work fine in the dev environment. The problem is when I use the 'sencha app build production' command to build the project I get errors. I'm assuming this is because the build script is somehow being redirected by these scripts when trying to build dependencies. I'm not sure how to fix this. I tried building it without the scripts then uploading the production build and adding the code to the uploaded files but the code added to the uploaded files seems to be ignored.
Either the builder is getting redirected or the builder cannot follow the code dependencies to build a single JS file.
You can create a device profile for desktop which will redirect in the launch function when the profile is active: Sencha Touch 2 device profiles