How to Target the DOM in Vue

A very common practice in web development is to target an element in your DOM (Document Object Model) (aka all your HTML elements and the logical structure they represent) and to manipulate it in some way.

In this article we are going to check out the power of ref and some of its edge cases. Get your toast ready, and let’s peel this

Knights of the Old Vuepublic

For those of us that come from the old ways, aka jQuery, we were very used to targeting a DOM element in our page to modify it or use it in any certain way. In fact this was almost unavoidable in cases where you wanted to use any type of plugin that would make use of an element in your page.

In jQuery, you would select an element by targeting it with the $()function, and that would open up a wide variety of methods for manipulating this object. Take the example of a div, where you would like to set or toggle the visibility by switching around the display CSS property.

Let’s consider the following markup for our example.

<body>
    	<div id="datOneDiv" class="myCoolClass" style="display: none;">I is hidden</div>
      <div>I is shown</div>
    	<div>I is 🐶</div>
    </body>

In jQuery, this would look like the following.

 $('#datOneDiv').css('display', 'block');

A couple of interesting things to mention here. First of all, notice that we’re targeting a very specific div in our document, the one with the id of datOneDiv as seen by the selector #datOneDiv (the # here works just the same as a CSS selector, it denotes an id).

The second thing to note is that, as fantastically easy as this was, it prevented a lot of people from actually learning how to JavaScript, which as time went by became a problem.

Do you even JS, breh?

In actual vanilla JavaScript, the same result can be achieved by using querySelector and some property manipulation.

    document.querySelector('#datOneDiv').style.display = 'block';

The key thing to notice about this example is that once again, we are making use of an id to target a very specific div inside of our document. Granted, we could have also targeted the div with its class by doing .myCoolClass, but that as you will learn will present the same problem.

The Vue Awakens

We are going to do some Sith killing today. Don’t worry, no actual horned cool-looking dudes were harmed in the making of this article.

Consider the following Vue component Sith.vue.

<template>
      <div>
        <p class="sithLord">I is Sith</p>
        <button @click="keelItWithFire">Kill the Sith DED!</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        keelItWithFire() {
          document.querySelector(".sithLord").style.display = "none";
        }
      }
    };
    </script>

I KNOW, I KNOW. Amaga, I should be using dynamic classes, your example is so bad, the avocado is mad and you are no longer my bff. It’s alright, I didn’t like you anyway. However, for purposes of example, let’s pretend that we didn’t know about all that Vue goodness and that we actually were trying to target the DOM this way to make some changes to it. (Jokes aside, if there is a way you can apply classes or styles dynamically, you should ALWAYS opt for doing it with dynamic properties! We are just doing this as an easy-to-follow example.)

If we instantiate this component in our App.vue or our main app entry point, and we click the button, you will notice that it actually works. So why exactly have we been told time after time that it is SO BAD to target the DOM directly in Vue like we are doing here?

Try modifying your main template (or wherever you’re testing these components) to actually hold two or more Sith lords, like so.

 <template>
      <div id="app">
        <Sith/>
        <hr>
        <Sith/>
        <hr>
      </div>
    </template>

Now go ahead and click on the second one to kill it ded. HUH. The force is weak with this one. Do you know what happened?

When the component method keelItWithFire triggers on the second component, the querySelector method is going through the DOM and trying to find the first instance of an element with the class sithLord, and sure enough it finds it!

The big issue with targeting the DOM directly in Vue is first of all that components are meant to be reusable and dynamic, so we can not guarantee that the class here is going to be unique.

Well, we can use an id you see! And you are partially correct, assigning an id attribute to a template in Vue will sort of guarantee its uniqueness, proven that you don’t instantiate more than a single one of those components in your whole application (or else you’re basically going to run into the same problem as above).

The second caveat is that you will also have to guarantee that no other thing in your app, no other developer, and no other library is going to create an element that can potentially hold the same id.

The Way of the Vuedi

Vue or do not, there is no try.

In Vue we have plenty of tools to modify the template dynamically through computed properties, local state, dynamic bindings and more. But there will come a time where you will be faced with the need to actually target the DOM. A couple of common reasons are to implement an external-party plugin that is not Vue specific, or to target a field in a form and focus it, for example.

When such a case arises, we have a pretty cool attribute we can slap to elements called ref. You can check out the official documentation for it here.

We are going to make a new component, this time a Jedi.vue, and this time we are going to do things as we are meant to in Vue.

<template>
      <div>
        <p ref="jedi">I is Jedi</p>
        <button @click="keelItWithFire">Kill the Jedi DED!</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        keelItWithFire() {
          this.$refs.jedi.style.display = "none";
        }
      }
    };
    </script>

What, you thought because they were Jedi we weren’t going to 🔥? Ain’t no one mess with tiny hippo, ain’t NO ONE 😠.

Now, the important thing here is to understand what is going on when we add a ref attribute to one of the elements on our <template>. In simple terms, each component instance will now hold a private reference pointing to their own

tag, which we can target as seen on the keelItWithFire function via the $refs property of the instance.

Other than the problems that arise with class and id targeting, it is of utmost importance to know that the biggest issue of all is that modifying DOM directly can lead to those changes being overwritten by Vue when there is a re-render cycle of the DOM, either on that component or its parent.

Since when we target the DOM directly Vue doesn’t know about it, it won’t update the virtual “copy” that it has stored - and when it has to rebuild, all those changes will be completely lost.

If you don’t want a certain piece of your DOM to constantly become re-rendered by Vue, you can apply the v-once attribute to it - that way it will not try to re-render that specific part.

So far this example doesn’t seem super exciting, but before we jump to a real case scenario, I want to touch up on some caveats.

Caveat 1

If you use ref on top of a Vue component, such as <Jedi ref="jedi">, then what you get out of this.$refs.jedi will be the component instance, not the element as we are here with the

tag. This means that you have access to all the cool Vue properties and methods, but also that you will have to access to the root element of that component through $el if you need to make direct DOM changes.

Caveat 2

The $refs are registered after the render function of a component is executed. What this means is that you will NOT be able to use $refs on hooks that happen before render is called, for example on created(); you will however have it available on mounted().

There is a way to wait for created() to have the elements available, and it is by leveraging the this.$nextTick function.

What this.$nextTick will do is hold out on executing the function you pass to it until the next DOM update by Vue.

Consider the following example.

	<template>
      <div>
        <p ref="myRef">No</p>
      </div>
    </template>
    
    <script>
    export default {
      created() {
        if (!this.$refs.myRef) {
          console.log("This doesn't exist yet!");
        }
    
        this.$nextTick(() => {
          if (this.$refs.myRef) {
            console.log("Now it does!");
          }
        });
      },
      mounted() {
        this.$refs.myRef.innerHTML = "🥑";
        console.log("Now its mounted");
      }
    };
    </script>

We have a

tag with a ref of myRef, nothing fancy there. On the created() hook though there’s a couple of things going on.

First, we make a check to see if this.$refs.myRef is available to us, and as expected it will not be because the DOM has not yet been rendered at this point - so the console.log will be executed.

After that, we are setting an anonymous function to be called on $nextTick, which will be executed after the DOM has had its next update cycle. Whenever this happens, we will log to the console: “Now it does!”

On the mounted() hook, we actually use this ref to change the inner text of the

tag to something more worthwhile of our savior, the magical avocado, and then we console log some more.

Keep in mind that you will actually get the console logs in this order:

1- This doesn’t exist yet!
2- Now it’s mounted
3- Now it does!

mounted() actually will fire before nextTick because nextTickhappens at the end of the render cycle.

The Dark Side

Well, now that you have the whole awesome theory, what we can we actually do with this knowledge? Let’s take a look at a common example, bringing in a third-party library, flatpickr, into one of our components. You can read more about flatpickr here.

Consider the following component.

	<template>
      <input
        ref="datepicker"
      />
    </template>
    
    <script>
    import flatpickr from 'flatpickr';
    import 'flatpickr/dist/themes/airbnb.css';
    
    export default {
      mounted () {
        const self = this;
        flatpickr(this.$refs.datepicker, {
          mode: 'single',
          dateFormat: 'YYYY-MM-DD HH:mm'
        });
      }
    };
    </script>

First, we import the library and some required styles, but then the package requires that we target a specific element in our DOM to attach itself to. We are using ref here to point the library toward the correct element with this.$refs.datepicker.

This technique will work even for jQuery plugins.

But beware of the dark side. Angerlar, jFear, Reactgression; the dark side of the Force are they. (Disclaimer, this is a joke. I don’t actually dislike the other frameworks. Except maybe jQuery. jQuery is evil.)

Wrapping Up

Hope you had some fun learning about ref today. It’s a misunderstood and underused tool that will get you out of trouble when used in the right moment!

The sandbox with the code examples used in this article can be found at the following link: https://codesandbox.io/s/target-dom-in-vue-r9imj.

Originally published by Marina Mosti at telerik.com

#vue-js #javascript

What is GEEK

Buddha Community

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Teresa Bosco

1598685221

Vue File Upload Using vue-dropzone Tutorial

In this tutorial, I will show you how to upload a file in Vue using vue-dropzone library. For this example, I am using Vue.js 3.0. First, we will install the Vue.js using Vue CLI, and then we install the vue-dropzone library. Then configure it, and we are ready to accept the file. DropzoneJS is an open source library that provides drag and drops file uploads with image previews. DropzoneJS is lightweight doesn’t depend on any other library (like jQuery) and is highly customizable. The vue-dropzone is a vue component implemented on top of Dropzone.js. Let us start Vue File Upload Using vue-dropzone Tutorial.

Vue File Upload Using vue-dropzone

First, install the Vue using Vue CLI.

#vue #vue-dropzone #vue.js #dropzone.js #dropzonejs #vue cli

Aria Barnes

1625232484

Why is Vue JS the most Preferred Choice for Responsive Web Application Development?

For more than two decades, JavaScript has facilitated businesses to develop responsive web applications for their customers. Used both client and server-side, JavaScript enables you to bring dynamics to pages through expanded functionality and real-time modifications.

Did you know!

According to a web development survey 2020, JavaScript is the most used language for the 8th year, with 67.7% of people choosing it. With this came up several javascript frameworks for frontend, backend development, or even testing.

And one such framework is Vue.Js. It is used to build simple projects and can also be advanced to create sophisticated apps using state-of-the-art tools. Beyond that, some other solid reasons give Vuejs a thumbs up for responsive web application development.

Want to know them? Then follow this blog until the end. Through this article, I will describe all the reasons and benefits of Vue js development. So, stay tuned.

Vue.Js - A Brief Introduction

Released in the year 2014 for public use, Vue.Js is an open-source JavaScript framework used to create UIs and single-page applications. It has over 77.4 million likes on Github for creating intuitive web interfaces.

The recent version is Vue.js 2.6, and is the second most preferred framework according to Stack Overflow Developer Survey 2019.

Every Vue.js development company is widely using the framework across the world for responsive web application development. It is centered around the view layer, provides a lot of functionality for the view layer, and builds single-page web applications.

Some most astonishing stats about Vue.Js:

• Vue was ranked #2 in the Front End JavaScript Framework rankings in the State of JS 2019 survey by developers.

• Approximately 427k to 693k sites are built with Vue js, according to Wappalyzer and BuiltWith statistics of June 2020.

• According to the State of JS 2019 survey, 40.5% of JavaScript developers are currently using Vue, while 34.5% have shown keen interest in using it in the future.

• In Stack Overflow's Developer Survey 2020, Vue was ranked the 3rd most popular front-end JavaScript framework.

Why is Vue.Js so popular?

• High-speed run-time performance
• Vue.Js uses a virtual DOM.
• The main focus is on the core library, while the collaborating libraries handle other features such as global state management and routing.
• Vue.JS provides responsive visual components.

Top 7 Reasons to Choose Vue JS for Web Application Development

Vue js development has certain benefits, which will encourage you to use it in your projects. For example, Vue.js is similar to Angular and React in many aspects, and it continues to enjoy increasing popularity compared to other frameworks.

The framework is only 20 kilobytes in size, making it easy for you to download files instantly. Vue.js easily beats other frameworks when it comes to loading times and usage.

Take a look at the compelling advantages of using Vue.Js for web app development.

#1 Simple Integration

Vue.Js is popular because it allows you to integrate Vue.js into other frameworks such as React, enabling you to customize the project as per your needs and requirements.

It helps you build apps with Vue.js from scratch and introduce Vue.js elements into their existing apps. Due to its ease of integration, Vue.js is becoming a popular choice for web development as it can be used with various existing web applications.

You can feel free to include Vue.js CDN and start using it. Most third-party Vue components and libraries are additionally accessible and supported with the Vue.js CDN.

You don't need to set up node and npm to start using Vue.js. This implies that it helps develop new web applications, just like modifying previous applications.

The diversity of components allows you to create different types of web applications and replace existing frameworks. In addition, you can also choose to hire Vue js developers to use the technology to experiment with many other JavaScript applications.

#2 Easy to Understand

One of the main reasons for the growing popularity of Vue.Js is that the framework is straightforward to understand for individuals. This means that you can easily add Vue.Js to your web projects.

Also, Vue.Js has a well-defined architecture for storing your data with life-cycle and custom methods. Vue.Js also provides additional features such as watchers, directives, and computed properties, making it extremely easy to build modern apps and web applications with ease.

Another significant advantage of using the Vue.Js framework is that it makes it easy to build small and large-scale web applications in the shortest amount of time.

#3 Well-defined Ecosystem

The VueJS ecosystem is vibrant and well-defined, allowing Vue.Js development company to switch users to VueJS over other frameworks for web app development.

Without spending hours, you can easily find solutions to your problems. Furthermore, VueJs lets you choose only the building blocks you need.

Although the main focus of Vue is the view layer, with the help of Vue Router, Vue Test Utils, Vuex, and Vue CLI, you can find solutions and recommendations for frequently occurring problems.

The problems fall into these categories, and hence it becomes easy for programmers to get started with coding right away and not waste time figuring out how to use these tools.

The Vue ecosystem is easy to customize and scales between a library and a framework. Compared to other frameworks, its development speed is excellent, and it can also integrate different projects. This is the reason why most website development companies also prefer the Vue.Js ecosystem over others.

#4 Flexibility

Another benefit of going with Vue.Js for web app development needs is flexibility. Vue.Js provides an excellent level of flexibility. And makes it easier for web app development companies to write their templates in HTML, JavaScript, or pure JavaScript using virtual nodes.

Another significant benefit of using Vue.Js is that it makes it easier for developers to work with tools like templating engines, CSS preprocessors, and type checking tools like TypeScript.

#5 Two-Way Communication

Vue.Js is an excellent option for you because it encourages two-way communication. This has become possible with the MVVM architecture to handle HTML blocks. In this way, Vue.Js is very similar to Angular.Js, making it easier to handle HTML blocks as well.

With Vue.Js, two-way data binding is straightforward. This means that any changes made by the developer to the UI are passed to the data, and the changes made to the data are reflected in the UI.

This is also one reason why Vue.Js is also known as reactive because it can react to changes made to the data. This sets it apart from other libraries such as React.Js, which are designed to support only one-way communication.

#6 Detailed Documentation

One essential thing is well-defined documentation that helps you understand the required mechanism and build your application with ease. It shows all the options offered by the framework and related best practice examples.

Vue has excellent docs, and its API references are one of the best in the industry. They are well written, clear, and accessible in dealing with everything you need to know to build a Vue application.

Besides, the documentation at Vue.js is constantly improved and updated. It also includes a simple introductory guide and an excellent overview of the API. Perhaps, this is one of the most detailed documentation available for this type of language.

#7 Large Community Support

Support for the platform is impressive. In 2018, support continued to impress as every question was answered diligently. Over 6,200 problems were solved with an average resolution time of just six hours.

To support the community, there are frequent release cycles of updated information. Furthermore, the community continues to grow and develop with backend support from developers.

Wrapping Up

VueJS is an incredible choice for responsive web app development. Since it is lightweight and user-friendly, it builds a fast and integrated web application. The capabilities and potential of VueJS for web app development are extensive.

While Vuejs is simple to get started with, using it to build scalable web apps requires professionalism. Hence, you can approach a top Vue js development company in India to develop high-performing web apps.

Equipped with all the above features, it doesn't matter whether you want to build a small concept app or a full-fledged web app; Vue.Js is the most performant you can rely on.

Original source

#vue js development company #vue js development company in india #vue js development company india #vue js development services #vue js development #vue js development companies

Sofia Kelly

1578061020

10 Best Vue Icon Component For Your Vue.js App

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert’s fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Animated SweetAlert Icons for Vue

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

vue-svg-transition

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Vue-Awesome

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

vue-transitioning-result-icon

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

vue-zondicons

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

vicon

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

vue-svgicon

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

vue-material-design-icons