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
Related
I'm using bootstrap-vue:
<b-container fluid="xl">
<h2>Example</h2>
</b-container>
When using a "fluid" prop, Vue.js gives me a warning in the console:
[Vue warning]: Invalid prop: Type check failed for "fluid" prop. Boolean expected, got String with value "xl".
In bootstrap-vue documentation the "fluid" prop is known to be valid.
How to make Vue.js recognize bootstrap props without generating warnings?
I think you are getting this error because you might be using an older version of bootstrap-vue.You should update your bootstrap-vue to 2.2.0 or newer (2.23.1 is the latest at the time of my answer).There might be breaking changes between the version you are using and the newest but it will be better for you in the end and you will be able to use the fluid prop as a string (as stated in the documentation).
v2.2.0 Changelog with mentions to the b-container
update
Initial commit related to this change (the one mentioned in the
changelog)
Latest commit related to this
change
How can I make a component delete itself in Vue 3?
In Vue 2 you could say this.$destroy(); But apparently that got removed and there is no replacement for it: "vm.$delete removed (no longer needed)" (from https://v3-migration.vuejs.org/breaking-changes/migration-build.html#fully-compatible )
Not sure why it's no longer needed since they don't explain why or give an alternative and I can definitely still see the need for something like this.
For now I just use a <div v-if="show"> but it seems a bit of a hack.
From Vue 3 docs you can find it here: https://v3-migration.vuejs.org/breaking-changes/introduction.html#removed-apis that you don't need to manually manage the component lifecycle anymore. So I guess you can deprecate the piece of code executing ".$destroy()".
I've been banging my head against the wall all day on this.
Basically, I inherited a pretty large Vue 2 project with webpack-only implementation (no CLI) and with hundreds of SFC components. Almost every SFC component uses a template with the first element indented -- like this:
<template lang="pug">
span
b Some Stuff
</template>
This has been compiling just fine for months. It seems like Vue 3 and its associated versions of the vue-loader and compiler don't like this... it must be like this:
<template lang="pug">
span
b Some Stuff
</template>
As you can imagine, I am getting hundreds of "unexpected character 'indent'" errors during the build. I run into this whether I use the CLI or whether I use the webpack implementation with all associated upgrades having been done manually...
As much as I love the idea of manually paging through each of the hundreds of .vue files and tabbing back the content, there has got to be a better way around this... right? There appears to be an npm package called vue-indent-pug-loader but after replacing the pug-plain-loader in the webpack file, this doesn't seem to have any effect on the problem.
Is there some utility you know of that can roll through and "fix" my template blocks, or something I can place in front of the compiler to let it process the templates as-is, or am I stuck either manually fixing these or staying on Vue 2?
Thanks!
In a Vue.js project I am using learning to use Modals from BootstrapVue. In my code I have a file Items.vue with something like this:
<div v-b-modal="'modal-' + query.id"> // this is line 15
...
</div>
<b-modal :id="'modal-' + query.id">
<p class="my-4">
hello
</p>
</b-modal>
It works well. However, Intellij IDEA with the Vue.js plugin keeps beeping with the Warning:
Warning:(15, 5) Attribute v-b-modal is not allowed here
The thread Vue Attribute is not allowed here suggests that this happens with non-.vue files, but it is not the case here.
Replacing v-b-modal="..." with :v-b-modal="..." (that is, with : before the attribute to make the binding more explicit) removes the warning, but then the code does not work.
I am working with Intellij IDEA 2018.1.8.
IDEA version you are using is very old, Vue.js support has been significantly improved since v. 2018.1. In particular, WEB-38028 was fixed in 2019.2. Please consider upgrading IDEA to the most recent version, BootstrapVue directives are correctly recognized there
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.