Getting Started with Vue.js+Vuex

https://medium.com/madgical-techdom-madtechbits/getting-started-with-vue-js-vuex-af9eec09e056?source=rss------vuejs-5
Nowadays Vue.js is one of the most popular and progressive frameworks for building user interfaces. It was developed by Evan You in…Continue reading on Madgical Techdom — MadTechBits »

[TIL] SomeComponent.props to reuse a components props

https://dev.to/neophen/til-somecomponentprops-to-reuse-a-components-props-4i53
Today I learned you can do this in a .vue component file:



<script>
import SomeComponent from "./SomeComponent.vue"
export default {
props: {
...SomeComponent.props
}
}
</script>


This allows to write wrapped components much easier!

A portfolio for developers with a blog powered by Notion

https://dev.to/aymanemx/a-portfolio-for-developers-with-a-blog-powered-by-notion-hp0
Demo: https://aymaneMx.com (my portfolio)

Github: https://github.com/aymaneMx/nuxt-portfolio-dev



Features:


🥰 minimal and clean portfolio
🌗 the dark/light mode (Auto detect the system color-mode)
📱 responsive (tablet & mobile friendly)
⚙️ render articles from Notion 🚀
⭐ fetches your Github pinned projects with most stars
💫 Eslint & Prettier configured
📈 google analytics integration
⚡ generate sitemap (visit /sitemap.xml)
🚀 one-click deployment to netlify




Deploy your own version:


clone the projects from Github, setup Netlify to deploy on each merge to the main branch, I highly recommend this method!
for the lazy people out there, you can use Netlify deploy button

but first, check out the prerequisites.
Prerequisites

create Notion account
duplicate this template by clicking on duplicate button located at the top of the page.
make your notion table public (by clicking on share button located at the top of the page)
grab the table id from the table link:
eg:



link: https://aymanemx.notion.site/aymanemx/ceef6f1a895a46b2a0e4a87b41405547?v=8427738adccd4b2a8c28156be3757156
id: ceef6f1a895a46b2a0e4a87b41405547



do the same thing for about page id (we gonna use it as an env variable NOTION_ABOUT_PAGE_ID)
get your Google analytics id (this one is optional)
now you can click to the deploy button and fill the Netlify form


Credits:

🌔 The dark mode : eggsy

🎨 the minimal design : Monotone

⭐ The open source section : mouadziani and smakosh

catch errors in async/await like a pro

https://rahuulmiishra.medium.com/catch-errors-in-async-await-like-a-pro-62491580fef?source=rss------vuejs-5
The main reason of using 
- async await makes our code look like synchronous 🐼
- clean code 🧹Continue reading on Medium »

Add comments to your Gridsome app!

https://dev.to/bharattttttt/add-comments-to-your-gridsome-app-258j
Recently, I had to go through the process of thinking about how to add comments to a magazine website that I had built a while back using Gridsome - a JAM-stack based static site generator for Vue.



TL;DR

Of all the commenting engines, if you're looking for something that's free for low usage and easy to integrate: go ahead with Disqus.
Use this excellent component to integrate Disqus for Vue packages : vue-disqus.



Build your own comments?

This is the option I began with.

If your application already has authentication, then I'd say it might be worthwhile for you to be able to control and own your own comments data by building a comments component.

However, any standard comments system would expect:

nested replies
emoji reactions
likes
to be a part of it - things that rapidly start spinning out of the maintainability hand.




Disqus

I'd seen Disqus being used across multiple websites for comment management, so I was inclined to integrate it.
The other option I considered (but quickly abandoned) was NodeBB, but soon realised that it was more of a full-fledged discussions management solution, rather than an easy embeddable comments manager.



Usage

Before integrating, all I had to do was:

Create a Disqus account and generate a "shortcode" for my app.
I followed the steps mentioned here and had no issues integrating.
Behind the scenes, the component embeds <shortcode>.disqus.io as an iframe, wherever you include it.




Limitations

Keep in mind that:

Disqus is not open source
You don't own the comments data that comes in
Although it's free to begin with, if you're anticipating high traffic or want to remove any ads being displayed on the page, you might want to check out the pricing pages or investigate alternative solutions.

Happy commenting!

React Vs Vue — What To Use

https://medium.com/@shaheermalikofficial/react-vs-vue-what-to-use-d6d3e6a67d6a?source=rss------vuejs-5
If you’re considering developing an app, you should understand the advantages and disadvantages of React vs. Vue. The former uses…Continue reading on Medium »

Quickly Fix CORS issues in Vue- Express app

https://dev.to/opeolluwa/quickly-fix-cors-issues-in-vue-express-app-45bl
Cross-Origin Resource Sharing (CORS)as defined on MDN web docs, is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
Due to CORS issues, scaffolding your first full stack application can be heart breaking😬
So We have a Lil nice chat about dealing with CORS issues in a Vue and Express Js App.
To start with.

Create a new file the the base directory of your Vue project



touch vue.config.js




`


add the following to your the file

`


module.exports = {
devServer: {
proxy: 'https://api.back.end',
}
}



`


navigate to your backend base directory and run the following command

`


npm i cors --save



` this make it easier to handle cors

The following lime assumes your Express instance is named app if not change app to

`



const app = require("express")
//...
//the rest of your import here
//...
const cors = require cors()
app.use(cors());
//... continuation of your application




`

😊 And that does it.



Reference and more reading

Cross-Origin Resource Sharing



follow me

twitter


Github

nuxt reported that “loose” option was set to “false” in your @babel/preset-env config, it will not…

https://medium.com/@lllomh/nuxt-reported-that-loose-option-was-set-to-false-in-your-babel-preset-env-config-it-will-not-4151b780338f?source=rss------vuejs-5
Nuxt execution error: WARN Though the “loose” option was set to “false” in your @babel/preset-env config, it will not be used for…Continue reading on Medium »

How to use Moment.js with Vue 3?

https://medium.com/@robert.roksela/how-to-use-moment-js-with-vue-3-490da75f566?source=rss------vuejs-5
Hi.Continue reading on Medium »

Difference between VueJS vs React

https://medium.com/@externlabs/difference-between-vuejs-vs-react-c895b87bcbb6?source=rss------vuejs-5
Every web application development project starts with a confusing dilemma: which is the best framework for our project? We cant you the…Continue reading on Medium »

Windows ClipBoard History Clone Using Electron And Vue.js

https://decodebuzzing.medium.com/windows-clipboard-history-clone-using-electron-and-vue-js-587b658dff33?source=rss------vuejs-5
Why not create your own Windows ClipBoard History Clone Using Electron js and Vue.js + with better features?Continue reading on Medium »

Placeholder title

https://dev.to/modex98/placeholder-title-bnb
Web developer (MEVN stack) my email is [email protected]

Using Custom Vue Directives for reusable DOM manipulation

https://medium.com/@tanweishen97/using-custom-vue-directives-for-reusable-dom-manipulation-3e27122718ec?source=rss------vuejs-5
ChallengeContinue reading on Medium »

When Vue Meets Proxy

https://levelup.gitconnected.com/when-vue-meets-proxy-402e9e3c6722?source=rss------vuejs-5
Examine Internal of vue.JS to Reveal How It Uses Proxy to Achieve ReactivityContinue reading on Level Up Coding »

Using v-model with objects in Vue3

https://dev.to/blindkai/objects-and-v-model-in-vue3-1l9h
Motivation

When I was using Vue2 along with vue-class-component and vue-property-decorator it was easy to synchronize v-models between components simply using @ModelSync(). When Vue 3 came out with its Composition API another way was needed to achieve the same result as if Class Component was used.



Implementation

If you're already familiar with the capabilities of Composition API, then simply use computed within setup to update the modelValue whenever it changes.
1) In child component define a model property with the default value



import { defineComponent } from 'vue';
<script>
export default defineComponent({
name: 'FancyComponent',
props: {
modelValue: { // Declare the property
type: Object,
default: () => ({}), // Do not forget about default value
},
}
});
</script>


2) In setup() define a computed property and expose it:



<template>
<div>
<input v-model="theModel.foo" /> <!-- Usage of model -->
</div>
</template>
<script>
import { defineComponent, computed } from 'vue';
export default defineComponent({
name: 'FancyComponent',
emits: ['update:modelValue'], // The component emits an event
props: {
modelValue: {
type: Object,
default: () => ({}),
},
},
setup(props, { emit }) {
const theModel = computed({ // Use computed to wrap the object
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value),
});
return { theModel };
}
});
</script>


3) In parent component use v-model directive:



<template>
<FancyComponent v-model="someObject" />
</template>





TypeScript

In the case of using TypeScript, there is one minor addition to the code above. PropType<T> is used it order to annotate the model type.



<script>
import { defineComponent, computed, PropType } from 'vue';
interface OurModelType {
foo: string;
}
export default defineComponent({
name: 'FancyComponent',
emits: ['update:modelValue'],
props: {
modelValue: {
type: Object as PropType<OurModelType>, // Type Annotation
default: () => ({}),
},
},
setup(props, { emit }) {
const theModel = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value),
});
return { theModel };
}
});
</script>


And it's all you need to know to pass reactive objects into your custom components as v-model.

Difference between Angular Vs React Vs Vuejs

https://medium.com/@externlabs/difference-between-angular-vs-react-vs-vuejs-51781b8c7bed?source=rss------vuejs-5
VueJS vs React vs AngularContinue reading on Medium »

Javascript nodejs package.

https://medium.com/@sergiturbadenas/javascript-nodejs-package-bd0bbd32bc48?source=rss------vuejs-5
Nova sèrie al canal de Youtube: https://tubeme.acacha.org/javascript_packageContinue reading on Medium »

Nuxt.js & Vercel Entegrasyonu

https://medium.com/@serdargoleli/nuxt-js-vercel-entegrasyonu-6aef84cf8575?source=rss------vuejs-5
Gelişen teknolojiler ile birlikte her gün yeni teknolojiler, kütüphaneler ve frameworkler çıkıyor. Bu yazımda sizlere nuxt.js ile…Continue reading on Medium »

League of Legends!

https://dev.to/thuongtruong1009/league-of-legends-i21
Hi!

Practice is the best ways to learn. I beginning with VueJs and i have just been public League of Legend web clone.

You can get a preview at league-of-legends-clone.

If you like this, let it a star bonus to support me!

Thank you very much!

Happy coding 😊

Going Beyond React, The Beauty of Vue

https://medium.com/@jeffrey_70059/going-beyond-react-the-beauty-of-vue-4394e0aad559?source=rss------vuejs-5
When I started at Ennetix I was told that the company used Vue for the frontend.Continue reading on Medium »

What are the differences between the following two methods？

https://dev.to/shweblee/what-are-the-differences-between-the-following-two-methods-2l29
What are the differences between the following two methods, please?

eg1: const router = new vueRouter({...}) export default router
eg2: export const router = new vueRouter({...})