Help with Vuetify

[mrchow19910319]

Here I have two codepen where they had the same codebase, but showing different output on the frontend.

1. Vuetify version 1.x

https://codepen.io/zhouxiang19910319/pen/ZEeZqyQ?editors=1000

 

2. Vuetify version 2.x

https://codepen.io/zhouxiang19910319/pen/poeBwBV?editors=1000

 

Why is this happening???

How can I duplicate the old result using vuetify 2.x??

[AnotherMax]

If you use the keywords 'text tile' on the v-btn e.g.

<v-btn text tile v-for="item in nav" :key="item.icon" to="#" :title="item.title">{{ item.text }}</v-btn>

That should be very similar. The docs are very good as they are interactive and let you see all the options for components: https://vuetifyjs.com/en/components/buttons/#usage

Here explains what the two "text + tile" actually do: https://vuetifyjs.com/en/components/buttons/#text

[mrchow19910319]

6 hours ago, AnotherMax said:

If you use the keywords 'text tile' on the v-btn e.g.

<v-btn text tile v-for="item in nav" :key="item.icon" to="#" :title="item.title">{{ item.text }}</v-btn>

That should be very similar. The docs are very good as they are interactive and let you see all the options for components: https://vuetifyjs.com/en/components/buttons/#usage

Here explains what the two "text + tile" actually do: https://vuetifyjs.com/en/components/buttons/#text

Wow, thank you.  I was solely focusing on the list item section of the doc. Also how come with the same code base those 2 codepen gives you different end result??? Is it because of the Vuetify version change? ???

[AnotherMax]

13 hours ago, mrchow19910319 said:

Wow, thank you.  I was solely focusing on the list item section of the doc. Also how come with the same code base those 2 codepen gives you different end result??? Is it because of the Vuetify version change? ???

So v1 has this "flat" keyword but v2 doesn't. You can see this in the v1.5.x docs:https://v15.vuetifyjs.com/en/components/buttons#flat

I'm guessing the reason there are subtlties between v1 and v2 is simply the implementation between to the two. You could inspect the code e.g. the css output and compare them to find the differences.

 

There is also this https://vuetifyjs.com/en/getting-started/upgrade-guide/#upgrading-from-v1-5-x-to-v2-0-x which you might find useful if you have more components to move across.

[mrchow19910319]

On 6/23/2021 at 1:04 AM, AnotherMax said:

So v1 has this "flat" keyword but v2 doesn't. You can see this in the v1.5.x docs:https://v15.vuetifyjs.com/en/components/buttons#flat

I'm guessing the reason there are subtlties between v1 and v2 is simply the implementation between to the two. You could inspect the code e.g. the css output and compare them to find the differences.

 

There is also this https://vuetifyjs.com/en/getting-started/upgrade-guide/#upgrading-from-v1-5-x-to-v2-0-x which you might find useful if you have more components to move across.

Thank you so much. Sorry for the super late reply, I only come online whenever I can. Completely missed your reply.