I'm building a Vue.js app that will be run on devices where I don't have access to a dev tools console, such as a game console. I've created a vue DebugPanel component that contains several tabs, one of them being a "log" to write to.
The UI is mostly working as I expect, but now I need to actually take what's in the console and have it output to the element in the component.
I'd like to use this solution of hijacking the consol.log function. This solution works great in a non-vue HTML page, but I'm having trouble with the best way to incorporate it into a Vue.js app.
The issue I'm having is that each tab section on my DebugPanel is hidden/shown based on a v-if attribute. The log element is only in the DOM when its tab element shown. So a call to document.getElementById errors.
Any thoughts on how to implement this in Vue.js?
You can just use Vuex store to pass data through all the app. And i think it would be better to use it in your app for global data.
Related
based on the following VueSchool tuto https://vueschool.io/courses/vue-router-for-everyone I'm trying to create a Vue app with a menu based on a list of applications found in an October server. I try to replace the static destinations[] by an applications[] filled from the database.
For that I use Axios and Vuex. I'm able to query the data, but I spent many hours trying to get it at the application loading, to create the menu, before the application is displayed...
I have a main.js an App.vue and a MenuApp.vue component for displaying the menu.
My problem is that my getter is always called before my mutation and that my application array is always empty when the menu is creating.
Is there a way to load and init properly all data before displaying my vue.js menu component ???
Or could I reload my menu component after the mutation ?
Thanks for help ;-)
You could use a "loading" layout, before load the main layout.
From "loading" layout, use async to load the applications list and all data you want to get before. At the end, just switch to main layout with applications list loaded.
From OctoberCMS side, I don't know how you are made the requests. But, try to use simple routes, calling router controllers, instead of using components. This will made a more direct request, and a better performance on your final project.
I'm using Nuxt to build a component library for use with the various CMSs that my company uses. Basically, I want to use the generated HTML to create reusable widgets for the CMS. The CMSs in question can't use Vue components directly because the client's admin area doesn't play well with Vue (for example, the inline editor in Kentico 12 does not work at all with Vue and our clients require this functionality).
Using Nuxt to build the component library works great as long as the components don't DO anything. However, if I want to create an accordion that has an #click event, it doesn't work when loaded into the CMS. I narrowed down the issue:
A) http://example.com/Accordions/
B) http://example.com/Accordions/index.html
Case A works fine. With Case B, the page loads but none of the scripts work. The events do not fire at all, and I'm getting the following error:
"DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method."
The Accordions component doesn't work on any page that is not http://example.com/Accordions/.
Nuxt is generating the Accordions/index.html page so I'm assuming it's connecting the route with the functionality in the JS, but I'm not sure exactly what the problem is, what to search for or how to fix it. I've been searching for hours. Can anyone help me with this?
I have installed VueJS chrome extension:
VueJS chrome extension
but I find it quite useless unless I am missing something. So I posted the question here if some one can provide what I am missing.
I setup this vuejs project:
Kazoo on github
This project has several vue components but most of these components do not show up in vuejs chrome extension. This is the screenshot:
The Vue devtools show the application as you are viewing it now (just like the DOM viewer shows you the DOM elements that are currently on the page). Clicking a component will show you the internal state of that component, such as props and data. This allows you to infer where a problem may be originating when you see a bug occur in your application. It also allows you to figure out if the correct components are being loaded. It does not show you components that are currently not in the document, as it would not be useful.
The vuex tab will allow you to inspect the entire store, and all mutations that have been done and with what payload since the vue devtools initialised. It will show you what is computed by the getters.
The Events tab will show you which events have been fired. This may be particularly nice if you have a framework that uses them, or if you use global events yourself.
Is it possible to use VusJS Components into Moqui Screens?
I know for sure that you can render Basic HTML but I wasn't able to find a hook for the VueJS app.
The need comes from the following scenario:
While form-single widget can be made collapsible, form-list cannot. So I wanted to use vue-collapsible (https://github.com/vue-comps/vue-collapsible) but I don't know where I am supposed to register the component.
If there's no way to use vue, maybe you can help me with my concrete issue.
In the 'vuet' render mode which is used in the /vapps path (as opposed to /apps) it isn't actually HTML sent to the client it is a Vue Template. If you look at the text returned by the server you'll see a number of Vue Components already being used (see the WebrootVue.js file for their source). You can see this in Chrome using the Sources or Network tab in the tools window or similar tools in other browsers. If you inspect an element you'll be looking at the rendered HTML, ie after Vue runs the components to change the Vue Template to HTML.
This means that if you include the necessary JavaScript file(s), and CSS file(s) if needed, then you can use any Vue component in the Vue Template returned. You can do this inline in XML Screen files using the render-mode.text element with the #type=vuet.
None of this runs under NPM in the way VueJS is used in Moqui Framework through XML Screens. In other words it isn't a pre-packaged Vue app with 100% client/browser rendering but rather is a hybrid client and server rendered approach.
You can include scripts in this Moqui hybrid approach using the script element with a #src attribute for the script file which the WebrootVue.js file loads on the fly. There are various examples of this for additional JS scripts like Chart.JS
I'm using vue2, vue-router with keep-alive to develop a dashboard. What I want to achieve is following:
page should re-fetch when login -> logout -> login other account
(use beforeRouterEnter, beforeRouterLeave to re-fetch !? or use condition to keep alive component or not !?)
but vue-router can't use vue data to check page should keep alive or not...
in HTML template, it will render and render. If there has some vuex data show directly in HTML, it will error with not have the object inside object yet ex:
user: {
plan: {
xxx: ''
}
}
sure I can give vuex data all of property init data. It can avoid this thing happen, but if the page with keep alive, it still happens...
also, I can write many v-if in the template, but I think it's not a good idea to put v-if all around the template to make sure data exist..ex:
v-if="user.plan && user.plan.xxx"
or add v-if in component root template, is that a good idea !?
use beforeMount without keeping alive, there is no problem but it's not a good user experience dashboard (when you change page, data disappear or you have already load page data but load again)
Is there anyone who really use Vue 2 and it's relative library (vuex, vue-router) to develop can tell me how you develop your SPA project !?