The Nativescript RootLayout and Nativescript-Vue

https://medium.com/@adeyemiadetayo07/the-nativescript-rootlayout-and-nativescript-vue-a404b88fc65d?source=rss------vuejs-5
So, if you follow Nativescript closely, the release note for Nativescript 8 introduced a new layout, RootLayout (see release note here)…Continue reading on Medium »

Nuxt.js | How to retain Scroll Position when returning to page without Navigation History

https://medium.com/@luizzappa/nuxt-js-how-to-retain-scroll-position-when-returning-to-page-without-navigation-history-7f0250886d27?source=rss------vuejs-5
The Nuxt framework already provides a feature to preserve the scroll position when returning to a page if the user clicks the browser’s…Continue reading on Medium »

i just coded and commited a little something..

https://dev.to/valbuena/i-just-coded-and-commited-a-little-something-30j1
this is actually my very first post.
as i was re-building my portfolio i found myself putting everything in components and i tought some may find a couple of those useful.
i give you ✨ fancyCursor a VUE component to add some fanciness to your vue project. hope you like it.

happy new year!

Is Angular still relevant in 2022?

https://dev.to/tomaszs2/is-angular-still-relevant-in-2022-3efg
Angular is still developed. Last years performance improvements (Ivy engine) causes build time to be fast and comparable to React. Also interactiveness is comparable to React.
Angular enters 2022 year as a strong framework that proves its value for people who like to focus on design and user experience rather than handling technical issues introduced by complicated sets of libraries that form frameworks around React.
While React development is also ongoing and enables developers to hotwire amazing projects, Angular holds to the mission of being stable, predictable framework that you can learn once and transfer the knowledge to every project.
Year 2022 is for Angular deciding. Vue - a in between tries to buy programmers keyboards. Svelte is another library around. But the real competitor for Angular is Ember. The only framework that provides similar level of coding comfort.
Eventually 2022 will be a year of serious decisions. Will Angular be removed to replace or with intensively marketed React? Will developers working earlier with jQuery or React, Vue, Svelte put their horses on well thought through framework that helps to focus on user experience?
Will developers support Angular by adjusting libraries accordingly? Aside from technical discussions, and decisions, 2022 fate depends more on trends, just like fashion is dependant.
One is sure, Angular is here to stay supporting developers and users in in proving and having state of art experience.

JavaScript current year with getFullYear()

https://dev.to/nickfrosty/javascript-current-year-with-getfullyear-h1c
Did you hard code the year in your footer? New year, new problems.
With this one-liner, you can dynamically set the year with JavaScript:



let year = new Date().getFullYear();


If you are using VueJS or NuxtJS, you can add the current year code directly into your template section



<template>
<footer>
Copyright © {{ new Date().getFullYear() }}
</footer>
</template>


You can find more useful dev articles on my site, frostbutter.com/articles

Hacking together a web-scraping enrollment app

https://dev.to/nandanv2702/hacking-together-a-web-scraping-enrollment-app-3eb6
Overview of My Submission

If you're a university student / have ever been to uni, you know how cumbersome enrollment can be. You need to look for a class, find the profs, find out how good they are and their average GPA - all this takes time!
So, this app aims to sort professors by rating and GPA trend for any course in this semester or the upcoming one/(s) at my uni - and all you need to do is look up course 😄




Submission Category

Choose Your Own Adventure



Link to Code






nandanv2702
/
unitrack



Sort UW-Madison professors by rating and GPA trend for any course in this semester or the upcoming one/(s)






UniTrack
Sort professors by rating and GPA trend for any course in this semester or the upcoming one/(s)

The Problem
Here's what it's like enrolling for classes:


Search for a class on the Course Search and Enroll App

Search for every professor's rating online

Search for every professor's GPA trends on MadGrades


Try to make sense of this data

Have a Spotted Cow 🍻


Repeat for 5 other classes this semester


The Solution
Here's what you could do instead:


Look up a class on this app

Have a Spotted Cow 🍻


View grade trends and ratings all in one place!


What I Used


MadGrades API

Find course by name, e.g., 'Econ 101'
Find all GPA data and filter by professor


UW Madison's Public Course Search and Enroll API

Find course in a particular semester
Find professors for all sections in one course in a semester


Good ol' web scraping for…



View on GitHub




Additional Resources / Info

Here's some of the tools I used

MongoDB Atlas

NuxtJS - a VueJS framework

ChakraUI - an accessibility-oriented component library

Vuejs artık eskisi gibi değil…

https://medium.com/@swoorr/vuejs-art%C4%B1k-eskisi-gibi-de%C4%9Fil-cc9615ae53bc?source=rss------vuejs-5
Herkese selamlar öncelikle… 
Ben kendi gördüklerimi paylaşmaya çalışacağım, bilgi değil deneyim aktarma yanlısıyım ✌️Continue reading on Medium »

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

https://javascript.plainenglish.io/create-a-beautiful-to-do-list-app-with-vuetify-adding-new-tasks-63839dc462c8?source=rss------vuejs-5
Use FABs, dialogs and form controls to enable adding of new tasks in the to-do list app.Continue reading on JavaScript in Plain English »

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 »