I have got Vue App. But I need to to add to it some custom tags, that come from another JS framework. How to prevent Vue to try to interpreted it?
<slider floor="100" ceiling="1000" step="1" ></slider>
Now I am getting error:
Unknown custom element: <slider> - did you register the component correctly?
If you are using Vue Version 2.0
You can use config's ignoredElements
Vue.config.ignoredElements = ['slider']
It is already implemented in Vue 2.0, and will be implemented in Vue 1.1
resource: vuejs issues 3090: Ignore some custom HTML components
This is a warning, not an error, so you should have no issues with it. You can use Vue.config.silent = true to hide all of the warnings. Also I think it would be hidden if you set Vue.config.debug = false. So it is really just a logged warning during development but shouldn't affect production.
Related
I am new to a project and trying to fix some vue bugs. I saw these warnings on my browser:
[vue-router] <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.
[vue-router] <router-link>'s event prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.
However, the only place I saw that router-link was used didn't include the tag or event props. Here is how the code looks like:
<template v-slot:cell(name)="data">
<router-link :to="`/org/${data.item.orgid}/repo/${data.item.repoid}`">
{{ data.value }}
</router-link>
</template>
Any idea on what this is happening? My vue version is vue#2.6.14. Thanks!
Those warnings are coming from usage of <router-link> in bootstrap-vue package, which hasn't been updated in quite some time.
First of all, they're just warnings. You should only be concerned about them if you planned on upgrading the app to Vue 3.
And if you do plan on upgrading, those warnings are the least of your problems.
One of the biggest would be finding a Vue 3 compatible replacement for bootstrap-vue, with similar functionality. Current attempts are pale, particularly when comparing more complex components, such as tables, dropdowns and form elements.
Notes:
the warning should only be visible in development and should not appear on production builds.
relevant issues: #6373, #6471,
a workaround the problem would be downgrading vue-router to 3.4.9. But I strongly advise against it. IMHO, you should use #^3 (latest stable 3.x version).
there are plans for making bootstrap-vue Vue 3 compatible, but they are currently stalled by Russia's invasion in Ukraine
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!
When I tried to include the stripe dependency only for the template where I need it (in laravel blade):
#push ('head_scripts')
<script src="https://js.stripe.com/v3/"></script>
#endpush
..I got the error 'ReferenceError: Stripe is not defined'. So I included it in my main "head" partial, so it was included everywhere. Then I ran into the same error when going into the admin section, because it's not included in that template.
But does it really need to be included everywhere?
It is only used in one vue component like this:
<script>
let stripe = Stripe(`pk_test_zzzzzzzzzzzzzzz`);
let elements = stripe.elements();
let card = undefined;
This component seems to be evaluated even when it isn't rendered. Can I get around this issue in some way?
I was having this problem in a Vue app not using Laravel.
But to fix it i put the script <script src="https://js.stripe.com/v3/"></script> in my index.html
Then when referencing Stripe in a component i used window.Stripe That pointed to the script and fixed the ReferenceError: Stripe is not defined error.
Putting script in my index.html worked, but gave me performance issues when I published because it loads the script on every single page, instead of just where it's needed.
So instead I used import {loadStripe} from '#stripe/stripe-js/pure';. It delays loading Stripe until loadStripe is called.
This article helped me use the import:
Importing Stripe.js as an ES Module into Vue
I'm developing an app using quasar framework and Vue js. Initially, I used Drag and drop functionality and linking them with connectors in my web app using jquery UI and jsplumb.
Basically, the jsplumb library is a plugin for jquery and jquery occupies more memory space comparing to Vue js.
So, I thought of using pure Vue js functionalities for my requirement. So is there any Vue js plugins which does following tasks?
1) Able to drag blocks from one container and drop it to the specific location in another container.
2) Able to add endpoints(as provided in jsplumb) to the dropped blocks
3) And able to draw a connecting link between any blocks in the container.
So is there any way of replacing jquery and jsplumb with only pure Vue js and Quasar?
as per documentation: JSPlumb features there's a vue version, but it looks like it's paid.
Also in other part it says "Although jsPlumb has no dependency on jQuery, it also supports jQuery selectors as arguments for elements (vanilla jsPlumb because jQuery's selector object is list-like, ie. it has a length property and indexed accessors)." So you don't need jQuery to use JsPlumb. We got that cover.
Then you can use Draggable which uses vue.sortable as well, for the drag and drop part.
So, what if you already have a bunch of selectors with jsplumb in Jquery? you could replace jquery with this selector method:
window.$ = function(selector) {
var selectorType = 'querySelectorAll';
if (selector.indexOf('#') === 0) {
selectorType = 'getElementById';
selector = selector.substr(1, selector.length);
}
return document[selectorType](selector);
};
Snippet from here: https://blog.garstasio.com/you-dont-need-jquery/selectors/
Hope it helps.
It seems to be impossible to disable auto initialization:
Both
$.lazyLoadXT.autoInit=false;
AND
$.extend($.lazyLoadXT, {
autoInit: false
});
do not prevent lazy loading.
jsfiddle:
https://jsfiddle.net/cvlug/16f5h1mn/
You may want to try the code specified in the docs:
$.lazyLoadXT.autoInit=false;
That didn't work for our project, which loads jQuery and lazyLoadXT sandboxed within a Require.js object. LazyLoadXT appears to be trying to access jQuery as window.$ which, but that is not where jQuery is located when it's loaded inside Require.js.
We ended up making a fork of lazyLoad that addresses this issue, by removing their jQuery wrapper and wrapping their code inside a Require.js define statement. Now it's all the same scope. Maybe it will be useful:
https://github.com/Sitetheory/lazy-load-xt