I'm currently exploring unit testing and Vue test utils particularly. I have an external library (vue-toastification) that shows a toast message when something occurs. I'd like to test that this toast has been shown, if an Error was thrown. But the problem is that the toast is rendered outside component's scope (in App.vue, as far as I can see), meanwhile with .get method we can only retrieve child components of a wrapper. So, how can I access this toast component without mounting the whole application? Maybe I should somehow use <teleport>?
Related
I'm currently working on a sample application to learn Kotlin/Js with the react library. When using the normal JSX syntax, a component can be set to be triggered when a specific URL hits using the BrowserRouter & Route API like below.
Main Component
Navigation Component as directed like in this youtube video
When attempting the above code in Kotlin, it resembles something like the screenshot below using the KotlinDSL
The main function where the component is rendered is shown below
However, that creates an Uncaught Error Exception like the one below
One of the reasons its also so difficult to debug is because my source maps dont work and hence most of my debugging errors are actually in Javascript. But anyways after searching up the javascript error, I found this article about the new Router update that disallows adding components as children.
As a result I tried to pass in the components through the element prop but there seems to be some incompatibility with them.
the element prop accepts an optional ReactNode? and I cant seem to convert my Function Component of type props to a ReactNode. When I try to pass in an optional ReactElement? by calling the create method, I also get an error.
I have been struggling with the Kotlin Documentation and can't seem to find enough examples of react-router implemented.
Can anyone help me out with how to pass in a Function COmponent into the element prop for the React Router?
I am using chrome-devtools to see the performance of my vue js application. The application contains many components.
I am seeing a wave of updateComponent calls for all application componenets as you can see in the photo below.
I see compoent re-rendering even they do not have an html template.
How can i know which variable that caused vue js component re-rendering ?
I am still unclear on where I should use the beforeMount and where the created lifecycle hook. It seems to me that in both, the reactive data has been loaded and it is before the DOM has been mounted.
In most cases it doesn't matter whether you use beforeMount or created but there are some where it matters:
Accessing original DOM element your root Vue component is mounting on
can be useful for integration with any server-side rendered framework (php, rails etc.)
explanation and example - When to use the lifecycle method beforeMount in vue.js?
in created hook this.$el is undefined, in beforeMount it's the original unmodified element, in mounted it's root element created by your component/template
Server-side rendering (Nuxt, Vuepress etc.)
docs
beforeCreate and created are only hooks called on the server
that means you should not use any code which needs window, document or any browser API in created as those will not be present on the server
on the other hand code placed in the beforeMount (or mounted) is executed only on the client (browser)
The beforeMount hook runs right before the initial render happens and after the template or render functions have been compiled(when vm.$el has not been created yet).
created is the step after initialization of your component(where you are able to access reactive data and events that are active with the created hook. Templates and Virtual DOM have not yet been mounted or rendered)
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.
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.