JSFiddle starter for Vue.js

Do you want to create a JSFiddle to shoot out a quick Vue test, proof of concept or bug report?

Vue’s webpack setup gives you section dedicated for your templates.
Most JSFiddles I see have the template in the JS window using Vue’s template attribute.

I’ve prepared a fiddle that lets you use the HTML section.

Check it out:

Please, share your stuff in the comment below to show off your work!

LINK: JSFiddle starter for Vue.js

Continue reading

Guide: How to use Vue.js with jQuery Plugins

UPDATE

I’m not sure I can recommend that for vue2 anymore. I’m not sure what that solution would be but I would probably go for components now.

The original article is here:

Working with Vue can be awesome. But you might know that it can also give you headaches, when you try to combine it with jQuery plugins or other libraries.

The problem is that jQuery works fundamentally different than Vue. Vue renders everything based of the component’s core data. jQuery is mostly meant to do simple click handling and has powerful abilities manipulate the DOM.

When I looked for help myself I have found some unsatisfying solutions where components did do all the initialization work.
Let me show you how I would combine Vue.js and jQuery.

What’s the goal?

In most cases you can omit using jQuery and find a simple Vue based solution to your problem. Modals, sliders and so on are pretty simple with a Vue component and CSS.

So the goal is to use powerful jQuery plugins that cannot be written quickly in Vue.

We will …

  • … use Vue directives to build a bridge to jQuery.
  • … initialize the plugin when the element is attached.
  • … destroy it when the element is detached.
  • … send events to notify the component.
  • … receive events from the component and pass them to the plugin.

Continue reading

6 Strategies to Keeping up with Web Development

JavaScript, CSS and HTML have evolved and are facing constant change. New frameworks, tools and services appear every month. Unfortunately, many web developers fear to lose the connection to web development that they used to have.

Some might even fear not being able to find a new job because they’ve never used Angular or don’t know anything about Webpack.

I experienced the same thing 3 years ago when everything I used to write was server side rendered with a sprinkle of CoffeeScript in a comfortable Rails environment.

“But, how can I keep up with all the new technology popping up?”

There is no direct answer, as there are a handful of ideas to what you can do to set yourself in a better position.

Let’s dive deeper.

Continue reading