Vue-Material navbar, Missing required prop: "to" - vue.js

So the Vue-Material docs (https://vuematerial.io/components/bottom-bar) says it is possible to create a md-bottom-bar stuffed with md-bottom-bar-item, while being able to make md-bottom-bar-item act like a <router-link>
Their code can be seen right below "Seamless integration with Vue Router" (this is exactly what it's meant for by the way ^^), and my code looks like this :
<md-bottom-bar-item
id="messageRoute"
to="/Messages"
#click="stuff"
md-label="Notifications"
md-icon="message">
</md-bottom-bar-item>
<md-bottom-bar-item
id="settingsRoute"
to="/Settings"
#click="stuff"
md-label="Options"
md-icon="settings">
</md-bottom-bar-item>
These are tabs to a notifications list, and the settings page for my app.
The error I got when I click on an item is literally this (I got it 5 times though, beucause there's 5 items in my navbar) :
[Vue warn]: Missing required prop: "to"
found in
---> <MdButton> at src/components/MdButton/MdButton.vue
<MdBottomBarItem> at src/components/MdBottomBar/MdBottomBarItem.vue
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdBottomBar> at src/components/MdBottomBar/MdBottomBar.vue
<NavBar> at src\components\NavBar.vue
<App> at src\App.vue
<Root>
I got the same error without the #click='stuff' by the way, nothing to do with it.... I guess...
Is it about Vue-Material#1.0.0 (the one I'm using) being in beta or ? It feels like I'm doing what is showed in the doc, I even copy-pasted it and changed things so it would fit in my app.
For now I just did a goTo(path) methods, that just do this.$router.replace(path), but the bottom bar is not sync with Vue's router, with the md-sync-route attribute, like so :
<md-bottom-bar md-sync-route>
<!-- stuff -->
</md-bottom-bar>
Not a critical problem, but damn, why Vue.js, why ??? ^^'
And, what a troll :

Ok, this is interesting.
As the issue you gave me pointed out, this might be a version problem, but my vue version is 2.9.2 (checked it with vue -V). Nevermind, I still ran npm update -g vue, and the answer I got from the terminal... well :
+ vue#2.5.11
updated 1 package in 0.626s
Now everything works fine (router, to, etc...).
But why though ? Does vue-material uses a slightly different vue, or there's some parts that are redefined, like router link's behavior on certain element like md-bottom-bar-item ?
And why npm install couldn't fix that ? Well anyway, now it works, and my last questions exists probably because this framework is a beta and few things have to be done... or because I'm starting to do stuff with npm etc ^^
If you know something it would be helpful for me to know, feel free to tell me, I'd be glad to hear...

It will also happen in 1.0.0-beta-8, but there seems to be a commit to fix
https://github.com/vuematerial/vue-material/commit/6860d3a004b09baef751724c0d9bf1ebdf92b752

Related

How do we upgrade our vue.js/jest tests past version 24? Things break a little at v26, more at v27

We're currently testing a vue.js app with jest 24.9.0, ts-jest 24.30, and #types/jest 24.9.1 . We see that jest is at v27 and I looked at upgrading, but things broke all over the place, so I backtracked to this combination:
#types/jest: upgrade from 24.9.1 to 26.0.14
jest: upgrade from 24.9.0 to 26.6.3
ts-jest: upgrade from 24.3.0 to 26.5.6 (shouldn't matter).
It now looks like mount(VUE COMPONENT, { propsData: props }) is returning an empty <body /> element (mount is imported from #vue/test-utils).
Anyone have suggestions? We also get many warning messages about finding components with 'find' or 'get' -- how should we replace our querySelector strings (once we actually have sub-elements in the objects returned from mount so there's something to find or get)?
Try referring to the changes here.
Its jest official repo mentioning all the changes with various version. Check if there are any breaking changes.

Difference in HTML generated between Vue files between dev and prod

I'm new to Vue and I hope someone can help. I have an app that uses Vuetify (2.2.23), and when I render it locally for development, the HTML contains:
So, v-main is a class, and it's being located in my CSS for styling. However, in another installation from the same files (I've checked the versions of everything too), I get:
So, v-main is now an element, so the CSS is not being applied.
I realise that I can duplicate my styling so that they look the same to the user, but I'd like to understand what to look for in the setup of the projects that would make this happen in the first place?
The versions I'm using are:
Vue 2.6.11
Vuetify 2.2.23
Thanks in advance!
Why is it the thing you've checked the most is the thing that's the problem? This was a version problem after all. I used the ^ minimum requirement, and the two servers ended up using different versions. Bumping both to a minimum of Vuetify 2.3.9 solved it.
Posting this answer in case it helps someone else.

Gridsome build fails when used with vue2-leaflet plugin

When running gridsome build I get window is not defined. Anyone has an example of making vue2-leaflet work with the client only option for gridsome?
Wrap your component inside template with <ClientOnly> tag, more info in my other answer
I've been struggling with the same problem (but with other libraries) and the only solution i've found was to copy the package into src/. Something like :
cp -a node_modules/package-giving-me-headaches src/plugins
and
// main.js
import PackageGivingMeHeadaches from "~/plugins/package-giving-me-headaches"
Depending on the package, you may need to target a specific entry point :
// main.js
import PackageGivingMeHeadaches from "~/plugins/package-giving-me-headaches/src"
You know you need to do that when Gridsome tells you :
"export 'default' (imported as 'PackageGivingMeHeadaches') was not found in '~/plugins/package-giving-me-headaches'
Edit : Yes, i know its not ideal and ugly, but i don't have time to fight for it.

ngx-bootstrap Dropdown Dropright Placement

I am trying to recreate the basic dropright example for the Bootstrap 4 component: https://getbootstrap.com/docs/4.1/components/dropdowns/#dropright using Angular 6 and ngx-bootstrap (3.0.1 as of writing). I have found solutions to get the dropdown to open down (standard) or up (dropup) but dropright isn't working.
https://stackblitz.com/edit/ngx-bootstrap-dropdownplacement
From the docs, there seems to be a "placement" input - https://valor-software.com/ngx-bootstrap/#/dropdowns#dropdown-directive - but there are no examples of this and I've tried attaching it to any one of the elements dropdown, dropdownToggle or *dropdownMenu. Basically this is an important part of a sidebar menu, where the submenu dropright.
Can anyone point me in the right direction to get the dropright functionality working with ngx-bootstrap, please?
Sidenote: I have managed to get this working with ng-bootstrap but wouldn't want to switch packages if I don't really have to.
I got your point but I think this happen because of the bootstrap version.
https://getbootstrap.com/docs/4.1/components/dropdowns/#dropright
if you check this url you will see they are using bootstrap v.4.1 and you are using ngx-bootstrap, both have different CSS classes that's why you facing this issue.
If you want to fix this issue. Please do few step:
1) https://www.npmjs.com/package/bootstrap (npm install bootstrap)
2) Than include in angular-cli.json file, like -
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
3) Remove your BsDropdownModule from app.module.ts file
If I missed anything please let me know
Thanks !!
I found the solution to make the placement work. You should add container="body" and of course placement="top right". Although it doesn't work as expected
To show it on top use [dropup]="true"

Quill Editor and Vue.js

I'm a vue.js beginner and I've been trying to integrate the Quill editor into Vue modules. At first, I tried with the vue-quill plugin but documentation is very poor and I couldn't understand how to use it. Very frustrating.
Now I don't know if I'm better off trying to create my own plugin or if I give the existing plugin a second try and maybe try to enhance it.
What I want is someone to please provide some sample working code to get this going.
Upon inspecting the vue-quill package.json file I noticed it depended on an old version of quill :
"dependencies": {
"quill": "^0.20.1",
...
}
Since I was getting fragment errors from that build I decided to take the original code to suit my needs. At this point, you can copy this modified component and use something like vue-cli to use it.
I can't give you precise steps on vue-cli because my project is based on Laravel, but the idea of storing different .vue files into a components folder should be similar.
Finally, I simply use the component in one of my views :
<quill :content.sync="content"></quill>
Note : I am still fiddling around the component that I uploaded on gist, so take it as a starting point. The code is fairly simple.