Vue.js Digest 🇷🇺 🇺🇸
39 subscribers
389 photos
745 links
Дайджест новостей из мира vuejs
Download Telegram
A Simple Shopping Cart Built With Vue

https://vuejsexamples.com/a-simple-shopping-cart-built-with-vue/
A Simple Shopping Cart Built With Vue
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
A tool to spam a list of messages in CS:GO

https://vuejsexamples.com/a-tool-to-spam-a-list-of-messages-in-csgo/
A tool to spam a list of messages in CS:GO
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
A simple Laravel 8 + Vue 2 + AdminLTE 3 based Curd Starter template for SPA Application

https://vuejsexamples.com/a-simple-laravel-8-vue-2-adminlte-3-based-curd-starter-template-for-spa-application/
A simple Laravel 8 + Vue 2 + AdminLTE 3 based Curd Starter template for SPA Application
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 »