i got a little Problem, i'm creating a vuejs package in which i use vue-i18n to translate things.
The Problem is, if the user haven't got vue-i18n installed it breaks the package (obviously since i use it).
Do you know a way to prevent this?
My first approach was to just v-if the translations in the template to check if i18n is registered within window, but that obviously won't work if a user names the object differently.
you can check if this.$i18n exists
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
Have a situation in which there are two different components, that have templates in which there are 'this' used. Removing all 'this' from templates right now, but saw this situation and got curios why it is happening like this.
In this case it throws error:
<a :href="`${this.$locale() ? "Yes" : "No}`">
In this case it works:
<title :lang="this.$locale()">
These are just examples, but is there a reason that one works and other throws error? Couldn't find any information on this in Vue documentation. Could this be because of ternary operation?
First of all, to be clear for the people reading this, you shouldn't use this inside Vue SFC templates.
To anwser, that's because of how Vue compiles your template and its properties. I'm not an expert on Vue internal mecanics so please take what I say with caution.
:lang="this.$locale() Here, it could be that Vue removes the this reference at build time.
:href="`${this.$locale() ? "Yes" : "No}`" Here you're using a string interpolation, which is evaluated at runtime. Vue has no way to remove the this safely, because it could be refering to something else than the component instance. So this just stays as is in the final bundle and breaks at runtime.
This is just my guess from my understanding of Vue. I think only a Vue maintainer / contributor could anwser this properly.
I have this message in the Chrome console since I updated react-admin to version 3.10.0, I tried to dig into the document but can't find any information or example. Anyone encounter this, or luckily any members of react-admin seeing this, please help!
Edit or Create child components must be used inside a <SaveContextProvider>. Relying on props rather than context to get persistence related data and callbacks is deprecated and won't be supported in the next major version of react-admin.
I have a form component, using <SimpleForm>, that is used in <Edit> and <Create> components. There is no warnings when app is running.
But I have the same issue when unit tests are running on the form component. I tried to wrap it inside a <SaveContextProvider> without success... if someone have solution ! 👋
So if you encounter the issue during runtime you should verify that your form component is well wrapped as mentioned in the warning.
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 a divided my vuejs application in to components and whenever i update the architecture of the application, I need to change the component path wherever added. This makes the application maintenance difficult. So I have added the component path to settings.json file and with that I am trying to load the component. But this is not working. Please see the code below.
import Registration from platform.urls.uiComponent+'Account/Registration'
Does any one have any idea how to set dynamic component path in vuejs ?
According to this answer it is not possible to do that. There is however an alternative way to achieve what you want to do if you use a tool such as webpack. In webpack configuration you can define an alias for a directory e.g. components, which you can use and afterwards change in a centralized location.