Stale Closures — I underestimated closures

https://rahuulmiishra.medium.com/stale-closures-i-underestimated-closures-53ed55e8764a?source=rss------vuejs-5
Hello World 🌏Continue reading on Medium »

Vuetify Component: Button With Tooltip

https://javascript.plainenglish.io/vuetify-component-button-with-tooltip-c042014b7121?source=rss------vuejs-5
I use Vue for most of my projects, and, these days, Vuetify is my go-to UI framework. I routinely create buttons that only contain an icon…Continue reading on JavaScript in Plain English »

Top 5 VS Code extensions for Vue developers for 2022

https://medium.com/@epicprogrammer/top-5-vs-code-extensions-for-vue-developers-for-2022-cbc2e2d7b06?source=rss------vuejs-5
There’s a high chance that, if you’re a web developer, you’re using VS Code. After all, it’s the most popular code editor around. In large…Continue reading on Medium »

First Time as a Front-end Developer Using Vue.js

https://medium.com/@penpimjir/first-time-as-a-front-end-developer-using-vue-js-be202e159d69?source=rss------vuejs-5
Probably not much of useful educational content! More like a self-reflection, I guess?Continue reading on Medium »

Composition API vs VueX

https://dev.to/ironmandev/composition-api-vs-vuex-cdm
No framework Vue, na sua atual versão 3, é possível utilizar a API de composição do Vue (Composition API) para lidar com possíveis cenários de repetição de código.
Agora o Vue conta com funcionalidades importadas do framework, para ser utilizado somente aquilo que será necessário. A abordagem é um pouco parecida com os "react hooks" para quem vem do mundo do React.js.
Aqui vai um exemplo:
global.js



import { reactive } from 'vue';
const state = reactive({ count: 0 })
const incrementCount = () => state.count++;
export default { state, incrementCount };


No código acima é importada uma função que vai lidar com a reatividade do objeto, que é passado como argumento contento o atributo "count". Dessa forma qualquer alteração no atributo "count" será reativo, ou seja, qualquer lugar(componente, função, etc..) que use o count receberá a atualização em primeira mão, porque todos os valores dentro do objeto são reativos.
Com alguns novos recursos do Vue também é possível implementar funcionalidades parecidas com as da API de contexto do React. É possível agora utilizar provide / inject para trabalhar com estado global (não se limita a isso).
Agora com a nossa loja (store) configurada com o estado e a função incrementCount() que manipula um valor do estado, é necessário "prover" (provide) esse estado para toda a nossa aplicação Vue.
main.js



import { createApp } from "vue";
import global from "@/global";
const app = createApp({
provide: {
global
},
...
}


Agora todos os nossos componentes podem ter acesso ao estado e as funções que manipulam o mesmo, mas para isso ser possível é necessário fazer uma "injeção" do estado global no componente, para isso iremos utilizar o "inject":



<template>
<div>{{ global.state.count }}
<button @click="global.increment">Increment</button>
</template>
<script>
export default {
inject: ["global"]
}
</script>


Dessa maneira já temos um estado global simples já implementado, mas a pergunta é, substitui VueX? A resposta é, depende.

O VueX por ser um projeto grande e que já tem um bom tempo no ecossistema Vue foi pensado e feito somente para lidar com o estado global da aplicação, ele pode (sugerível) ser usado em aplicações que exijam estados globais mais complexos, e as motivações são as seguintes:

VueX conta com a extensão do Vue que facilita bastante a inspeção de problemas com o estado global, lá ele lista as mutations, actions, getters, e o próprio estado global de uma forma mais amigável de ler e compreender o estado da aplicação.
VueX conta com vários plugins famosos que podem ser úteis em vários cenários, como o "vuex-persisted" que persiste o estado global da aplicação no local storage.

Bom, entendendo quais problemas cada solução veio resolver, agora você pode escolher qual atende o cenário do seu projeto. :)
Referências:

https://vuejsdevelopers.com/2020/10/05/composition-api-vuex/

Learning Vue.js with a To-Do List

https://medium.com/@claudiojlf/learning-vue-js-with-a-to-do-list-a93d993f52e4?source=rss------vuejs-5
After learning the basics of the Vue.js framework, it’s now time to put it in practice with a project, as always.Continue reading on Medium »

Vue.js Özel Directive Oluşturma

https://medium.com/@EmirEskici/vue-js-%C3%B6zel-directive-olu%C5%9Fturma-5d148e86fd08?source=rss------vuejs-5
Directive’ler v-directiveName yazım kuralı(syntax) ile yazdığımız
seçilen(DOM) yada içerisine yerleştirilen component’in veya elementin…Continue reading on Medium »

Popular Vue.js plugins & packages

https://mayank-1513.medium.com/popular-vue-js-plugins-packages-2bb370c4e49b?source=rss------vuejs-5
Vue.js is a modern JavaScript library as well as a framework. Well, it is actually a UI library that can be used with any other JS…Continue reading on Medium »

Building an Issue tracker application from scratch

https://devayansarkar.medium.com/building-an-issue-tracker-application-from-scratch-77765240c1a8?source=rss------vuejs-5
This blog is about how I built an “Issue tracker” application from scratch, the tools and technology I chose (and why) , the steps…Continue reading on Medium »

JavaScript is a single threaded "Synchronous", What does that mean?!

https://dev.to/ahmedm1999/javascript-is-a-single-threaded-synchronous-what-does-that-mean-271h
Hello everyone, in this article I will give you the mean of single threaded javascript.
First, let's talk about the JavaScript engine in brief way.
A JavaScript engine is a software component that executes JavaScript code, Its consists of many steps and components to allow it perform it's tasks.
The two main important things in this step are:
1- We need to store and write information/data for our application (variables, objects, etc..).
2- We need to keep track of what's happening to our code line by line.
This is where a Call stack and Memory heap comes in.
This image explain this two component in graphical way :

1. Call stack:
Help to know where we are in the code and to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

To know more about call stack and how it is work exactly, I recommend this tutorial for you.
2. Memory heap:
The memory heap, also called the ‘heap’, is a section of unstructured memory that is used for the allocation of objects and variables, so it is where our variables and functions stores Briefly.

To deep in heap from here
After that, back to our main subject, "Javascript is a single threaded programming language" which means it has only one call stack that is used to execute the program, so one set of instructions is executed at a time, it's not doing multiple things.

And because of that JavaScript is Synchronous.
So if you understand what is single threaded means, it's the same concept with Synchronous JavaScript "one thing at a time".
This approach of programming lead to make many problems, so the direction now to use another way of JavaScript called "Asynchronous" programming.

I will make to it another article in the come in days.
Hope you clearly understand this important concepts as a JavaScript developer! 🙌🌹

Ahmad Mukahal

Basic state management Vue

https://medium.com/@endySantoso/basic-state-management-vue-267d3f05a17?source=rss------vuejs-5
after a few years in my journey in FE development, I try to use Vue in my project. I think it’s easier to learn than react, but it’s just…Continue reading on Medium »

Suggestions Required For SayHeyToMe

https://dev.to/apidev234/suggestions-required-for-sayheytome-1c8j
So,A time back i made this website SayHeyToMe which easily allows users to create their portfolios,
You can visit the live web here, It has nothing except for showing user info and users social media. I have a planned feature list, Please check and add to the discussion

Follow System
Blogs Like medium.com n dev.to as well
Sponsor Button,Redirecting users to web sites like patreon,kofi
Sponsorships, Users will connect their stripe accs and anybody can pay them.

Deploy your Vue.js app to Azure using Terraform

https://dev.to/roxait/deploy-your-vuejs-app-to-azure-using-terraform-335b

Creiamo una app con Vue ed Electron 1° parte

https://chiarapassaro.medium.com/creiamo-una-app-con-vue-ed-electron-1-parte-147209265616?source=rss------vuejs-5
Come realizzare una app in Vue ed Electron che permette di generare e visualizzare delle palette di coloriContinue reading on Medium »

Complete Understanding of Server-Side Rendering for ReactJs

https://bytecodepandit.iss.onedium.com/complete-understanding-of-server-side-rendering-for-reactjs-aebbf666899f?source=rss------vuejs-5
Let’s play with some Nodejs and ReactjsContinue reading on Medium »

Best practices in Vue.js and Jest

https://medium.com/@lambrospd/best-practices-in-vue-js-and-jest-514e6eebe1c2?source=rss------vuejs-5
In this tutorial we are going to go through the process of writing unit tests in Jest for a Vue.js application. I am going to use my…Continue reading on Medium »

Migrating from Vue 2 to Vue 3

https://tolbxela.medium.com/migrating-from-vue-2-to-vue-3-f4c7f3c89e33?source=rss------vuejs-5
My experience and tips of upgrading Vue.js projects to Vue 3Continue reading on Medium »

Update: Using Vue 3 Components in ASP.NET Core without bundler

https://tolbxela.medium.com/update-using-vue-3-components-in-asp-net-core-without-bundler-d144f9a649e6?source=rss------vuejs-5
An update to my article about using Vue.js Components in ASP.NET Core Web Application without JavaScript bundlerContinue reading on Medium »

Updates to my Vue 2 articles

https://tolbxela.medium.com/updates-to-my-vue-2-articles-e99280ab9c54?source=rss------vuejs-5
Migration from Vue 2 to Vue 3Continue reading on Medium »

Forcing Vue.js devtools extension to work in production mode on any website

https://medium.com/drmax-dev-blog/forcing-vue-js-devtools-extension-to-work-in-production-mode-on-any-website-84798162b5f?source=rss------vuejs-5
This “hack” is kind of must have for any Vue.js developer. Read more…Continue reading on Dr.Max IT Development Blog »