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 »

Webpack5 + vue3

https://dev.to/vadim/webpack5-vue3-g0n
Nevertheless you can create a simple vue app by
npm install --save-dev @vue/cli

vue create vue3-project
but it is too simple. Sometimes we need to be close to bare metal - then we need a custom build with our own webpack.config.js. Reasons you might need that:

you are a skilled webpack user
you have a proven webpack config from a previous project
you want to integrate with some third parties

Here a simple proven webpack.config.js which allows using Single File Components (SFC). Here is a project structure we are going to use:

Features included:

CSS modules
extract node_modules to a separate file (or chunk, or bundle)

webpack.config.js:



const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const src = path.resolve(__dirname, 'src');
const dist = path.resolve(__dirname, 'dist');
module.exports = (env, argv) => {
const IS_PRODUCTION = argv.mode === 'production';
const config = {
entry: './src/index.js',
output: {
path: dist,
filename: "[name]-[contenthash].js",
},
resolve: {
alias: {
"@": src
}
},
mode: argv.mode,
devServer: {
static: dist
},
plugins: [
new HtmlWebpackPlugin(),
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
],
module: {
rules: [{
test: /\.vue$/,
loader: "vue-loader",
exclude: /node_modules/
}, {
test: /\.css$/,
use: [
IS_PRODUCTION ? MiniCssExtractPlugin.loader : "style-loader",
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[local]--[hash:base64:6]",
},
}
}
]
}, {
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}, {
test: /\.(png|jpe?g|gif|webm|mp4|svg)$/,
loader: "file-loader",
options: {
outputPath: "assets"
}
}]
},
optimization: {
minimizer: [
// extend default plugins
`...`,
// HTML and JS are minified by default if config.mode === production.
// But for CSS we need to add this:
new CssMinimizerPlugin()
],
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'node_modules',
chunks: 'all',
},
},
},
}
};
if (IS_PRODUCTION) {
// put all CSS files to a single <link rel="stylesheet" href="...">
config.plugins.push(new MiniCssExtractPlugin({
filename: "[contenthash].css"
}));
} else {
// config.devtool = "inline-source-map";
}
return config;
}


package.json:



"scripts": {
"start": "webpack serve --open --mode=development",
"build": "webpack --mode=production --progress",
"dist-clean": "rm -fr dist/*"
},


Full project https://github.com/vinogradov/webpack-templates/tree/main/webpack5-simple-vue. Thanks!

Vue.js: replace with in dynamic HTML

https://medium.com/@marius.dras/vue-js-replace-a-with-router-link-in-dynamic-html-c423beea0d17?source=rss------vuejs-5
When using v-html (for example to display an article pulled from your CMS) it is desirable replace local links with Vue Router’s…Continue reading on Medium »

Vue.js Interview Challenge — #11— Direction Arrow — Solution

https://medium.com/js-dojo/vue-js-interview-challenge-11-direction-arrow-solution-fb79b4b180d6?source=rss------vuejs-5
SolutionContinue reading on Vue.js Developers »

Vue.js Interview Challenge — #11 — Direction Arrow

https://medium.com/js-dojo/vue-js-interview-challenge-11-direction-arrow-c3d12ccbb00c?source=rss------vuejs-5
Problem statementContinue reading on Vue.js Developers »

Getting rid of NgModule in Angular. Javascript

https://dev.to/antmik/getting-rid-of-ngmodule-in-angular-javascript-2gcc
Working many years with angular I found it hard to create the structure of a project. The main reason for that struggle lay behind the way Angular interacts with components and modules. The following article explains what is the issue with NgModule and whether is going to change in the foreseeable future.



Builtin lazy loading mechanisms

Angular has NgModule based architecture. In other words, each application has at least one NgModule which connects all the components and routes together. It is a practical approach for applications structure. An application has a central unit that contains all the declarations. That’s right when we are talking about small web apps.
When working with large Single Page Applications performance becomes a critical pain point. It is a time to start thinking about optimization. One of the ways to reduce loading times is to minify application size on the first load. This goal can be achieved with lazy loading. The technique is supported by angular routing mechanisms.
The technique allows loading specific parts of an application only when needed. Here is the full documentation on how to implement lazy loading within Angular framework.



What is wrong with NgModules?

Up to now, all seems correct, right? Let’s zoom in to see whether potential issues could pop up.
For instance, we will take the Angular Material UI. The framework should comply with best practices because it is built and maintained by the Angular team. Looking at the components provided you may mention that each of them has its own NgModule. It is done to allow importing of a single component without grabbing all them and overloading the application.
What does all that mean for me as a developer? Practically you will need to create a NgModule for each of the components. Thus double action on each component creation.
For newbies, the concept may appear quite painful. To be honest for me to work in this way is still frustrating.



VueJs components interaction

When I started to work with VueJs I didn’t feel any discomfort. Just after some period of time mentioned I am doing fewer actions to achieve the same component interactions than I was doing in Angular. “How could it be?” I thought. Just after side by side comparison, figured out what was missing through all the development process with VueJs. The answer was “modules”.
In VueJs all is based on components. Do you want to create a page? Make a component. Do you want to create a reusable UI piece of code? Make component! Nothing more. Just that easy.
Aren’t modules making a more coherent structure? Correct me if I am wrong, but I didn’t mention any practical benefit of this additional architecture layer yet.



Is it going to change?

Yes, the Angular roadmap gives all Angular developers a ray of hope. The proposal was explained and discussed in this “[Complete] RFC: Standalone components, directives and pipes — making Angular’s NgModules optional”.
Yet, pay attention to this statement:

This proposal is not trying to remove the concept of a NgModule from Angular — it is rather making it optional for typical application development tasks.

At the same time we believe that it paves the path towards greatly reducing the role of NgModule for typical development scenarios — to the point that some time in the future it would be possible and reasonable for us to consider removing it altogether.




To conclude

Getting rid of modules is the first step towards Angular architecture simplification. So far I see only benefits in that act.
Who knows maybe in the future Angular will adopt a functional components approach as React did instead of classes.

Getting rid of NgModule in Angular. Javascript

https://medium.com/@antmihlin/getting-rid-of-ngmodule-in-angular-javascript-43fd510779bc?source=rss------vuejs-5
Working many years with angular I found it hard to create the structure of a project. The main reason for that struggle lay behind the way…Continue reading on Medium »

Nuxt 學習筆記(ep.02)

https://medium.com/@case13486/nuxt-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-ep-02-a7bf21c09b4f?source=rss------vuejs-5
專案建好了…看一下我建了甚麼Continue reading on Medium »

Why Use Vue.js to Develop Robust Web & Mobile Apps | Top 6 Reasons to Check

https://innvonixtechsolutions.medium.com/why-use-vue-js-to-develop-robust-web-mobile-apps-top-6-reasons-to-check-392c9ca3521b?source=rss------vuejs-5
Vue.js is aJavaScript framework that can be used to develop interactive user interfaces without requiring a significant amount of…Continue reading on Medium »

Authenticating users to your web app using metamask and nodejs

https://duartefdias.medium.com/authenticating-users-to-your-web-app-using-metamask-and-nodejs-e920e45e358?source=rss------vuejs-5
A step-by-step guide with code snippets for implementing a web3 jwt based login flow.Continue reading on Medium »

OverVue 5.0: Get Started With Vue 3 — FAST

https://medium.com/@lamerson28/overvue-5-0-get-started-with-vue-3-fast-873d8c3dcfa5?source=rss------vuejs-5
A prototyping tool to quickly bring your Vue 3 ideas to lifeContinue reading on Medium »

VueJs whitout Node and npm

https://medium.com/@certosinolab/vuejs-whitout-node-and-npm-b7410981ccdc?source=rss------vuejs-5
Build a VueJs application whitout a Build Step and add an external multiselect component from unpkg.comContinue reading on Medium »

Vue 2 ve Vue 3 Arasındaki Farklar Neler?

https://medium.com/berkut-teknoloji/vue-2-ve-vue-3-aras%C4%B1ndaki-farklar-neler-2de15b89c409?source=rss------vuejs-5
Vue 3, gelişen bir JavaScript frameworkü ve Vue&apos;nun en son sürümüdür. Geliştiricilerin ulaşılabilir, çok yönlü, performanslı, bakımı kolay…Continue reading on Berkut Teknoloji »