I'm preparing to deploy my first Static app from a Nuxt.js 2 project.
While the static routes are generated fine, my dynamic routes are not. Once I remembered they were hidden in my dropdown menu - duhh - I created a /generate page which renders all my dynamic routes using the nuxt-link component. My assumption was that the crawler should find the /generate/index.vue page and thus the links on it, and crawl those.
It didn't.
Then I noticed a comment from Sebastien Chopin mentioning that SSR should be enabled when generating Static apps. Ok. So I re-enabled SSR and I've hit nothing but errors. A couple I've figured out but this latest one has got me stumped.
Some googling has not revealed a clue that appeared relevant - or at least I didn't recognise them as relevant - so I need the 'worldwide developers' team help.
Does this error suggest there's an issue in Vue itself? I don't use 'self' anywhere in my app code soooo... hmmm?
Cheers,
Jeremy
Well it's generating now (has been for a few weeks, been a busy time!)... however the generated pages are not outputting with content, but I think that's a different issue.
My configuration currently is;
target: 'static',
ssr: false,
generate: {
minify: false, // Nuxt 2.15.4 > Deprecated next major version > Use build.html.minify instead!
routes: dynamicRoutes
}
I'll keep working on it.
So we tried upgrading to Vue 3 along with the Vue Apollo client (to V4). Everything seems to work fine such as apollo within the script so it's verified the library is running.
It's just that whenever we try to make use of component within the template as instructed in: https://v4.apollo.vuejs.org/guide-components/query.html#query-gql-tag
No query is being executed. Trying to access v-slot="{result}" gives a null error.
Read the docs and nothing seems to be different in terms of setup. Has anyone else dealt with this?
Try to use options-api version
https://v4.apollo.vuejs.org/guide-option/setup.html#_1-install-vue-apollo-option
On my builds I can route through the router-links to each component but not through the Menu click() events.
From the menu template, I try to change the route by using:
win!.loadURL(“http://localhost:8080/login”), for ex., but it simply goes blank (for any URL) when running the build.
Also, if I import the router and try to use router.push(), at the main process, it ends up in a lot of errors, and also doesn’t work.
If I use electron:serve, though, instead of running the build, it works fine. Although it reloads the page from the Menu, differently from the router-links, through which it keeps at the same page and simply changes the route component.
I need a build that changes the route view both from the Menu as from the router-links.
So, how can I change the route of my SPA from the Electron Menu and make it run on a final build as it kind of works when running the dev project by calling electron:serve ?
How should I change the Vue route by using an Electron Menu click() event ?
Full Project:
https://github.com/danielpm1982/open-weather-client
You can't change the route or use the Vue-router from inside the Electron main process, as you also can't access the Electron Menu from inside any Vue component for activating / deactivate submenus according to the login state (another doubt I had posted and answered myself).
Electron Menus should always be managed at the Electron main process.
Vue routes should always be managed at the Electron renderer process - from inside Vue components.
So, as the events are generated on layers different from the ones where they should be treated, in both cases, just notify each other layer, through IPC messages, that you want that thing to change and it will be changed there, at the proper layer.
In the case of changing the Menu, the login / logout Vuex state is checked inside the Vue components, then the component sends an IPC call to the main process and the submenus are activated or deactivated there.
See this solution on the link:
How to activate / deactivate an Electron.js submenu from inside a Vue.js Component according to a specific Vuex state?
Another similar solution is the one for this post problem, but the other way around:
For changing the routes, instead of using win.loadURL() or win.loadFile() at the main process side, one should send an IPC call to the renderer side, in this case to the App.vue component, using win!.webContents.send("changeRouteTo", "/"), for example. The "changeRouteTo" is a custom channel name and the "/" is the path to which the router, from inside the Vue component, at the renderer side, will change the route to - for the "/" it's the "Home" route. For changing to the "Login" route, the path would be "/login", and so on... according to the router.ts config. At the renderer side, in this case at the App.vue component, it is set an IPC renderer listener for the "changeRouteTo" channel or event, and, each time it receives a route change request from the main process, then this.$router.push() is used, from inside this component, to change the route to that correspondent route.
This should work both for development and non development environments, when using npm run electron:serve to run the project, as for the final build execution, after npm run electron:build is called and a bundle is created.
Hope this solution is useful to others.
See the full final project here, it's a pretty nice sample app:
https://github.com/danielpm1982/open-weather-client
I'm currently trying to use a custom component (https://github.com/wolfika/vue-playing-card) in my demo application built with Vue CLI.
First I've tried in a JS Fiddle (https://jsfiddle.net/xwb59m8g/1/) and everything works as expected just by importing the <script> (as explained in the Github "Browser" section) and using the <vue-playing-card> custom component. Than I've tried including the component in my Vue CLI app by following the instruction on the Github page under the "Bundler (Webpack, Rollup)" section and everything works.
My problem is that, for some reasons that I will explain if you need to know, I have to include this component using the <script> tag, as in the JS Fiddle, and not with the "Bundler (Webpack, Rollup)".
I tried including the <script> tag at the bottom of my index.html file but when I try to include the custom component in my Vue application this error gets printed in the console:
Unknown custom element: - did you register the component correctly? etc.
I really don't understand what it's happening since in the JS Fiddle everthing works as expected... can you help me? Thanks in advance and sorry if this is a stupid question, but I've tried and searched all I could.
I run into a Problem with vueJS at version 2.6.11 and Safari version 12 and 13.
On some pages of the webapp the vue watchers are not initalizing correctly, appearently because of a race-condition inside the vue initalization.
The error results in, that on some pages of the Webapp, none of the v-if bindings and stuff like this works anymore.
Currently on version 2.6.11 i even do not get an error. Luckily on an older version (don't remember exactly which one it was), i got an console error which leaded me to:
this.getter.call(vm, vm);
in vue/src/core/observer/watcher.js:106
with the error string does not match the expected pattern
setting breakpoints to this part of the code, when the exception appeared, and running this.getter.call(vm, vm); again using the browser console, results in a working page after the rendering is finished. So it seems to be because of a race-condition i guess ?
This part of the code is called multiple times during the app initalization.
this.getter is using the function function (){e._update(e._render(),n)} (minified), when the error appears.
Anyone encountered the same issue, and/or knows a fix for this problem ?