I've been bashing my head against this for 9 hours now. How do I use a directive inside a component?
I'm trying to implement a click-outside event on my clickable components, following this thread. But my component is in a separate .vue file with template, etc, and I have been googling and throwing copy pasted code at it for hours and I just can't get it to work. It either can't find the imported file, or can't find the click-away function, or all sorts of crazy compile errors or runtime errors.
I'm still somewhat new to Vue, but what's the standard way of using a directive in a component? I thought it would be super simple, but I've got hundreds of tabs open and every single possible google link is purple, and nothing works. How are directives even possible if no ones using them with components?
Related
Currently when importing components from another file to be used inside the template part, if the name of the component is not correct, Vue just gives a warning about this. Is there any way to configure it so that it errors during compilation or building, so that it is easier to do refactoring or moving around components, since in Nuxt, we can enable auto-discovery component, just that we need to include the directory it is in as well as part of the component name. For example, if I have a component named PhoneNumber inside base folder inside components folder, I can use that component directly by using BasePhoneNumber.
I have tried disabling the auto-discovery component in Nuxt, and I got a lot of this unknown custom element as expected. But this only triggers the warning, which I can only see the warning when I'm browsing that page. So there's a big chance of making a mistake where I update the name of the component in one page, but another one in another page is missed
I have a Vuejs SPA that I want to clean-up and do some refactoring on. One thing I would like to do is detect
Unused or extra props defined in custom components. I don't mean within the component itself (this I do via eslint-plugin-vue), but when the component is instantiated somewhere in the app within another component.
Unused or extra $emits defined in custom components. Again, are there $emit that are never actually handled when instantiating a component?
Identify component's data that actually dont need to be reactive and can be removed from data
Unused components
Unused exports in my js files
The linter I use, eslint-plugin-vue, does its work component by component but here I want to be checking unused stuff across several components.
I could not find any built-in tool for these tasks, what's the best way to do this?
Even if the app contains hundreds of components I could still do this manually, but ideally I would like to run this process frequently to keep the app clean.
After some research I ended up writing my own node.js script using regex for parsing my codebase. It's too ugly for me to post it anywhere but it is <300 lines and writeable in a day or so.
I'd like to use the technique described here to have web workers in a component without having to handle additional files.
However, adding another <script> element seems not to work:
it I add it before the component's script part it doesn't get recognized/found by document.querySelector
if I add it after the component's script part, the component doesn't compile
The only solutions I've found are:
source in a multiline string: ugly, messes up the editor
script inside the template: even uglier, exposes innards
Any better solution out there?
I have an old-style, multiple-page website, with a multiple steps checkout process. This all works with JS disabled, and it is critical that it keeps doing so.
The checkout form has no JS at all, at the moment, and I'd like to improve it progressively (eg. dynamically showing or hiding fields, doing live validation, etc...).
I have already wrapped the entire website with an #app div, and I mounted a Vue instance to it. Then I created a few components which work correctly (but are not critical, so if JS is disabled then the whole thing keeps working and the components are just empty).
Now I have a long checkout form which is generated server-side (say: <form id='address-form'>).
The best course would be to put it into a component (say <checkout-form>) and use it. I can't do this, because 1) the form is generated server-side 2) it needs to work without JS.
Ideally, I would love to create a component with no template, and attach it to the existing HTML.
Is this even possible?
Edit: continuing to dig the Internet, I found this tutorial. This is exactly my problem, but if this is the only way to do it, then I will revert to JQuery :) Manually duplicating the entire HTML (one server side, the other in Vue) is definitely not a good idea.
So I am developing a site as a SPA with Vue JS and I have just came across a issue.
I went to insert Adsense's code snippet like i would normally, but Vue complains with the following
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
So I am now a bit stuck, I have seen a library that will put Adsense in as a component but its a very new/small library and i could not get the thing to work.
I also have a lot of other tracking pixels that will need to go on the site in a similar fashion so I will need to find a way around doing this.
Can anyone lend some advise, thanks.
Try modifying the index.html file instead of the *.vue files. The Vue SPA app automatically listens for updates to *.vue files. So pasting the snippet in html file will bypass the compiler checks for undefined variables, etc.