Brooke  Giles

Brooke Giles


26 Time Saving Tips for Vue

When writing Vue applications, we waste our time by doing things the wrong way, when we could have been doing it the right way from the start. That’s why I put together this list of 26 articles that will help you save time, by teaching you how to avoid some common time-wasters.

We all hate wasting our time.

And once you’ve gone through this list, you can share it with others so that you can help them save time too!

1. Use Vuex before it’s too late

If you’re building a medium to large sized app, your state — all the data you need to keep track of — can get pretty complicated.

It’s not just the amount of information you have to deal with either. The different interactions between your state and all of the different ways your state can change only add to this complexity.

Managing state is a difficult task! So many bugs and wasted time are due to very complicated state and logic.

That’s why Evan You created Vuex to go along with Vue.

It’s not necessary to use for small projects or projects with simple state. But for larger projects, it’s absolutely essential.

If you want to learn more about the problems that Vuex solves, and how to use it in your app, check out WTF is Vuex? A Beginner’s Guide To Vue’s Application Data Store by Anthony Gore.

And here’s an interesting fact.

Evan You originally intended Vuex to be pronounced “vukes” — rhyming with “pukes”. But so many people pronounced it as “view-ex” that he changed his mind 😂.

2. Understand how Vue component instances work

Vue has a very clever design to improve performance and reduce its memory footprint.

While not necessary, understanding how this works under the hood will only help you as you build more and more Vue components.

Besides, it’s really interesting!

In this brief but very informative article by Joshua Bemenderfer, learn how Vue creates component instances: Understanding Vue.js Component Instancing.

3. Force Vue to re-render — the right way

In 99% of cases where something doesn’t rerender properly, it’s a reactivity problem.

So if you’re new to Vue, you definitely need to learn as much as you can about reactivity. I see it as being one of the biggest sticking points for new developers.

However, sometimes you need a sledgehammer to get things done and ship your code. Unfortunately, deadlines don’t move themselves.

And sometimes, forcing a component to rerender is actually the best way to do it (but very very rarely).

By far my most popular article, I’ve written about the proper way to rerender a component.

4. Vue doesn’t handle multiple root nodes — yet

Not all components make sense to have a single root node.

For example, if you’re rendering a list of items, it could make way more sense to simple return the list of nodes as an array. Why unnecessarily wrap it in a ol or ul tag?

This is called a fragment.

Currently Vue doesn’t support fragments, although there will be support for them in Vue 3.

It’s something that React has had for awhile now, but it took a rewrite of the rendering system in order for them to implement this. Vue is in the same situation.

However, you can use functional components to get around this issue while we wait for Vue 3.0 to be released. You can read more about that in Can A Vue Template Have Multiple Root Nodes (Fragments)? by Anthony Gore.

5. Validate your forms the easy way — using Vuelidate

At one of my previous jobs, I’m pretty sure my official job description was:

Builds datatables and forms
It felt like all I was doing every day was building form after form after form.

But it makes sense. Forms are the main way that we get input from the user, and they are absolutely crucial to our applications working well. So we end up writing lots of them.

However, forms are also really tricky to build. On the surface it seems like they should be fairly straightforward to write. But as you start adding validation rules and other logic, it can quickly turn into a nightmare.

This is where Vuelidate comes in.

It’s a library that makes it super easy to add custom validation, and does all the heavy lifting for you.

Learn how to setup Vuelidate by reading Simple Vue.js Form Validation with Vuelidate by Dobromir Hristov.

6. Build components that play nicely with each other

The absolutely worst feeling is realizing that you built your component the wrong way, and now you have refactor it completely.

You don’t want to overengineer your code, but many times things like this can avoided from the start.

Kevin Ball has written an article outlining several different things to keep in mind as you write your components to keep them playing nice with others.

Check out his article: How To Build Vue Components That Play Nice

7. Don’t write one-off transitions — make them reusable

Transitions are a really cool feature in Vue. If you haven’t had a chance to check them out, they’re a really easy way to add nice animations into your app.

But you don’t want to keep re-writing the same thing over and over again, do you?

In a great article, Cristi Jora shows us how we can write a component to make our transitions reusable. It also demonstrates some great concepts for how we can make our code more reusable, and can apply to other parts of your app as well.

Check out the article here: Creating Reusable Transitions in Vue

8. Learn how to use Axios for data fetching

Almost every app needs to fetch or post data.

The most popular library to help us do that these days is Axios. It is really configurable, and makes working with external data so much easier.

You can just use the browser’s built-in fetch most of the time. But you’ll probably end up writing a wrapper for it anyways, to make common cases more convenient to deal with.

Might as well just start off on the right foot and use axios from the beginning then!

Learn how to integrate axios into your Vue app by reading Vue.js REST API Consumption with Axios from Joshua Bemenderfer.

9. Use vue-router to handle client-side routing

If you’re doing client-side routing, hand-rolling your own solution isn’t that difficult.

It’s actually pretty simple to match routes, then swap between different components.

But just using vue-router is so much easier.

It’s also an official Vue package, so you know it will always work really well with Vue.

And once you start dealing with:

  • queries
  • route params
  • nested routes
  • dynamic route matching
  • transitions

…which you probably will, writing your own solution gets to be very cumbersome.

Instead, just check out this guide from Ed Zynda on Getting Started With Vue Router

10. Create filters to reuse formatting

Formatting data to display on screen can get annoying.

If you’re dealing with lots of numbers, percentages, dates, currencies, names, or anything else like that, you’ll likely have functions that format that data for you.

Vue comes with this great feature called filters, which was inspired by Angular.

They let you easily encapsulate these formatting functions and use them in your template with a really clean syntax.

But don’t just take my word for it.

Check out this very detailed article from Rachid Laasri, which has tons of examples on how to write your own filters: How to Create Filters in Vue.js with Examples

11. Make sure to avoid annoying errors and warnings

As web development has gotten more complex, so have our tools. These days we have linters, editors, type checkers, and all sorts of things that save us time by telling us our mistakes (almost) as soon as we make them.

Vue also has really good warning and error messages, but if you keep getting them it can be annoying.

Why not just avoid them altogether?

One of the most common warnings I got when I was first learning Vue was this one:

Luckily, I wrote an entire article on what causes this, and more importantly, how to avoid it altogether!

12. Don’t be afraid of JSX — it’s extremely powerful

A lot of people are intimidated by JSX.

I get it.

It has a weird syntax, and it can be difficult to wrap your head around how it’s used.

But sometimes — especially when writing higher-level reusable components — a template just doesn’t cut it. You need to take advantage of the full power of the render method.

And JSX is one of the easiest ways of doing that.

Samuel Oloruntoba has written a great introduction to JSX and why exactly it is great that Vue has support for it: Using JSX with Vue and Why You Should Care

13. Figure out how to react to mouse hover

In CSS it’s pretty easy to change things on hover. We just use the :hover psuedo-class:

.item {
  background: blue;

.item:hover {
  background: green;

In Vue it gets a little trickier, because we don’t have this functionality built in.

We have to implement most of this ourselves.

But don’t worry, it’s not that much work.

I’ve written an in-depth article on using hover in Vue. It covers a lot of different things you’ll want to know:

  • queries
  • route params
  • nested routes
  • dynamic route matching
  • transitions

Check out the article: How to Implement a Mouseover or Hover in Vue

14. Add v-model support to custom components

As web developers, our jobs revolve around getting data from inputs.

Vue gives us v-model, which is some syntactic sugar that creates a two-way data-binding for us. This is great for inputs, as it simplifies working with them a lot.

But did you know you can add v-model support to your own components?

Joshua Bemenderfer shows us how this can be done in Adding v-model Support to Custom Vue.js Components.

15. Fix “this is undefined” error

Perhaps one of the most common errors to run into is this one.

I used to run into this one all of the time. But now I know exactly what I was doing wrong. It has do with the type of function you’re using, and how you’re using it.

But I won’t get into that here.

Learn [how to fix the “this is undefined” error]( “how to fix the “this is undefined” error”), and get on with your life!

16. Use an off the shelf CSS framework

Getting all of your CSS just right can take an extraordinary amount of time.

My suggestion is to just use a CSS framework, where most of the work is already done for you.

All of the styling, colours, drop shadows, and aesthetic elements are already worked out. No need to learn graphic design! On top of that, they all come with tons of CSS styles to help you with layout, forms, and other common elements like buttons, popups, alert boxes, and so much more.

The best part is the variety.

There are tons of great ones to pick from:

  • queries
  • route params
  • nested routes
  • dynamic route matching
  • transitions

And don’t waste any time trying to figure out how to integrate them into your app. Dave Berning has written a great article to help get you started: Integrating and Using CSS Frameworks with Vue.js.

17. Watching nested data in Vue

Watchers are a really great feature in Vue. They make adding side-effects really clean, and they’re easy to use (like the rest of Vue).

Except when you try and use them on an array or object.

Nested data structures like arrays and objects are a little trickier to work with.

Just yesterday, I spent at least 30 minutes helping a co-worker figure out an issue with his Vue component.

Turned out to be an issue with nested data 🤦‍♂️.

Because it’s such a common problem, I’ve written an in-depth article on how to watch nested data, which also goes into some of the more advanced features that watchers give you.

18. Show loading and error states on your async components

You probably hear a lot about web performance these days — and for good reason.

The easiest way to get your application bundle smaller is to split out the code into multiple, smaller, chunks. Vue comes with first-class support for this, which is really cool!

But the user’s experience can suffer if we don’t provide a good loading state while fetching the component. And we also want to show a good error state if something goes wrong.

Luckily, integrating these isn’t too difficult.

Joshua Bemenderfer shows us exactly how this can be done in Showing Loading & Error States with Vue.js Async Components.

19. Clean up your props for goodness sake!

Some components only require a few props, but others require passing many, many, props.

Eventually this can get pretty messy.


But there are several different ways that we can clean this up. Not only will this make our code easier to look at, but it will also be easier to understand, and modify in the future.

Alex Jover Morales has written an excellent article outlining the different ways you can clean up your props. Check it out: Passing Multiple Properties to a Vue.js Component.

20. Don’t confuse computed props and watchers

I know that most people don’t accidentally write a computed prop when they meant to write a watcher.

That’s just silly.

But I see lots of people who use a watcher when they should instead be using a computed prop. Or using a computed prop when a watcher would be a better fit.

Although they seem like they do similar things, watchers and computed props are actually quite different.

My rule of thumb: make it a computed prop!

However, if you want to know more, I wrote an article on the differences between computed props and watchers.

21. Beware of some common pitfalls

Like any piece of technology, Vue has some areas that can catch you off guard.

I cannot tell you how many hours I wasted because I didn’t understand some of these things. But learning them didn’t take that long either.

If only I had known!

Instead of struggling through these gotchas like I did when I was learning Vue, you can avoid most of these.

Read Common Vue.js Gotchas by Joshua Bemenderfer, and save yourself a lot of frustration!

22. Learn the differences between props and data

Vue comes with two different ways of storing variables, props and data.

These can be confusing at first, since they seem like they do similar things, and it’s not clear when to use one vs the other.

The answer involves reactivity, naming collisions, and the direction of data flow (spoiler: it’s down).

In my article on the difference between props and data, I also go into detail on where you would use each one, and how you would use them together.

It’s a really important topic to grasp, so make sure you understand it!

23. Properly call methods when the page loads

It’s an extremely common pattern in web apps to perform some sort of logic as soon as the page is loaded. Often you’re fetching data, or even manipulating the DOM somehow.

But there are a lot of wrong ways of doing this with Vue.

Lucky for us, Vue gives us lifecycle hooks that let us do this in a really clean and simple way.

You can check out this in-depth article on how to do this the proper way. The article also goes deep into what lifecycle methods are, and how we can hook into them.

24. Understand how to pass a function as a prop

Short answer: you don’t.

But that’s a hugely unsatisfying answer, so of course I’ll expand on it.

This question comes up for 2 main reasons:

  1. You want to communicate from the child to the parent
  2. You need to abstract your component behaviour in a specific way

In React we pass functions around all the time, and that’s how we would solve both of these problems. But Vue gives us two separate mechanisms for solving these two problems.

**These mechanisms are events and **scoped slots.

If you want to learn how to use these to solve either of these problems, as well as the differences between how React and Vue work (and more!), check out this detailed article I wrote about it: How to Pass a Function as a Prop in Vue

25. Learn why mutating props is an anti-pattern

This is an error you may have seen:

Builds datatables and forms
Why is mutating a prop directly not allowed in Vue, and what do you do instead?

I’ve written an entire article on this subject. I also go into what causes this error, and how to avoid it.

The article also touches on how to avoid getting this error when using v-model, as there are some specific things that can be confusing there.

26. Dynamically add CSS classes

Vue incorporates HTML and Javascript together in a really beautiful way, but we can’t forget about CSS.

CSS is the thing that really makes our apps shine, and is very powerful in it’s own right.

A very common pattern in web apps is to add and remove classes from elements based on the state of our application. We do this to show a button is disabled, to animate elements like loading spinners, and a ton of other things.

Vue gives us a lot of options in choosing how to dynamically add and remove CSS classes based on what’s going on in our application. Knowing what these options are gives you more tools, and you’ll be able to write better code because of it.

I wrote an article that covers all of the different ways you can dynamically add and remove classes in Vue. We go over array syntax and object syntax, using Javascript expressions to calculate the class, and adding dynamic classes to custom components (you don’t need to add a custom class prop!). You can even generate your class names on the fly!

If you enjoyed this article, please share it with others who may enjoy it as well!

It really helps encourage me to keep writing stuff like this.

#vue-js #javascript #web-development

What is GEEK

Buddha Community

26 Time Saving Tips for Vue
Ray  Patel

Ray Patel


top 30 Python Tips and Tricks for Beginners

Welcome to my Blog , In this article, you are going to learn the top 10 python tips and tricks.

1) swap two numbers.

2) Reversing a string in Python.

3) Create a single string from all the elements in list.

4) Chaining Of Comparison Operators.

5) Print The File Path Of Imported Modules.

6) Return Multiple Values From Functions.

7) Find The Most Frequent Value In A List.

8) Check The Memory Usage Of An Object.

#python #python hacks tricks #python learning tips #python programming tricks #python tips #python tips and tricks #python tips and tricks advanced #python tips and tricks for beginners #python tips tricks and techniques #python tutorial #tips and tricks in python #tips to learn python #top 30 python tips and tricks for beginners

Luna  Mosciski

Luna Mosciski


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

Teresa Bosco


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

Aria Barnes


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

Sofia Kelly


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



2. vue-svg-transition

Create 2-state, SVG-powered animated icons.




3. Vue-Awesome

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




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.




5. vue-zondicons

Easily add Zondicon icons to your vue web project.




6. vicon

Vicon is an simple iconfont componenet for vue.

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



7. vue-svgicon

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




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.




9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.




10. vue-ico

Dead easy, Google Material Icons for Vue.

This package’s aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.




I hope you like them!

#vue #vue-icon #icon-component #vue-js #vue-app