Are the tutorials still current?


Topic: Are the tutorials still current?

Andrew Davison asked 6 years ago

Hi,

I found your framework while doing a search for MUI Vue integrations, and was very encouraged by the completeness... however when I've gone to start working through your tutorials, they haven't worked...

 

By downloading the latest boilerplate startup code, I noticed that tags in the tutorials are prefixed with "mdb-", while in the demo code it is not. 

 

e.g.  <mdb-navbar-item>.... rather than <navbar-item>.  In the environment I've installed using the latest npm package, the second one worked while the first did not.

 

I'm less inclined to adopt this if the documentation is not current. I'd appreciate any comments you have on this feedback.

 

Thanks,

 

Andrew


Jakub Strebeyko staff answered 6 years ago

Hi there, @Andrew Davison,

Thanks for the feedback! So, first thing's first - our documentation has just caught up with what we've been doing prefixing by all the components, freeing up our users' namespace. The prefixed versions are the current ones, and so I must ask - where did you find demo code that would not be mdb-prefixed? It does not seem the case with the just released MDBVue Demo App 4.10.0 or the previous one.

Could you also share some details on the environment you are mentioning? I definitely see the issue with the codesandbox example, where, even after actually importing the components to the file and registering within the vue instance, they stay unregistered UNTIL the prefix is dropped. Firstly, I thought it might be an issue with outdated vue-loader, which does not handle named exports very well, but it was not the case. It is highly unusual -- I also wasn't able to recreate the issue locally, so that's why I'm asking.

I completely get your concern - in these hasty times there is a risk of getting involved with stuff that is half-baked, inconsistent or just broken. I want you to rest assured - it is not the case with MDB, where your problem is our problem. We will get to the bottom of this once we are able to recreate the issue in a controlled environment, that's why all the details regarding the setup are appreciated.

With Best Regards,
Kuba


Dawid Adach pro answered 6 years ago

Dear Andrew,

Thank you for your message - could you please let us know which tutorial exactly are you referring to? 


Hi,

 

I was using https://mdbootstrap.com/docs/vue/getting-started/quick-start/ and https://mdbootstrap.com/docs/vue/navigation/navbar/#basic-example...

 

I've attached a screenshot of the rendering when I combine these two.

 

And here is a codesandbox that demonstrates the problem...

 

https://codesandbox.io/s/3k0zjrmz5q

 

Thanks for getting back to me,

Andrew


I'm installing into an ubuntu 18.04 LTS instance, with node 8.10.0 loaded, and vue 2.9.6. 

 

The codebox sample was built by selecting the latest available vue template (2.5.2), then adding vue-router and mdbvue. Other than that there is nothing special going on - it's all pretty fresh and unadulterated...

Re the demo code, I downloaded MDB-Vue-Free-4.9.0-npm from the direct download link on the "Quick Start" page (https://mdbootstrap.com/docs/vue/getting-started/download/). That was on the 19th, and it seems that you have since changed that... so either I just got unlucky or there was a delay in this file updating as distinct from others...

In general, I would suggest the following for future releases:

 

1) Adopt the Vue "Breaking Changes" versioning convention, where a move from 4.9 to 4.10 would not indicate breaking changes (in other words, since this one is a breaking change it should be a major version release).

2) Align all your demonstration code (from a versioning perspective) with at least the major revision numbers of the released code... So code that was built with a 2.x.x framework will continue to work if it has a release number that is also 2.x.x

3) When you're making break changes, ensure that the changes to codebase and resources are phase locked... I know this may slow down releases, however thats going to be better than people complaining that the code is inconsistent with the framework... 

I still like the look of the framework, and am still considering the pro version based on your responsiveness, however I'll hang until this all gets sorted out.

 

And do let me know if there is anything I can do to troubleshoot at my end for you...

 

Cheers,

Andrew

 


Jakub Strebeyko staff answered 6 years ago

Hey @Andrew Davison,

The codesandbox example really got me thinking - the example is yet to be taken onto a major study of why exactly goes on there - turned into a task for the Vue dev team. Just to make sure - are you experiencing any prefixed components import problems with the newest MDBVue (4.10.0) release locally?

Hey, regarding versioning advice - it struck a chord there. Obviously, changing the minor for breaking changes can get confusing, so I completely agree. The 4 at the beginning of our version stands there to indicate Bootstrap version it uses for positioning et al, but the Vue taste of MDB since then has been developing way faster than Bootstrap. We might have to a adopt an alternative versioning system - all this made me bring the said issue upstairs to have it discussed. 

Other than that, we are having quite a focus on the constantly growing documentation, it is our source of pride. Naturally, we delegate time to have it up to date, but in practice it is often the users who come to us with stuff that should be straightened up for everyone's best interests. We wouldn't be here if it wasn't for this awesome community, you see. All thoughts and issues submitted are considered and turned into tasks to have the product where the users want it to be.

So, to sum it up: the codebox example will be studied, and the versioning system suggestions considered.

Huge thumbs up for the input! If I could be asking for anything, it would be to have you post here any other thoughts you might have on MDBVue - may it be problems / issues, but also improvement ideas and all the others.

Best,
Kuba


Thanks Kuba,

I understand the challenge, especially when you're trying to support multiple frameworks (including Bootstrap). I'd personally run with a seperate versioning line for MDB - alignment of versioning between products has only ever led to bad outcomes (just talk to anyone at Microsoft :) ).

The additional pain comes from some changes causing breaks in MDB versions for different frameworks. In this case I'd go with indicating any bresaking chage as a breaking version. It might be a little confusing when a breaking change for Vue doesn't cause a break in React, but in this case a false positive is a better outcome than a false negative (i.e. not flagging a breaking change).

Hey, I will continue testingn the framework, and as things come up I'll definitely stay in touch. Let me know when you know what's causing the problem, because at the moment the prefixes continue to break my code...

Cheers,

Andrew


Mikołaj Smoleński staff commented 6 years ago

Thank for all Your remarks, Andrew. We'll stay in touch.

Cheers


Hey folks,

 

I've just picked up another example (this time SideBarNav from https://mdbootstrap.com/docs/vue/navigation/sidenav/  ) and can't get that to work either.

I've copied it straight from the webpage and dropped it into a codesandbox to see if I was missing something, and nothing gets displayed (just like my native code which I'd adapted from the example).

https://codesandbox.io/embed/w6qyr45rzk

Any further ideas?

Andrew

 

 


Hey folks,

 

I've just picked up another example (this time SideBarNav from https://mdbootstrap.com/docs/vue/navigation/sidenav/  ) and can't get that to work either.

I've copied it straight from the webpage and dropped it into a codesandbox to see if I was missing something, and nothing gets displayed (just like my native code which I'd adapted from the example).

https://codesandbox.io/embed/w6qyr45rzk

Any further ideas?

Andrew

 

 


Andrew Davison commented 6 years ago

I think I have my answer - it's a pro component ... 


I have noticed a lot of the example and copy-paste codes simply do not work. 

https://mdbootstrap.com/docs/vue/css/background-image/
"Background image layout - first option"

The layout doesn't look anything like the sample page. The javascript has typos (missing a ,) and 'mdb-navbar-collapse' does not parse to vue, even though it's correctly included.

 


Jakub Strebeyko staff answered 6 years ago

Hi there, @Jacqueline Romanzyck,

Huge thanks for reaching out! These issues should be know fixed.
Thanks to you we are able to straighten these inconsistencies. Please don't hesitate to start up a new support ticket in case something is off, we will fix it in no time.

With Best Regards,
Kuba 


Thanks Kuba,

 

can an you tell me what was needed to fix it?

 

thanks


Thanks Kuba,

 

can an you tell me what was needed to fix it?

 

thanks


Jakub Strebeyko staff answered 6 years ago

Hi @Andrew,

I am not sure what you are referring to. Could you be a little more specific?

In Jacqueline's case what needed fixing was a docs code snippet. In case of sidenav not working on codesandbox your diagnosis sounds just about right - the npm package does not expose pro components.

Is there anything else I might be of assistance?

Best,
Kuba


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 4.8.2
  • Device: surface pro
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags