I am trying to use a <b-form-datepicker> in a vuejs application.
Browser tells me the error:
[Vue warn]: Unknown custom element: <b-form-datepicker> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I am using other bootstrap-vue compoments without problems.
Giving it a 'name' property does not change a thing.
What am I missing here?
The documentation on https://bootstrap-vue.org/docs/components/form-datepicker does not talk about registering any components. (Did I miss a basic fundamental patr when and how to use components?)
I am using the template-script-style pattern for building this part of the gui.
In my main.js Í do have a declaration of import BootstrapVue from 'bootstrap-vue';
On other locations using bootstrap-vue elements it works out of the box as far as I have seen.
Somewhat nearest other issue about that for me was https://stackoverflow.com/a/51410592/845117.
But there I am missing the link of the documentation of naming components as well as the import statement with the 'custom' path: import { Alert } from 'bootstrap-vue/es/components';
Did I miss a major part? What is the missing link here for me?
#Hiws is absolutely right.
The deal was with the version. I am missing the experience with the npm system.
Thank you!
Related
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.
For the most part overriding an existing Spartacus works fine.
The Minimum amount of effort is
B2cStorefrontModule.withConfig({
cmsComponents: {
DefaultComponent: {
component: CustomComponent
}
},
Mostly I do this because I need to apply some changes to the components html.
So I copy and paste it to my generated customComponent.
But most of the times this html contains directives and pipes that require adding additional Modules to my app.modules.
Sometimes this works fine, but in many other cases the html just wont render.
Example: SearchBoxComponent
when trying to use the html I get a browser Error:
Error: Template parse errors:
The pipe 'cxHighlight' could not be found ("
<a
*ngFor="let suggestion of result.suggestions"
[innerHTML]="[ERROR ->]suggestion | cxHighlight: searchInput.value"
[routerLink]="
{
"): ng:///AppModule/EmvSearchBoxComponent.html#49:21
In other cases I was able to fix this by including the corresponding module that references this pipe "cxHighlight". In this case "SearchBoxModule". But still no good.
How do make this pipe available in my project?
Or maybe there is an even better way around all this importing pain?
You are correct in the way you are overriding components in Spartacus. Like you noticed certain components contain pipes so you will have to manually import those in your components module. This is just the Angular way.
Most of our pipes are reused in multiple components so we try to make them have their own modules to make imports easier.
You are correct about cxHighlight, there is a bug. The pipe is declared in the SearchBoxModule but not exported so it's pretty much impossible to import. I will open an issue to have it fixed.
I am using styledcomponents in my CRA. The thing is that when I inspect an element in the browser all I see is something like this:
<div class="js-cskdjf fdsfsjk fdsfds">..</div>
No idea what component this is , how can I figure this out? I have ejected the app too.
If you are using CRA v2, then it supports babel-plugin-macros
You can use the babel macro from styled components by changing the main import to:
import styled, { createGlobalStyle } from 'styled-components/macro';
This will bring in all properties of the babel plugin that styled components (which you will have to eject to add) This includes better debugging experience, by showing component names inside the devtools. More more information on this, read docs here.
You can use 'React Developer Tools' extension to see the Components layout:
for Chrome,
for FireFox.
I'm currently creating a project using Vue Cli 3. And for its UI, I chose to use Vuetify. In adding Vuetify to Vue Cli 3, I simply ran the command
vue add vuetify
I can use other features of Vuetify like v-layout, v-button, etc. But whenever I'm using v-form or v-text-field, it seems to be not working. And the error is:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option
Can someone help me so I can make these things work? Thank you in advance!
This happened to me too. It seems like an importation problem. I solved it importing vuetify css file at my main.js file. Like:
import 'vuetify/dist/vuetify.min.css';
Did you choose "Use a-la-carte components" during the installation process of vue-cli-plugin-vuetify? If so, make sure that you also have imported and added all necessary components to the configuration file plugins/vuetify.js
Add the names of your needed components to the import statement.
import {
Vuetify,
VApp,
...,
VForm,
VTextField,
...
} from 'vuetify';
And make sure you also add your imported components to the components section where vuetify gets initalized.
Vue.use(Vuetify,{
components: {
VApp,
...,
VForm
VTextField,
...
}})
Further information: https://vuetifyjs.com/en/guides/a-la-carte
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