Word/Random Number Generator Built Using Vue.js

https://vuejsexamples.com/word-random-number-generator-built-using-vue-js/
Word/Random Number Generator Built Using Vue.js

Appetiser Apps Coding Challenge

https://vuejsexamples.com/appetiser-apps-coding-challenge/
Appetiser Apps Coding Challenge

Multiple Authentication Using Laravel-Jetstream With Inertia-Vue

https://vuejsexamples.com/multiple-authentication-using-laravel-jetstream-with-inertia-vue/
Multiple Authentication Using Laravel-Jetstream With Inertia-Vue

Sikayetvar CRUD app written with VUE

https://vuejsexamples.com/sikayetvar-crud-app-written-with-vue/
Sikayetvar CRUD app written with VUE

Official Genesis website written in Vue

https://vuejsexamples.com/official-genesis-website-written-in-vue/
Official Genesis website written in Vue

An example of a TODO app that makes 10 minutes of quality

https://vuejsexamples.com/an-example-of-a-todo-app-that-makes-10-minutes-of-quality/
An example of a TODO app that makes 10 minutes of quality

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 »