i coded and published a fancy cursor component

https://dev.to/valbuena/i-coded-and-published-a-fancy-cursor-component-3i62
i am re-building my personal website using VUE3 (vite, gsap, typescript, composition API and WebGL-Fluid-Simulation by Pavel Dobryakov)
i've put everyhing in components. some may find this one interesting/useful.
https://github.com/vlbn/fancycursor
any feedback is always welcome!

Solved: Module not found: Error: Can't resolve 'sass-loader'

https://dev.to/cyebukayire/solved-module-not-found-error-cant-resolve-sass-loader-50l7
I have been struggling with this problem a few minutes ago when I was trying to install node-sass and sass-loader in my Vuejs project.

I used this command :

npm i --save-dev node-sass sass-loader

Output:

Could not resolve dependency: npm ERR! dev sass-loader@"*" from the root project npm ERR!

With some sort of:




npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^4.0.0" from @intervolga/[email protected]
npm ERR! node_modules/@intervolga/optimize-cssnano-plugin
npm ERR! @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-service
npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR! 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
npm ERR! peer webpack@"^4.0.0 || ^5.0.0" from @soda/[email protected]
npm ERR! node_modules/@soda/friendly-errors-webpack-plugin
npm ERR! @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-service
npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR! 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
npm ERR! 19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! peer webpack@"^5.0.0" from [email protected]
npm ERR! node_modules/sass-loader
npm ERR! dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.


So, I thought this was some dependency conflicts and there is actually a note about this here
This is how I solved the issue:

npm install -D sass-loader@^10 sass

Multi-tenant web app with firebase and google cloud identity

https://medium.com/@andriamanamisoa/multi-tenant-web-app-with-firebase-and-google-cloud-identity-f6227f198db6?source=rss------vuejs-5
As I am developing a SAAS project that is going to be used by several clients that share common activities but they don’t need necessarily…Continue reading on Medium »

Setting Up Vue 3 & Adonis JS Using Laravel Mix

https://cerwyn.medium.com/setting-up-vue-3-adonis-js-using-laravel-mix-d0107cffd9df?source=rss------vuejs-5
Adonis JS is one of the Laravel-like full-stack Node JS frameworks that have some benefits compared to Laravel. One of the reasons I used…Continue reading on Medium »

How To ‘Design’ a Design System — Part I

https://medium.com/insiderengineering/how-to-design-a-design-system-part-i-38a5c87f84f8?source=rss------vuejs-5
We decided to create our own design system because of the increasing complexity of the code between the components and the inconsistency…Continue reading on Insider Engineering »

VueJS Is The Most Preferable Core For Web Application Development

https://medium.com/@ishita.177/vuejs-is-the-most-preferable-core-for-web-application-development-437b96bc254d?source=rss------vuejs-5
In this blog, we will list out all those things that make Vue.js one of the most popular front-end frameworks. Vue.js offers the ease of…Continue reading on Medium »

How to attempt Coding-Assignments, for job applications

https://javascript.plainenglish.io/how-to-attempt-coding-assignments-for-job-applications-5cbbc5d06521?source=rss------vuejs-5
Show-off your skills in a tasteful mannerContinue reading on JavaScript in Plain English »

Web Weekly — Issue #1

https://blog.canopas.com/web-weekly-issue-1-4bb08558fb9c?source=rss------vuejs-5
Welcome to Web weekly — a weekly newsletter on new development and updates of Web universe curated by Canopas team, delivered every Monday.Continue reading on Canopas Software »

Quasar admin CRM with Quasar 2!

https://dev.to/mayank091193/quasar-admin-crm-with-quasar-2-5c78
I have migrated my Quasar Admin CRM template to Quasar 2! I am offering it at the cheap price of $49! If you want to purchase, please send me an email at [email protected]
Live demo:



https://next-quasar-admin-crm.netlify.app/

Do let me know in case of any questions.

Prevent Form Submission in Vue.js

https://dev.to/hirajatamil/prevent-form-submission-in-vuejs-3ncj
In this article, I’m going to cover two different ways on how to prevent default form submission behaviour using vue.js.
Let’s say you have a sign-up form that you do not want to submit to the server directly.
As you know, the default behaviour of the form element is to send the form input data via GET request when the submit button is pressed.



<form class="ui large form">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" placeholder="Username or Email"/>
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" placeholder="Password"/>
</div>
</div>
<button class="ui fluid pink button big" >SIGN IN</button>
</form>



form {
width:400px;
margin:20px auto;
}



To prevent that, what we want is to handle the form submission via an AJAX call of some sort.
There are two main ways you can prevent form submission in vue.js.



Invoke preventDefault Method

Attach a click event with a callback function signInButtonPressed to the submit button.



<button class="ui fluid pink button big" @click="signInButtonPressed">SIGN IN</button>


Then, declare the signInButtonPressed function inside the methods object.



methods: {
signInButtonPressed() {
console.log("sign in button is pressed");
}
}


When you hit the sign in button at this stage, you can see the message quickly in the browser console and then it disappears as the page gets reloaded.
Also notice the question (?) mark added to the URL that indicates the form is trying to send data via GET request.
Continue Reading...

how to add Tailwind CSS to your Vue 2 project easily [in one command]

https://dev.to/slimpython/how-to-add-tailwind-css-to-your-vue-2-project-easily-in-one-command-1db0
In this video, I have explained how to add Tailwind CSS to your Vue 2 project easily, this video can be very helpful for those are trying the old fashion way and getting lot's of errors like tailwindcss postcss plugin tailwindcss requires postcss 8 etc

Nuxt Fetch - A renderless component

https://dev.to/elmatella/nuxt-fetch-a-renderless-component-3hdn
Hey, I'm writing my first blog post here to talk about a simple renderless component I wrote for NuxtJS that I use everyday.
It's a renderless component for NuxtJS that allows me to take advantage of VueJS slots to write less logic when fetching remote data.
Here is a basic copy/paste of the README:



Installation


yarn add @hammerbot/nuxt-fetch





Usage


<template>
<div>
<nuxt-fetch :fetch-fn="fetchFn">
<template #default="{ data, fetching, error }">
<p>
{{ data }} - {{ fetching }} - {{ error }}
</p>
</template>
<template #fetching>
Fetching for the first time
</template>
<template #error="{ error }">
Error handling {{ error }}
</template>
</nuxt-fetch>
</div>
</template>
<script >
import NuxtFetch from '@hammerbot/nuxt-fetch'
export default {
components: {
NuxtFetch
},
methods: {
async fetchFn () {
const { data } = await this.$api.get('/foo')
return data
}
}
}
</script>


As you can see in the example, I don't need to use any v-if statement or anything. I'm just using slots here and I find it much less verbose.
Tell me if you like it! I will write a better documentation if someone in this world uses it.
Cheers and happy new year!
PS: If you like it, leave me a star on Github! If you don't.. Tell me why in the comments!
https://github.com/ElMatella/nuxt-fetch

Create a Beautiful To-Do List App With Vuetify: Deleting Tasks

https://javascript.plainenglish.io/create-a-beautiful-to-do-list-app-with-vuetify-deleting-tasks-3b7bc2bc301f?source=rss------vuejs-5
Use the Vuetify hover component and an icon button to add task deletion functionality to the app.Continue reading on JavaScript in Plain English »

Javascript Array methods, a simpler way!

https://medium.com/@rajukhunt/javascript-array-methods-a-simpler-way-92f4c2a23cb3?source=rss------vuejs-5
I know how long it takes before this knowledge sticks up in our minds, so here is a quick recap!Continue reading on Medium »

Best VueJs Development Company in New York| VueJs Services New York

https://itriangletechnolabs.medium.com/best-vuejs-development-company-in-new-york-vuejs-services-new-york-7476d364b34d?source=rss------vuejs-5
iTriangle Technolabs is the best VueJs Development company in New York with a development center located in India.Continue reading on Medium »

💡 Vue Typescript State Management : We can do better than “isLoading” in 2022

https://dev.to/monisnap/vue-typescript-state-management-we-can-do-better-than-isloading-in-2022-2n5d
Sorry for the clickbait title, but I needed your attention 👀 
Have you ever encountered code like this one :



new Vue({
el: '#app',
data () {
return {
info: null,
loading: true,
errored: false
}
},
filters: {
currencydecimal (value) {
return value.toFixed(2)
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
this.info = response.data.bpi
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
})
...
<div id="app">
<h1>Bitcoin Price Index</h1>
<section v-if="errored">
<p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
</section>
<section v-else>
<div v-if="loading">Loading...</div>
<div
v-else
v-for="currency in info"
class="currency"
>
{{ currency.description }}:
<span class="lighten">
<span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
</span>
</div>
</section>
</div>


It’s an example I found in the Vue documentation here https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html#Dealing-with-Errors
What if you have multiple things that could load, do you add a loading2 variable ? 👀
To solve this issue, you can use a variable for each async actions you have with this 4 “states” :

IDLE : the user didn’t trigger the action yet
WAITING : the action is ongoing
ERROR : there was an error
DONE : The action succeeded

Using an enum with the different states, and better naming, the code can be rewritten like this :



enum AsyncState {
IDLE = 'IDLE',
WAITING = 'WAITING',
ERROR = 'ERROR',
DONE = 'DONE',
}
new Vue({
el: '#app',
data () {
return {
info: null,
AsyncState,
currentPriceLoadState: AsyncState.WAITING,
}
},
filters: {
currencydecimal (value) {
return value.toFixed(2)
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
this.info = response.data.bpi
this.currentPriceLoadState = AsyncState.DONE
})
.catch(error => {
console.log(error)
this.currentPriceLoadState = AsyncState.ERROR
})
}
})
...
<div id="app">
<h1>Bitcoin Price Index</h1>
<div v-if="currentPriceLoadState === AsyncState.WAITING">Loading...</div>
<section v-else-if="currentPriceLoadState === AsyncState.ERROR">
<p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
</section>
<section v-else>
<div v-for="currency in info" class="currency">
{{ currency.description }}:
<span class="lighten">
<span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
</span>
</div>
</section>
</div>


With better naming and this simple enum, you can almost cover all the use cases where you need to load one or multiple things and manage errors ✨
If you want to manage different error messages, you can add another variable with an enum type like this :



enum CurrentPriceLoadErrors {
INVALID_CURRENCY = 'INVALID_CURRENCY',
API_LIMIT_REACHED = 'API_LIMIT_REACHED',
DEFAULT = 'DEFAULT',
}


Tell me in the comment section if you like this trick or not, and if you have an even better technique !
And don’t forget to like and share this post if you liked it 💙

Vue + SSR + AMP — как подружить SPA с гугл страницами

https://habr.com/ru/post/599301/?utm_campaign=599301&utm_source=habrahabr&utm_medium=rss
Привет, хабрист!Довольно давненько подружил свои приложения с гуглом.Основная идея была - не создавая новых шаблонов, получить все страницы сайта AMP-friendly и, вообще, сделать ядро приложения AMP-ready.Тут нас поджидает серьезная переработка стилей CSS и структуры приложения путем добавления дубликатов забаненных гуглом компонентов, таких как картинки, карусели, менюхи и прочее.Я буду вещать на примере самого простого - картинок. Все прочее аналогично, хоть и посложнее на практике.Объявим зависимости Читать далее

Code: Views-driven router paths, instead of a hardcoded mess — VueJS

https://andrewwinnicki.medium.com/code-views-driven-router-paths-instead-of-a-hardcoded-mess-vuejs-b3f0d257c553?source=rss------vuejs-5
Router configuration paths are defined in one massive file sitting in the index.js file, where all the magic happens. That has to change!Continue reading on Medium »

Dockerizing Vue App With NodeJS Backend — Typescript Version

https://medium.com/bb-tutorials-and-thoughts/dockerizing-vue-app-with-nodejs-backend-typescript-version-3244573b6a02?source=rss------vuejs-5
Both Vue and NodeJS are in TypescriptContinue reading on Bachina Labs »

20+ Useful Vue JS Components 2022

https://medium.com/js-dojo/20-useful-vue-js-components-2022-3bf9fbe5b556?source=rss------vuejs-5
Want to make your vuejs based app’s interface unique and appealing? Then here is the collection of Vue js Components that you can use for…Continue reading on Vue.js Developers »