Getting started with Vuetify

https://medium.com/@codingbeauty/getting-started-with-vuetify-1f133a06e89a?source=rss------vuejs-5
Designing a great user interface from scratch can take a lot of effort. Apart from the skill required for constructing a delightful user…Continue reading on Medium »

Migrate your Vue.js project to AWS S3

https://medium.com/@idhairyavora/migrate-your-vue-js-project-to-aws-s3-7f8827289cf0?source=rss------vuejs-5
This process can be used by students to learn and understand the most basic way of manually migrating a project to AWS.Continue reading on Medium »

Vue 3 evaluation in a nutshell

https://javascript.plainenglish.io/vue-3-evaluation-in-a-nutshell-4e36984f009d?source=rss------vuejs-5
The lightweight JavaScript framework in the spotlight.Continue reading on JavaScript in Plain English »

Create an Azure Static Web App with Vue3, TailwindCSS v3 and Python Function Apps

https://medium.com/@bastiaanrudolf/create-an-azure-static-web-app-with-vue3-tailwindcss-v3-and-python-function-apps-7d4be3d408f6?source=rss------vuejs-5
Build 🔵 subscribr, a simple Static Web App — including boilerplate code!Continue reading on Medium »

An Introduction to Custom Icons in Vue

https://javascript.plainenglish.io/custom-icons-in-vue-96a86dcbf56f?source=rss------vuejs-5
Add custom icons to your Vue project.Continue reading on JavaScript in Plain English »

Get Ready to Offer Customer Services With Own Mobile App

https://dev.to/alexjonesmoren/get-ready-to-offer-customer-services-with-own-mobile-app-5dci
User-friendly interface is the main need from the customer side to book any products or services. Trioangle’s mobile app development services behind you means you can quickly launch your own mobile app for business.

 Mail: [email protected]

Skype: Trioangle

WhatsApp: +91 6379630152

Website: (https://www.trioangle.com/mobile-development-services)

How we built a Careers Website on WordPress with Vue.js and GreenHouse

https://exemplifi.medium.com/how-we-built-a-careers-website-on-wordpress-with-vue-js-and-greenhouse-761f735911e6?source=rss------vuejs-5
The Client’s Use caseContinue reading on Medium »

How to display laravel validation errors in vuejs

https://dev.to/jovialcore/how-to-display-laravel-validation-errors-in-vuejs-2g3c
There are several resources that address this topic but I want to just share my solution for a situation where you have to display laravel validation errors in vuejs component not just with the traditional loop but, this time, a nested loop. You should understand better by the time we are done.
Note: I wiil not go into details on how to write an API in laravel or build a vuejs app frontend. I will just discuss this topic with code snippets that you are probably familiar with if you are used to writing laravel and Vuejs
Lets assume that we return error responses from our backend like so



public function register(Request $request)
{
$validator = Validator::make($request->all(), [
'name' => 'required|string',
'email' => 'required|email|unique:users',
'gender' => 'required',
]);
if ($validator->fails()) {
return response()->json($validator->messages(), 400);
}
}


Lets say the user have some empty fields from the frontend, so in our browser network tab, the laravel validation error responses from our backend looks like this:

Now, in our Vuejs Component;

We have a state in the data object where we assign the response errors to.



export default {
data() {
return{
notifmsg: ''
}
},


While in our catch() function we are assigning laravel validation response like so:



.then(()=> {
// do some magic stuff here
}).catch(e => {
this.notifmsg = e.response.data
})


Now here is the thing:

If you go by the traditional way of looping through the response we got from our backend, like so:....



<div v-for="(errorArray, index) in notifmsg" :key="index">
<span class="text-danger">{{ errorArray}} </span>
</div>


...the output on the FE will look like this:

Yeaaah...this is not what we want right ? Yes.
The reason is because validation error response from our laravel app being returned as an array of objects. So, to solve this we'll have to perform a nested loop like so:



<div v-for="(errorArray, index) in notifmsg" :key="index">
<div v-for="(allErrors, index) in errorArray" :key="index">
<span class="text-danger">{{ allErrors}} </span>
</div>
</div>


The output looks like this :

Boom...! And thats what we acctually want to achieve. Thanks for reading...
Please drop your contributions in the comment section if you have any...

AatroX Vue Lite - Open-Source VueJS 3 & TailwindCSS Admin Dashboard Template is Out Now!

https://dev.to/uilibofficial/aatrox-vue-lite-open-source-vuejs-3-tailwindcss-admin-dashboard-template-is-out-now-5h30
AatroX Vue Lite - Open-Source VueJS 3 & TailwindCSS Admin Dashboard Template - is a useful, developer-friendly, and highly customizable dashboard template. It has everything you could want in an admin dashboard. We adhered to the highest industry standards to provide you with the best Vue Admin template.

Atrox is extremely fast and simple to use, as well as highly scalable. So, with a little effort, you will be able to create any application you desire.
Furthermore, the template design is eye-catching and fully responsive. As a result, no matter what device they use, anyone who visits your application will have a fantastic experience. It will run smoothly on all devices, including desktops, tablets, and smartphones.
With the help of this template, you can create web apps like,

Ecommerce Backends
Analytics Apps
SaaS Platforms
Project Management Apps
Education Apps
Fitness Apps

and a lot more.
Atrox also includes useful features that will help you create high-quality apps exactly as you envision them. Furthermore, we've loaded the Atrox admin template with useful features like Vitejs, Nuxt-inspired routing, accessible front-end routing, and so on.
Key Features

Vue 3 & Vite
Beautifully Crafted
tailwindCSS
Nuxt-inspired Routing
Well Organized
Production Ready
Accessible frontend routing
Ready to Deploy
Clean Code




Installation ⚒️


We recommend you use yarn


1 - Install all packages



yarn
# npm install [for npm]


2 - Run development server



yarn dev
# npm run dev [for npm]


3 - Generate build files for deployment



yarn build
# npm run build [for npm]





What’s Included 📦


Dashboard Page
Buttons Page
Profile Page
Sign in Page
Sign Up Page




Browser Support 🖥️

AatroX Vue Lite - open-source VueJS 3 & TailwindCSS admin dashboard template is built to work best in the latest desktop and mobile and tablet browsers. It supports all the major browsers including.

Chrome (latest)
FireFox (latest)
Safari (latest)
Opera (latest)




Documentation

Documentation



Looking For a Premium Version? 🧐

If you want to save even more time and design effort, we have a pro version of this product that includes even more pages and components.
You can upgrade to the Aatrox Vue – Vuejs 3 & TailwindCss Admin Dashboard's version. It comes with many dashboard versions, apps, tons of components, charts, and a lot more.


Free Version
Aatrox Dashboard PRO



5 Demo Pages

50+ demo pages


❌
✔ Dark & Light Mode


✔ 1 Dashboard
✔ 5 Dashboard


❌
✔ 11 App Pages


❌
✔ 6 UiKits Pages


❌
✔ Advanced Widgets


✔ 1 Profile Version
✔ 2 Profile Versions


✔ 2 Authentication Page
✔ 10 Authentication Pages


❌
✔ 10 Types of Charts Demo Pages


For more info click the image below 👇




About Us

We are Ui-Lib, a team of awesome developers and designers attempting to make the lives of other developers easier. 😊

Comment faire de l’internationalisation sur Vue.js?

https://medium.com/wedge-digital/comment-faire-de-linternationalisation-sur-vue-js-f551dcf1a187?source=rss------vuejs-5
L’internationalisation est un système que vous devez mettre en place si vous voulez que votre application soit disponible dans plusieurs…Continue reading on Wedge Digital »

Create a New Project With Vue CLI

https://medium.com/@la.dev/create-a-new-project-with-vue-cli-712ee88430d1?source=rss------vuejs-5
Vue.js is slowly becoming a very popular framework, and adding this skill to your resume might be interesting for your career. So if you…Continue reading on Medium »

[Перевод] Fuite — инструмент для поиска утечек памяти в SPA

https://habr.com/ru/post/597007/?utm_campaign=597007&utm_source=habrahabr&utm_medium=rss
Fuite: инструмент для поиска утечек памяти в веб-приложениях Читать далее

‍Fun way to sort how people will start talking in meetings, with daily quotes to boost your day

https://dev.to/dippas/fun-way-to-sort-how-people-will-start-talking-in-meetings-with-daily-quotes-to-boost-your-day-1epg
Hi there,
You know those daily meetings that almost everyone have nowadays mostly virtually due to Covid-19? It can be hard to start them, specially in large teams, because no one knows if its their turn to talk or not, maybe want to respect hierarchy or something else.
With that in mind (and a few other reasons) in the beginning of the pandemic I created just for fun and as dare from my co-workers a way to randomly sort the order in how everyone in each team would speak everyday.
As this was just for fun and in house project I created a few extra features such as:

daily quotes to boost the day
the shuffler user (the user who would shuffle the order in every day)
number of rounds the shuffle would sort, completely random also.
sound of deck cards shuffling
confetti effect when shuffle had finished sorting (with an extra audio - 20th Century Fox Intro Flute - which is an inside joke in my team)

This project was well received in the team and others also inside the company that more than a year passed it is still used everyday.
Today I show you guys the improved version of this project.
The old project was basic, being built with Vue 2 without components (file extension was .js) nor es6 modules
The new project (improvement) is built with:

Vue 3
SCSS
Pug
Vite
JSON Server

It has a few new features/improvements:

CRUD application with JSON Server (with ability to upload image/avatar stored in base64, fallback to UI avatars API if no image provided)
Daily Random Background from Picsum API

New quotes API and it's author with picture from Quoteable API

Layout improvement - the shuffle sorting works in mobile






dippas
/
shuffler



Fun way to sort how people will start talking in meetings, with daily quotes to boost your day






Shuffler

Fun way to sort how people will start talking in meetings, with daily quotes to boost your day

Show your support

Give a ⭐️ if you enjoyed this project!

Status








Built With

Vue 3
SCSS
Pug
Vite
JSON Server


Getting Started

Installation

npm i


Development
Run json-server and let it running

npm run db

Run project in another terminal at the same time

npm run dev


Build for Production

npm run build


Locally preview production build

npm run preview


Features

Shuffle Randomly Users (with random rounds bwtween 5 and 10)
CRUD application with JSON Server (with ability to upload image/avatar stored in base64, fallback to UI avatars API if no image provided)
Randomly select daily who will shuffle
Daily Random Background from Picsum API

Daily Quotes and it's author with picture from Quoteable API

Sound of deck cards shuffling
Confetti effect when shuffle finished sorting (with an extra audio…



View on GitHub

Give a ⭐️ if you enjoyed this project or buy me a coffee!

Create an App Information Component in Nuxt

https://dev.to/ravgeetdhillon/create-an-app-information-component-in-nuxt-1ock
You must have seen multiple apps which show the app’s information like app version and last updated at time in their footers or via a floating action button. In this tutorial, you’ll learn to create a component to show such kind of information in a Nuxt app.
Read the full blog on RavSam.
Thanks for reading 💜
I publish a monthly newsletter in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.
Connect with me through Twitter • LinkedIn • Github or send me an Email.
— Ravgeet, Full Stack Developer and Technical Content Writer

4 Top Rated Queries about Vue.js 3 on StackOverflow

https://javascript.plainenglish.io/4-top-rated-queries-about-vue-js-3-on-stackoverflow-90beaff3b285?source=rss------vuejs-5
Answering the 4 top-rated questions on Vue.js 3.Continue reading on JavaScript in Plain English »

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/