• Thursday , 14 September 2017

Drop jQuery from Bootstrap and use Vue.js instead!

Code Canyon
https://i.ytimg.com/vi/PZ5pYNWZLJo/hqdefault.jpg



Since my tool of choice for adding dynamic functionality to a page is Vue.js now, it’s becoming harder to justify Bootstrap because it brings with it some baggage…I’m talking about jQuery.

See how we can replace jQuery in Bootstrap and replace it easily with Vue.js.

=======

Get the latest Vue.js articles, tutorials and cool projects in your inbox with the Vue.js Developers Newsletter http://vuejsdevelopers.com/newsletter/?jsdojo_id=youtube_djq

Original source

3d Ocean

Related Posts

16 Comments

  1. Sean Rasmussen
    September 6, 2017 at 21:21

    Nice vid — I like the idea of writing my own JS for Bootstrap rather than add another dev dependency!

  2. Sarfraz Qasim
    September 6, 2017 at 21:21

    there are thousands of jquery plugins out there how we can update them in VEU?

  3. Gagandeep Sharma
    September 6, 2017 at 21:21

    How about Dropdowns to get work with VueJs. It is simple to toggle dropdown with click and adding classes. Any idea how we will handle that dropdown shall get closed clicking anywhere else on document and how about adding some animations stuff while showing modals and black overlay for modal?

  4. willzurmacht
    September 6, 2017 at 21:21

    this was actually quite fascinating to watch. it's kinda quite different from jQuery way of doing things but it's making it so much simple. Hope i could catch up with the latest web dev trends. Haven't done any web apps for the past 2 years. thanks for the great demo, so clear!

  5. Petr Pacas
    September 6, 2017 at 21:21

    Recommended playback speed: 1.25x 🙂

  6. mikl2345
    September 6, 2017 at 21:21

    This was very useful, thanks. The tabs work great, but for the modal it seems if we want the full featured bootstrap.js equivalent, it's necessary to implement a bit more behaviour than shown in the video. In particular, the slide down, fade, darken background and click outside to close are all present in the standard bootstrap.js version but need more code than shown in the video to replicate.

  7. Bahier Barekzoy
    September 6, 2017 at 21:21

    there is a fork for Vue 2 support. https://wffranco.github.io/vue-strap/

  8. gearMobile
    September 6, 2017 at 21:21

    give more interesting examples Vue.js!

  9. Sandy
    September 6, 2017 at 21:21

    what is the difference between VUEjs and bootstrap?

  10. Lewis Long
    September 6, 2017 at 21:21

    Awesome tutorial bro. Very practical and useful. I was able to use the tabs part in a client project I'm working on so many many thanks.

  11. Ahmed Musawir
    September 6, 2017 at 21:21

    Doooooooooooode!! This is so awesome! Just what I was looking for … I love jQuery, but looking for something better … and I found it. Thanx a bunch!!

  12. Mr. Julio
    September 6, 2017 at 21:21

    can you dynamically detect the nth child without manually setting tab==={index} for each tab or pane ?

  13. Csaba Kiss
    September 6, 2017 at 21:21

    That was very clever. Thanks for the video

  14. Evert R.
    September 6, 2017 at 21:21

    Nice video I have commmented on Medium about duplicating object, if you have done something like it, could you share it? Thanks!

  15. Roeland
    September 6, 2017 at 21:21

    Can you explain how it works if you have multiple modals or multiple tabs. Since the Vue is bound to the #element. With classes you get the effect that they all show/hide.

  16. aldovelco
    September 6, 2017 at 21:21

    Nice video

Leave A Comment

You must be logged in to post a comment.